如何在 ReactJS 中将状态提升两个级别？

在 ReactJS 中，状态提升是指将状态从组件中移动到其父组件或更高级别的组件中。只要父组件和子组件之间有共享状态的需要，状态提升就是一种很有用的重构技巧。在某些情况下，你也可以将状态提升更高级别的组件中来进行管理。本文将介绍如何在 ReactJS 中将状态提升两个级别。

如何知道状态需要被提升？

在 ReactJS 中，状态应该被尽可能的本地化，只有当子组件需要共享状态时才考虑提升状态。如果两个或多个组件共享某个状态，那么该状态应该提升到它们的最近公共父组件中。

如何进行状态提升？

要将状态提升两个级别，你需要通过将状态随着层次向上移动几次来消除嵌套关系。一般来说，你需要创建一个存储状态的顶层组件或根组件，并将它们传递给它们的子组件作为 props 属性。这些子组件可以通过 props 访问这些共享状态，并且当它们修改共享状态时，它们需要调用存储状态的顶层组件中的回调函数。

代码实现

下面是一个简单的例子，演示如何将状态提升一个级别：

// 子组件
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.props.onButtonClick();
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.props.label}
      </button>
    );
  }
}

// 父组件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  }
  
  render() {
    return (
      <div>
        <Child onButtonClick={this.handleButtonClick} label={`Clicked ${this.state.count} times`} />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

在这个例子中，Parent 组件存储了一个 count 状态，并将它作为 props 属性传递给 Child 组件。Child 组件通过调用 onButtonClick 回调函数来修改它。

这个例子演示了如何将状态从子组件 Child 中提升到最近的父组件 Parent 中。如果你需要将状态提升更高的级别，只需要在 Parent 组件中再创建一个子组件，并将状态传递给它。

结论

状态提升是 ReactJS 中非常有用的一种重构技巧，它可以大大简化 React 组件之间的通信和状态管理。在 ReactJS 中，你可以将状态提升到任何级别，只要它可以被子组件共享和访问。