React v16.3 引入了一些有趣的新功能,例如getDerivedStateFromProps 方法. 在本文中,我们将探索如何使用它。
在 React v16.3中,将getDerivedStateFromProps静态生命周期方法引入为替代componentWillReceiveProps。
就像componentWillReceiveProps一样,getDerivedStateFromProps每当一个组件收到新的补贴时都会被召唤。
配件 配件
以下是旧方法看起来是什么样子的样本:
1// For example purposes only, this is now deprecated
2
3class List extends React.Component {
4 componentWillReceiveProps(nextProps) {
5 if (nextProps.selected !== this.props.selected) {
6 this.setState({ selected: nextProps.selected });
7 this.selectNew();
8 }
9 }
10
11 // ...
12}
正如您所看到的,componentWillReceiveProps常被用来更新组件的状态,也可能有副作用,例如呼叫到this.selectNew()。
新方法运作略有不同:
1class List extends React.Component {
2 static getDerivedStateFromProps(props, state) {
3 if (props.selected !== state.selected) {
4 return {
5 selected: props.selected,
6 };
7 }
8
9 // Return null if the state hasn't changed
10 return null;
11 }
12
13 // ...
14}
相反,如在第一個例子中所說的「setState」,getDerivedStateFromProps只會返回包含更新狀態的對象,請注意該函數沒有副作用;這是故意的。
getDerivedStateFromProps 可以为单个更新进行多次调用,因此避免任何副作用很重要,相反,您应该使用componentDidUpdate,该更新仅在组件更新后执行一次。
以下是我们的最终代码:
1class List extends React.Component {
2 static getDerivedStateFromProps(props, state) {
3 if (props.selected !== state.selected) {
4 return {
5 selected: props.selected,
6 };
7 }
8
9 // Return null if the state hasn't changed
10 return null;
11 }
12
13 componentDidUpdate(prevProps, prevState) {
14 if (this.props.selected !== prevProps.selected) {
15 this.selectNew();
16 }
17 }
18
19 // ...
20}
包装上
getDerivedStateFromProps通过提供一个功能来改进旧方法,其唯一的目的是根据 prop 变化更新状态,而没有任何副作用。
然而,衍生状态会为组件增加一些复杂性,并且通常是完全不必要的。