React State 和 Context API：管理组件状态和共享数据的关键技术

一、State
State 是每个 React 组件都拥有的一个私有属性，用于保存组件的状态信息。这些状态信息可以在任何时间点被更新并触发相应的 UI 更新。当组件的状态发生改变时，React 会自动重新渲染组件以反映新的状态。
要设置或更新 State，你需要在组件中定义一个 setState() 方法，它用于更改组件的状态值。当你调用这个方法时，React 将知道需要重新渲染组件以反映新的状态。
例如，你可能会有一个列表组件，它需要跟踪列表项目的数量。你可以通过定义一个 State 属性来实现这一点：

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsCount: 0,
    };
  }

  addItem() {
    // 更新状态以添加一个新的项目
    this.setState({
      itemsCount: this.state.itemsCount + 1,
    });
  }

  render() {
    return (
      

        
There are {this.state.itemsCount} items in the list.
        Add item
      
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这个例子中，List 组件有一个 itemsCount State 属性，用于跟踪列表中的物品数量。每当用户单击 “Add item” 按钮时，就会调用 addItem() 方法，从而触发 setState() 调用以增加 itemsCount 的值。这就是 State 工作的方式，当组件的状态发生改变时，React 自动重新渲染组件以反映出最新的状态信息。
二、上下文 API
在 React 中，有时候我们可能需要在多个层级之间共享一些数据。为此，我们可以使用上下文 API，这是一种特殊的组件类型，可以让子组件更容易地访问到 React 应用的全局数据。上下文 API 的基本思想是在组件树中提供了一种简单的方式来跨多级组件共享数据，而不需要手动通过 props 来传递数据。这样就可以使得你的组件树更加清晰和容易维护。

一，上下文 API 工作原理

Context API 是一种特殊的 React 组件层级间通信方式，它允许将一些值传遍整个应用的所有后代组件，而无需手动地一层一层地传递它们。这种技术可以在任何地方改变应用程序的状态，即使是在很深的组件层次结构之中，也可以轻松地访问这些状态。
上下文的工作原理很简单，就是在某个特定的地方创建一个 context 对象，并将其作为某个 component tree 中所有组件的默认值，就像这样：

const MyContext = React.createContext(defaultValue);
1

一旦你创造了上下文，你可以使用 Provider 组件将其设置到应用的任何地方，然后在其子孙组件中通过 Consumer 访问这些值：

<MyContext.Provider value={value}>
  {/* 子孙组件 */}
</MyContext.Provider>

<MyContext.Consumer>
  {(value) => (
    <p>{value}</p>
  )}
</MyContext.Consumer>
1
2
3
4
5
6
7
8
9

在上述示例中，我们首先在根组件里设置了一个 value 值，然后在 Consumer 内部渲染这个 value。这样，在 {value} 下面的所有子孙组件都可以访问到这个 value 值了。
此外，上下文 API 还提供了一些额外的功能，如订阅变化和深度优先遍历等。例如，如果你想要监听页面中的变化并做相应处理，你可以使用 Consumer 实现这一点：

<MyContext.Consumer>
  {(value, setContextValue) => (
    <button onClick={() => setContextValue(newValue)}>
      Change Value
    </button>
  )}
</MyContext.Consumer>
1
2
3
4
5
6
7

这样，当按钮被点击时，将触发 setContextValue 函数，并在所有使用了这个上下文的组件中更新对应的 value 值。
总的来说，上下文 API 提供了一种简单的方式来管理和共享数据，而且它还具有较高的性能优势，因为它只需要在单个组件上进行重新渲染，而不是在整个组件树上重新渲染。因此，如果正确使用，上下文 API 可以大大减少你的应用的复杂性，提升代码质量和用户体验。

二、Context API
State 虽然强大，但有时候也会遇到一些限制，比如无法在组件树中传递数据。这时候，我们可以考虑使用 Context API。
Context API 是 React 中的一种高级特性，它允许我们将某些数据在整个应用或者某个组件树中进行全局共享。有了 Context API，我们可以避免重复地传递 prop，从而简化组件结构。
Context API 的使用方式如下：

1. 创建一个 context 对象：

const MyContext = React.createContext();
1

2. 将 context 对象包裹在 Provider 组件中，将要共享的数据作为 value 属性传入：

<MyContext.Provider value={{ data }}>
  {/* 组件树 */}
</MyContext.Provider>
1
2
3

3. 在需要使用共享数据的地方，使用 Consumer 组件去消费数据：

<MyContext.Consumer>
  {(value) => (
    <p>{value.data}</p>
  )}
</MyContext.Consumer>
1
2
3
4
5

在以上的例子中，我们创建了一个名为 MyContext 的 context 对象，然后将它包裹在 Provider 组件中，将要共享的数据作为 value 属性传入。在需要使用共享数据的地方，我们使用 Consumer 组件去消费数据，将它包在箭头函数中，通过 value 参数拿到共享的数据。

三、总结

总的来说，State 和 Context API 是 React 中非常重要的两种机制，它们分别用来存储和管理组件的状态信息，以及在整个应用中传递和共享数据。掌握这两种机制，可以让我们的 React 应用更加高效和简洁。