javascript - React - getDerivedStateFromProps 是否需要返回所有状态属性？

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 is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.

示例

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>