背景
- 在列表里,选中某几条数据,然后弹窗,查询这几条数据相关的信息,并且在弹窗中,涉及数据的查询等操作。
- 此处,弹窗是封装的一个子组件,我将选中项的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