@H_4040@React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。
@H404_0@截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC)。
@H_404_0@你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模式,但书写 React 组件时 都会以提高代码阅读性、更优的组件性能、易于 bug 追踪为原则。下面我们就聊聊这三种写法的区别,以及各自所适用场景的最佳实践。
@H_4040@
ES5-写法 React.createClass
@H404_0@React.createClass不用多说,我们最早使用这个方法来构建一个组件“类”,它接受一个对象为参数,对象中必须声明一个render方法,render返回一个组件实例,下面用一个 SwitchButton 组件的例子来看看React.createClass的具体用法:
<div class="jb51code">
<pre class="brush:js;">
var React = require('react');
var ReactDOM = require('react-dom');
var SwitchButton = React.createClass({
getDefaultProp:function() {
return { open: false }
},getInitialState: function() {
return { open: this.props.open };
},handleClick: function(event) {
this.setState({ open: !this.state.open });
},render: function() {
var open = this.state.open,className = open ? 'switch-button open' : 'btn-switch';
return (
); } }); ReactDOM.render(