组件规范和生命周期——react文档翻译

组件规范

当通过调用React.creatClass()来生成一个组件类的时候，你需要提供一个规范对象作为参数传入，这个对象必须包含render方法以及包含其他可选的生命周期方法。这些方法介绍如下。

render

render()方法是必须的。
当调用这个方法的时候，它会检查this.props和this.state并且返回一个子元素（ child element ）。这个子元素可以是一个虚拟的原生DOM标签也可以是我们之前定义好的一个组件。当然也可以返回null或者false值表示不想做任何渲染。
在render方法的背后，React渲染了一个<noscript>标签以及运行diff算法。当返回null或者false值时，ReactDOM.findDOMNode(this)将返回null。
reder()方法需要纯净，即它不能修改组件的state，它每次调用所返回的值都需相同，并且它不能读写DOM或者和浏览器有互动操作（例如使用setTimeout()）。如果你需要和浏览器之间进行互动，那么将这些内容写入到componentDidMount()或者其他生命周期方法中。

getInitialState

这个方法在组件被挂载前调用一次，它的返回值会被用来初始化this.state。

getDefaultProps

这个方法在组件类创建的时候调用一次并将值缓存（意味着相同的组件重新挂载的时候这个方法不会被调用）。 如果组件的prop不是从父组件传进来，那么这些值将会用来初始化this.props。
这个方法是在任何实例被创建前调用。另外，这个方法返回的任何复杂类型值都会在实例之间共享而不是拷贝。

propTypes

propTypes对象允许你验证传递给组件的props的值是否符合要求，想要了解更多关于propTypes的内容请看可复用的组件

mixins

mixins数组允许你使用mixins来在多个组件之间共享一些行为。想要了解更多信息，请参阅可复用的组件

statics

statics对象允许你定义一些静态方法，这些方法可以在组件类中被调用。例如

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

静态方法意味着你可以在任何组件实例被创建之前调用这些方法，当然这些方法也因此无法获取你组件的props和state。如果你想要在静态方法中使用props或者state，那么在调用这些方法的时候将props或state作为参数传递进去。

displayName

displayName字符串会在debug中用到，详情参见https://facebook.github.io/re...

生命周期方法

不同的方法会在组件生命周期中不同的时间点执行。

Mouting：componentWillMount

在服务器端和在客户端调用一次，在初始化render执行之前。如果在这个方法里面调用setState，render()方法只会执行一次尽管state发生了改变。

Mouting：componentDidMount

仅仅在客户端调用一次，在初始化render发生之后立即被调用，在这个方法中你可以获取到组件中的任何子节点。因为子组件的componentDidMount()方法调用是在父组件之前。
如果你想整合其他js框架，例如使用setTimeout或者setInterval来设置时间或者发送AJAX请求，那么都可以在这个方法里面书写。

Updating: componentWillReceiveProps

这个方法是在组件接收到新的props的时候调用，在组件初始化渲染的时候不会调用此方法。
通过this.setState()来更新状态可以导致对render()方法的一次调用，而 componentWillReceiveProps 可以让你在render()调用之前来改变prop值。此时，旧的props可以通过this.props访问到，这个函数里面调用this.setSteate()不会触发额外的一次渲染。

备注1：常常出现的一个错误用法是认为在这个生命周期方法中props已经改变。
备注2：没有componentWillReceiveState这个相似的生命周期方法。prop的改变会导致状态的改变，但反过来讲就是不对的。如果你需要在state值改变时进行一些操作，请使用componentWillUpdate这个方法。

Updating: shouldComponentUpdate

---

当组件接收到新的props或者state，在重新渲染之前会调用这个方法，然后根据返回值（true或者false来决定是否进行重新渲染）。这个方法在首次渲染的时候是不调用的或者在forceUpdate的时候是不会被调用的。
这个方法默认返回true，但是如果你确认新的props和state不需要引起组件更新的情况下可以让它返回false值。
如果shouldComponentUpdate返回false，那么便会完全跳过之后的render直到下一次state的改变。除此之外componentWillUpdate和componentDidUpdate方法也不会被调用。
默认情况下， shouldComponentUpdate总是返回true来避免当state为mutated的时候导致的微妙的bug，但是如果你小心地总是将state作为不可变数据，那么你可以重写 shouldComponentUpdate方法来根据新旧props和state的对比来确定返回true或者是false。
如果在组件数目庞大的情况下遇到性能瓶颈，那么在这个方法里做一些优化来加速你的app。

Updating: componentWillUpdate

---

当组件接收到新的props或者state，在重新渲染之前会调用这个方法。 这个方法在首次渲染的时候是不调用的或者在forceUpdate的时候是不会被调用的。

注意：这个方法里不能调用this.setState()。

Updating: componentDidUpdate

---

这个方法在组件更新并且重新刷新DOM之后被调用。 在首次渲染的时候是不调用的或者在forceUpdate的时候是不会被调用的。
这个方法提供了组件更新后操作DOM节点的机会。

Unmounting: componentWillUnmount

---

在组件从DOM中卸载之后被立即调用。
你可以在这个方法做一些必要的清除工作，比如一些计时器或者清除一些在componentDidMount方法中添加的一些DOM元素。