父子组件传值以及组件的销毁

背景

• 在列表里，选中某几条数据，然后弹窗，查询这几条数据相关的信息，并且在弹窗中，涉及数据的查询等操作。
• 此处，弹窗是封装的一个子组件，我将选中项的id作为一个属性，传递给子组件
  

问题

• 第一次，点击的时候，在子组件的componentDidMount中正常获取到了ids数组；关闭子组件后，选随便选择几条数据，点击按钮，弹出弹窗，发现并不进入componentDidMount【问题一】
• 进过思考，觉得是react的生命周期问题引起的(第二章 react生命周期)，为了检验，我们引入componentWillUpdate,发现第二次，果然是进入了componentWillUpdate这个生命周期，本以为在这个周期中，再执行一次接口请求，就ok了，没想到，在关闭弹窗的时候，发现又进入了componentWillUpdate这个周期，也就是打开、关闭的时候，这个都会触发【问题二】

 componentDidMount() {
    console.log('componentDidMount', 222);
    const { dispatch,ids } = this.props;
    console.log('第一次批量删除的id',ids)
    let props = this.props;
    let pageName = (props.location && props.location.pathname) || '';
    let formValues = (props.formData && props.formData.data[pageName]) || {};
    let { expandForm } = this.state;
    this.setState({
      formValues,
      expandForm: formValues.expandForm,
    });
    const params = {
      ...formValues,
      ids:ids
    };

    dispatch({
      type: 'certify/fetch',
      payload: params,
    });
  }
  // // 第二次进来的时候
  componentWillUpdate(nextProps,nextState){
    const { dispatch,ids } = nextProps;
    console.log('第二次批量删除的id',ids)
  }

- 对于问题二，其实也不难理解，因为弹窗的关闭，也是通过一个属性字段控制的，这个字段发生改变，就会去触发子组件的重新render，就相当于update
- 为了避免事件重复请求，就自然想到，当关闭弹窗时，销毁掉子组件。

 const parentMethods = {
      title: '加入黑名单',
      record: selectedRows,
      handleCancel: this.handleModalVisible,
      handleModalVisible: this.handleModalVisible,
    };

{modalVisible?(<EditForm {...parentMethods} modalVisible={modalVisible} />):null}

总结

• 只要父组件的render函数被调用，在render函数里被渲染的子组件就会经历更新过程。
• 如果想控制一个组件的销毁问题，只需要在渲染的时候，用一个状态来控制，满足条件，就渲染，不满足条件就渲染null