标签：logs extend head click todo let hand http bind
React.createClass和extends Component的区别主要在于：
语法区别
propType 和 getDefaultProps
状态的区别
this区别
Mixins
React.createClass
import React from ‘react‘; const Contacts = React.createClass({ render() { return ( <div></div> ); } }); export default Contacts;
React.Component
import React from ‘react‘; class Contacts extends React.Component { constructor(props) { super(props); } render() { return ( <div></div> ); } } export default Contacts;
后一种方法使用ES6的语法，用constructor构造器来构造默认的属性和状态。
React.createClass：通过proTypes对象和getDefaultProps()方法来设置和获取props.
import React from ‘react‘; const Contacts = React.createClass({ propTypes: { name: React.PropTypes.string }, getDefaultProps() { return { }; }, render() { return ( <div></div> ); } }); export default Contacts;
React.Component：通过设置两个属性propTypes和defaultProps
import React form ‘react‘; class TodoItem extends React.Component{ static propTypes = { // as static property name: React.PropTypes.string }; static defaultProps = { // as static property name: ‘‘ }; constructor(props){ super(props) } render(){ return <div></div> } }
React.createClass：通过getInitialState()方法返回一个包含初始值的对象
import React from ‘react‘; let TodoItem = React.createClass({ // return an object getInitialState(){ return { isEditing: false } } render(){ return <div></div> } })
React.Component：通过constructor设置初始状态
import React from ‘react‘; class TodoItem extends React.Component{ constructor(props){ super(props); this.state = { // define this.state in constructor isEditing: false } } render(){ return <div></div> } }
React.createClass：会正确绑定this
import React from ‘react‘; const Contacts = React.createClass({ handleClick() { console.log(this); // React Component instance }, render() { return ( <div onClick={this.handleClick}></div>//会切换到正确的this上下文 ); } }); export default Contacts;
React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。
import React from ‘react‘; class TodoItem extends React.Component{ constructor(props){ super(props); } handleClick(){ console.log(this); // null } handleFocus(){ // manually bind this console.log(this); // React Component Instance } handleBlur: ()=>{ // use arrow function console.log(this); // React Component Instance } render(){ return <input onClick={this.handleClick} onFocus={this.handleFocus.bind(this)} onBlur={this.handleBlur}/> } }
我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：
import React from ‘react‘; class Contacts extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this); // React Component instance } render() { return ( <div onClick={this.handleClick}></div> ); } } export default Contacts;
如果我们使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。
React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。
import React from ‘react‘; let MyMixin = { doSomething(){} } let TodoItem = React.createClass({ mixins: [MyMixin], // add mixin render(){ return <div></div> } })
文章来自：https://segmentfault.com/a/1190000005863630
React.createClass和extends Component的区别
标签：logs extend head click todo let hand http bind
原文地址：http://www.cnblogs.com/webqiand/p/7777377.html
