React：巧用 State 和 setState

前端

2023-10-07 10:56:45

引言

React 的 State 是一个强大的工具，允许组件管理内部数据并随着时间的推移更新 UI。理解如何有效地使用 State 和 setState() 函数对于构建响应式且可维护的 React 应用程序至关重要。

State：组件的内部状态

State 代表组件的内部、私有数据，可用于跟踪 UI 的动态方面，例如表单输入、加载状态或任何随着用户交互而变化的信息。

setState()：更新 State 的安全方法

直接修改 State 可能会导致意外的行为和错误。相反，应始终使用 setState() 函数来更新 State。setState() 会计划一个更新，并在下一个渲染周期中安全地应用它。

State 与 Props

虽然 State 和 Props 都是组件的数据源，但它们有不同的作用：

Props： 组件外部传递的只读数据，用于初始化 State 和影响 UI。
State： 组件内部管理的可变数据，用于跟踪 UI 的动态方面。

State 生命周期

State 的生命周期遵循特定的模式：

构造函数：这是唯一可以给 this.state 赋值的地方。
组件挂载：State 初始化并用于渲染初始 UI。
组件更新：当调用 setState() 时，State 更新计划并且会在下一个渲染周期中应用。
组件卸载：当组件卸载时，State 被销毁。

使用 State 的最佳实践

避免直接修改 State。
使用 setState() 来更新 State。
仅将必要的数据保存在 State 中。
考虑使用 Redux 等状态管理库来管理大型或复杂的 State。

示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}