两个常用生命周期函数总结

之前在使用生命周期函数处理一些值时踩过一些坑，最常用的就是componentDidMount以及
componentWillReceiveProps。

componentDidMount：组件挂载到DOM后调用，且只会被调用一次。一般在这个方法中发送请求等操作(防止异步操作阻塞UI)，也可以使用this.setState()，它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前，如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。但是注意由于只调用一次，父组件引用子组件并进行传值时，在子组件componentDidMount里面多次更新数据是不会导致子组件重新render的（我初学react就是踩过这样的坑）。那如果父组件通过props传值后要保证子组件重新render的话，就要通过componentWillReceiveProps了。

componentWillReceiveProps：

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。根据官网的描述：

在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染。

是因为componentWillReceiveProps中判断props是否变化了，若变化了，this.setState将引起state变化，从而引起render，此时就没必要再做第二次因重传props引起的render了，不然重复做一样的渲染了。

componentWillReceiveProps(nextProps) {
	if (nextProps.number!== this.props.number) {
		console.log("新的值：",nextProps.number)
	}
}

---

还有一种方法也能在子组件componentDIdMount里面拿到最新的数据，那就是通过变量来控制子组件的创建与销毁，一旦不使用就立即销毁，这样一来每次创建都是新的，componentDidMount都会重新调用一次。
如下面用对话框Modal（antd组件）示例，通过addVisible控制。

<Modal
	title="新增"
	visible={this.state.addVisible}
	onCancel={this.modalCancel.bind(this)}
	footer={null}
	width='80%'
	className='ywgl-global'
>
	{
		this.state.addVisible ? (<Child />) : null
	}
 </Modal>