赵走x博客 - 开发者的网上家园

12、组件：生命周期方法

资源编号:76060 书籍 React快速上手开发热度：88

setState(obj) 会把属性和当前的this.state 进行合并，而replaceState() 则会完全重写所有状态。

上述代码片段用到的componentWillReceiveProps() 方法是React 提供的所谓生命周期方法之一。你可以使用生命周期方法监听组件的改变。除此之外，你可以实现的其他生命周期方法还包括以下几个。

*  componentWillUpdate()
当你的组件再次渲染时，在render() 方法前调用（在组件的props 或者state 发生改变时会触发该方法）。
*  componentDidUpdate()
在render() 函数执行完毕，且更新的组件已被同步到DOM 后立即调用。该方法不会在初始化渲染时触发。
*  componentWillMount()
在新节点插入DOM 结构之前触发。
*  componentDidMount()
在新节点插入DOM 结构之后触发。
*  componentWillUnmount()
在组件从DOM 中移除时立刻触发。
*  shouldComponentUpdate(newProps, newState)
这个方法在componentWillUpdate() 之前触发，给你一个机会返回false 以取消更新组件，这意味着render() 方法将不会被调用。这在性能关键型的应用场景中非常有用。当你认为变更的内容没什么特别或者没有重新渲染的需要时，可以实现该方法。要决定是否更新，只需比较newState 参数和目前的状态this.state 的区别，以及newProps 参数和目前的属性this.props 的区别。当然，也可直接认为该组件是静态的而无需更新。
（随后你会见到相关例子。）

### 生命周期示例：输出日志记录
为了更好地理解组件的生命周期，我们基于TextAreaCounter 组件添加一些日志记录。我们简单地实现所有的生命周期方法，并且在这些方法被调用时，输出其自身的方法名和参数到控制台中：
```
 var TextAreaCounter=React.createClass({
        _log:function(methodName,args){
            console.log(methodName,args);
        },
        componentWillUpdate:function(){
          this._log('componentWillUpdate',arguments)
        },
        componentDidUpdate:function(){
          this._log('componentDidUpdate',arguments)
        },
        componentWillMount:function(){
          this._log('componentWillMount',arguments)
        },
        componentDidMount:function(){
          this._log('componentDidMount',arguments)
        },
        componentWillUnmount:function(){
          this._log('componentWillUnmount',arguments)
        },
        propTypes:{
          text:React.PropTypes.string,
        },
        getDefaultProps:function(){
            return{
                text:''
            }
        },
        getInitialState:function(){
          return{
              text:this.props.text
          }
        },
        _textChange:function(ev){
          this.setState({
              text:ev.target.value
          })
        },
        render:function () {
            return React.DOM.div(null,
                React.DOM.textarea({value:this.state.text,onChange:this._textChange}),
                React.DOM.h3(null,this.state.text.length)
            )
        }
    });
```
图2-10 显示了页面加载完成后的结果。
![bs64](https://img.handsomemark.com/2019/11/09/125a0aea-02ab-11ea-8571-0242ac140002.png)
图2-10：加载组件

如你所见，有两个方法被调用了，但是没有携带任何参数。componentDidMount() 方法是两者中较为有意思的一个。如果需要， 你可以在这个方法中通过ReactDOM.findDOMNode(this) 方法访问刚加载好的DOM 节点，比如获取组件元素的尺寸大小。由于此时组件已经渲染，你可以进行各种初始化工作。

接下来，假如你在文本框末尾多输入一个s，使文本变成Bobs，会发生什么事情呢？（如图2-11 所示。）

![bs64](https://img.handsomemark.com/2019/11/09/23ae97a2-02ab-11ea-aba9-0242ac140002.png)
图2-11：更新组件

componentWillUpdate(nextProps, nextState) 方法被调用了，新的数据将会被用于重新渲染组件。第一个参数是this.props 的新值（在这个例子中没有发生变化）。第二个参数是this.state 的新值。第三个参数是context，目前我们并不关心这个参数。你可以通过比较参数（比如newProps）和目前的值this.props 来决定是否需要进行操作。

在componentWillUpdate() 方法执行后，componentDidUpdate(oldProps, oldState) 方法被调用，它接收的两个参数分别是原本的props 和state。这个方法让你有机会在组件改变之后进行操作。你可以在该方法中执行this.setState()，但你在componentWillUpdate()中可不能这么做。

假设你想要限制文本框中输入的字符数， 应该在用户输入时调用的事件处理器_textChange() 中进行限制。但如果有人（假设是个比你更天真的年轻人）试图从外部调用setState() 方法呢？（之前我们提到过，这是一种不好的做法。）你能否继续维持组件的正常状态呢？答案是肯定的。你可以在componentDidUpdate() 方法中验证字符长度是否大于允许值；如果大于，就把state 恢复到之前的状态。就像这样：
```
componentDidUpdate: function(oldProps, oldState) {
	if (this.state.text.length > 3) {
		this.replaceState(oldState);
	}
},
```
虽然这有点杞人忧天，但确实是一种可行的方案。

注意这里使用了replaceState() 代替setState()。setState(obj) 会把属性和当前的this.state 进行合并，而replaceState() 则会完全重写所有状态。