React状态管理|青训营笔记

THIM
75 阅读3分钟

本篇文章讲述了什么是状态管理，什么是React状态管理，React状态管理方式有哪些，以及针对组件自身状态进行了演示和讲解，可以根据目录查看你需要的

疑问

什么是状态管理？

  • 状态管理是指在应用程序中跟踪和管理状态的过程
  • 在前端开发中，状态通常是指用户界面的数据，例如表单输入、选中的复选框、页面的显示和隐藏等等
  • 通常包括一个状态容器，一个更新状态的机制和一组规则来确保状态的一致性和正确性

什么是React状态管理？

  • React 状态管理通常指的是管理 React 组件中的状态
  • 在 React 中，每个组件都有自己的状态（state），当状态发生变化时，组件会重新渲染

React状态管理方式有哪些？

  • 使用组件自身的状态（State）React 组件可以通过 state 属性来维护自己的状态。当状态变化时，组件会重新渲染
  • 使用 ReduxRedux 是一个状态管理库，它可以帮助我们管理整个应用的状态,Redux 将应用的状态存储在一个全局的 store 中，组件可以从 store 中读取状态，并且通过 action 触发状态的变化
  • 使用 MobxMobx 是另一个状态管理库，它采用观察者模式来管理状态。当状态发生变化时，所有依赖该状态的组件都会自动更新
  • 使用 React Context APIReact Context API 是 React 提供的一种跨层级组件通信的方式。通过 Context，我们可以在组件树中传递数据，避免了通过 props 层层传递数据的麻烦

使用

使用组件自身的状态（State）

  • 在组件的构造函数中初始化状态：
constructor(props) {
  super(props);
  this.state = {
    count: 0
  };
}
  • 在组件中使用状态：
render() {
  return (
    <div>
      <p>Count: {this.state.count}</p>
      <button 
      onClick={() => this.setState(
      { count: this.state.count + 1 }
      )}>
        Click me
      </button>
    </div>
  );
}
  1. 在组件的 render 方法中使用了组件自身的状态count
  2. 通过 setState 方法来更新状态
  • 需要注意：
  1. 不要直接修改 state 对象，应该使用 setState 方法来更新状态
  2. 在组件中使用的状态必须在组件的构造函数中初始化，否则会出现 undefined 或 null 的错误
  3. 在 render 方法中使用的状态应该是只读的，不能直接修改
  4. 在更新状态时，应该使用函数式的 setState 方法，这可以确保状态更新的正确性
  5. 组件的状态应该尽可能地保持简单和小型，如果状态过于复杂，应该考虑使用状态管理库来管理状态
高级的例子
import React from "react";

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      isLoading: false,
      error: null
    };
  }
  • 导入 React
  • 创建一个名为 UserList 的类组件
  • 在组件的构造函数中，我们初始化组件的状态
  • 组件的状态包括三个属性：users、isLoading 和 error
  componentDidMount() {
    this.setState({ isLoading: true });
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data =>
        this.setState({
          users: data,
          isLoading: false
        })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }
  • 在组件的 componentDidMount 生命周期方法中，我们使用 fetch 方法从 API 中获取用户数据
  • 将 isLoading 属性设置为 true，表示数据正在加载中
  • 使用 fetch 方法发送一个 HTTP 请求，获取 API 的响应
  • 响应成功后，将 JSON 数据解析为一个数组，并将其存储到 users 属性中,将 isLoading 属性设置为 false
  • 在获取数据时发生错误，我们将 error 属性设置为错误对象，并将 isLoading 属性设置为 false

render() {
  const { users, isLoading, error } = this.state;
  if (error) {
    return <p>{error.message}</p>;
  }
  if (isLoading) {
    return <p>Loading...</p>;
  }
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}
}

export default UserList;
  • 将状态中的属性解构赋值为变量
  • 如果 error 属性存在，说明在获取数据时发生了错误
  • 如果 isLoading 属性为 true，说明数据正在加载中
  • 数据已经加载完成，我们将用户列表渲染为一个包含 ul 和 li 元素的列表
avatar
文章
阅读
粉丝