你的位置:首页 > 软件开发 > Java > 总结 React 组件的三种写法 及最佳实践 [涨经验]

总结 React 组件的三种写法 及最佳实践 [涨经验]

发布时间:2017-01-12 00:00:55
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 (#换成@)。

可能感兴趣文章

我的浏览记录