Question

在React组件中使用getDerivedStateFromProps生命周期方法时，返回的状态会完全覆盖组件的现有状态，还是仅更新返回的特定状态属性？例如，

class foo extends Component {
  constructor() {
    this.state = {
      one: true,
      two: false,
    }
  }

  getDerivedStateFromProps(props, state) {
    ...
    return {
      one: false,
    }
  }

  ...  
}

状态将为：

{ one: false }

或

{
  one: false,
  two: false,
}

？

Answer 1

它将更新您返回的对象中存在的状态，并使其他状态保持不变as it is stated in the documentation：

getDerivedStateFromProps在调用渲染之前被调用初始安装和后续更新上的方法。这应该返回一个对象以更新状态，或者返回null则不更新任何内容。

示例

class App extends React.Component {
  state = { one: 1 };

  static getDerivedStateFromProps() {
    return { two: 2 };
  }

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

反应-getDerivedStateFromProps是否需要返回所有状态属性？

1 个答案: