React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ...
React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。
截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC)。
你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模式,但书写 React 组件时 都会以提高代码阅读性、更优的组件性能、易于 bug 追踪为原则。下面我们就聊聊这三种写法的区别,以及各自所适用场景的最佳实践。
ES5-写法 React.createClass
React.createClass不用多说,我们最早使用这个方法来构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render方法,render返回一个组件实例,下面用一个 SwitchButton 组件的例子来看看React.createClass的具体用法:
1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3 4 var SwitchButton = React.createClass({ 5 getDefaultProp:function() { 6 return { open: false } 7 }, 8 9 getInitialState: function() {10 return { open: this.props.open };11 },12 13 handleClick: function(event) {14 this.setState({ open: !this.state.open });15 },16 17 render: function() {18 var open = this.state.open,19 className = open ? 'switch-button open' : 'btn-switch';20 21 return (22 <label className={className} onClick={this.handleClick.bind(this)}>23 <input type="checkbox" checked={open}/>24 </label>25 );26 }27 });28 29 ReactDOM.render(30 <SwitchButton />,31 document.getElementById('app')32 );
原标题:总结 React 组件的三种写法 及最佳实践 [涨经验]
关键词:react
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。