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