组件规范
当你通过调用React.createClass()创建一个组件类时，应该提供一个包含render方法和其他可选的生命周期方法的说明对象。
请注意：可以使用简单的JavaScript类作为组件类。尽管有所不同，但是这些类应该实现大多数相同的函数。关于这些不同的更多信息，请参考我们关于ES6 class的文章。
render
ReactElement render()
render()方法是必须的。
当调用该方法，他应该检查this.props和this.state，并且返回单一的子元素。子元素可以是一个真实的DOM组件（例如：<div />或者React.DOM.div()）的虚拟的代表，也可以是你自己定义的另一个符合组件。
你也可以返回null或者false来表明你不想任何组件被渲染。在这种情况下，React选软了一个<noscript>标记来适配我们当前的差异算法。当返回null或者false时，ReactDOM.findDOMNode(this)会返回null。
render()应该是纯函数，这意味着他不能修改组件状态，每次被调用应该返回同样的结果，它不应该读写DOM或者用其他的方式和浏览器交流（例如，使用setTimeout）。如果你需要作用于浏览器，请在componentDidMount或者其他声明周期中执行。保持render()作为一个纯函数能让服务端渲染更加实际，并且让组件更容易被理解。
getInitialState
object getInitialState()
在组件被加载之前触发一次。返回值会被当做组件初始的this.state的值。
getDefaultProps
object getDefaultProps()
当类被创建的时候执行一次，并被缓存下来。当props没有被父组件指定时，映射中的值会被设置为this.props（即使用in检查）
该方法在所有实例被创建之前触发，因此不能依赖this.props。除此之外，请注意getDefaultProps()返回的任何复杂对象对象都会在所有实例中共享，而不是拷贝。
propTypes
object propTypes
propTypes对象允许在props在传递给组件之后做校验。关于propTypes的更多信息，请查看Reusable Components
mixins
array mixins
mixins数组允许在多个组件之间共享行为。关于mixins的更多信息，请查看Reusable Components
statics
object statics
statics对象允许定义被组件类调用的静态方法。例如：
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true
在该块内定义的方法是静态的，这意味着你可以在任意组件实例被创建之前调用该方法，该方法不能获取到组件的props或者state。如果在一个静态方法中你想要检查props的值，请调用者将props作为静态方法的参数传递。
displayName
string displayName
displayName字符创被用作调试信息。JSX自动设置该值；请查看JSX in Depth
生命周期方法
在一个组件的生命周期中，不同的方法在不同的时间点被执行。
Mounting: componentWillMount
void componentWillMount()
被触发一次，在客户端和服务端都会被执行，在初次渲染发生之前立即被触发。如果在该方法中调用setState，render()会使用更新后的state，尽管state发生了改变，仍然只执行一次。
Mounting: componentDidMount
void componentDidMount()
只在客户端（非服务端）被触发一次，在初次渲染发生之后立即被处罚。在声明周期的该点，你可以获取到你的子节点的任何引用（例如：访问DOM）。子组件的componentDidMount()在父组件之前被调用。
如果你想要集成其他的JavaScript框架、使用setTimeout或者setInterval、发送AJAX请求，请在该方法中执行。
Updating: componentWillReceiveProps
void componentWillReceiveProps(
object nextProps
)
每次组件接受到新的props都会被触发。在首次渲染时，该方法不会被调用。
在render()被调用之前，使用该函数当做props的过渡，并且通过调用this.setState()来更新state。旧的props可以通过this.props获取到。在该方法中调用this.setState()不会触发额外的渲染。
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
请注意：一个很常见的错误是假设在该方法执行过程中props已经改变了。要立即这为什么无效，请查看A implies B does not imply B implies A
并没有一个叫做componentWillReceiveState的类似方法。props转换可能引起state的改变，但是反过来并不成立。如果你需要在state改变时执行操作，请使用componentWillUpdate。
Updating: shouldComponentUpdate
boolean shouldComponentUpdate(
object nextProps, object nextState
)
当接受到新的props或者state渲染之前被调用。在首次渲染或者调用forceUpdate时，该方法不会被调用。
当你确定新的props或者state不会引起组件更新时，返回false。
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
如果shouldComponentUpdate返回false，render()函数会被完全跳过，知道下一次state改变。除此之外，componentWillUpdate和componentDidUpdate也不会被调用。
默认情况下，当state发生变化shouldComponentUpdate永远返回true来阻止微妙的bug，但是如果你等将state处理为不可变的，在render()中仅仅读取props和state，然后可以通过比较旧的props和state来实现shouldComponentUpdate。
如果性能是一个瓶颈，特别是有成百上千个组件时，使用shouldComponentUpdate来加速应用。
Updating: componentWillUpdate
void componentWillUpdate(
object nextProps, object nextState
)
当接受到新的props和state时，进行渲染之前立刻被调用。该方法在初次渲染时不会被调用。
使用此方法作为在更新发生之前执行准备的机会。
请注意：在该方法中不能使用
this.setState()。如果你需要响应prop的改变，请使用componentWillReceiveProps。
Updating: componentDidUpdate
void componentDidUpdate(
object prevProps, object prevState
)
当组件更新生成DOM之后立即被触发。该方法在首次渲染时不会被调用。
使用该方法作为组件更新后操作DOM的机会。
Unmounting: componentWillUnmount
void componentWillUnmount()
当一个组件被从DOM移除之后立即被触发。
在该方法中执行清理工作，例如删除在componentDidMount时添加的定时器和清理DOM元素。
网友评论