总结React 组件的三种写法.docVIP

总结 React 组件的三种写法 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: ps.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 ); 复制代码 ES6-写法 React.Component React 升级到 v0.13 后就支持了 ES6 的class语法，我们可以使用class App extends React.Component{...}的方式创建组件，这也是目前官方推荐创建有状态组件的方式。用 ES6 重写上面 SwitchButton 组件的例子： 复制代码 1 import React from react 2 import { render } from react-dom 3 4 class SwitchButton extends React.Component { 5 constructor(props) { 6 super(props) 7 this.state = { 8 open: ps.open 9 } 10 this.handleClick = this.handleClick.bind(this) 11 } 12 13 handleClick(event) { 14 this.setState({ open: !this.state.open }) 15 } 16 17 render() { 18 let open = this.state.open, 19 className = open ? switch-button open : btn-switch 20 21 return ( 22 label className={className} onClick={th