在很长一段时间内,生命周期函数componentWillReceiveProps是响应Props变化之后进行更新的唯一方式。
react计划17.0删除掉componentWIllMount,componentWillReceiveProps和componentWillUpdate。从此以后,只有新的“ UNSAFE_”生命周期名称有效。
将项目中用到的componenetWillReceiveProps替换到getDerivedStateFromProps也是要进行中的事。先放下原先的方法代码:
class Index extends React.Component { constructor(props) { super(props); this.state = { userList: [], editInfo: { name: "", parentId: null, managerId: "", id: "" } }; } componentWillReceiveProps(nextProps) { if (this.props.editInfo.id !== nextProps.editInfo.id) { this.props.form.setFieldsValue({name:nextProps.editInfo.name,'user':nextProps.editInfo.managerId}) } } }
官方更新文档中说:“与componentDidUpdate一起,此新生命周期(getDerivedStateFromProps)应涵盖旧有componentWillReceiveProps的所有用例。”
getDerivedStateFromProps中可以获取到更新的props,但是直接替换过来,this.props访问出错。只能修改state,而componenetDidUpdate可以监控修改前的state。我在此处又比较了一番,然后在通过this.props修改form表单。代码如下:
static getDerivedStateFromProps(props, state) { if (props.editInfo.id !== state.editInfo.id) { return { editInfo: props.editInfo }; } return null; } componentDidUpdate(prevProps, prevState) { if (this.state.editInfo.id !== prevState.editInfo.id) { this.props.form.setFieldsValue({ name: this.state.editInfo.name, user: this.state.editInfo.managerId }); } }
但是!较旧的componentWillReceiveProps还是新的getDerivedStateFromProps都增加了组件的复杂性,通常会导致一些意料之外的bug。
https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
这个文档对于这两个生命周期方法有更多的思考,可以参考。