Day6:浅谈useState

「目标」: 持续输出！每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。

Day6-今日话题

谈谈react hooks中的useState ，将从以下七个角度介绍：

1. 用法
2. 参数
3. 返回值
4. 作用
5. 工作原理
6. 优缺点
7. 注意点

用法

useState 是一个函数，它接受一个初始状态值作为参数，并返回一个包含当前状态值和状态更新函数的数组。通常，你可以使用数组解构赋值来获取这两个值。

const [state, setState] = useState(initialState);

参数

initialState（初始状态）：这是状态的初始值。它可以是任何 JavaScript 数据类型，包括基本数据类型（如字符串、数字、布尔值）或复杂数据类型（如对象、数组）。

返回值

useState 返回一个包含「两个元素」的数组：

• state：这是当前的状态值。它在组件渲染时保持不变，直到你调用状态更新函数来修改它。

• setState：这是一个函数，用于更新状态。当你调用 setState 函数时，React 会重新渲染组件，并且将新的状态值传递给组件。setState 函数「可以接受新的状态值作为参数，也可以接受一个函数」，该函数接收当前状态值作为参数并返回新的状态值。这允许你基于先前的状态进行更新，而不会丢失任何先前的状态。

作用

主要作用就是在函数式组件中管理组件的状态。通过使用useState，可以在函数式组件中创建、读取和更新状态。

工作原理

1. 「初始化状态：」 当你在函数式组件中使用 useState 时，它会返回一个包含当前状态值和状态更新函数的数组，通常使用数组解构赋值来获取这两个值。

2. 「状态更新：」 当你调用 setState 函数时，可以传递一个新的状态值作为参数，或者传递一个接受先前状态的函数。例如：

• 使用新状态值：

setState(newValue);

• 使用函数更新状态：

setState(prevState => {
  // 基于 prevState 计算新的状态值
  return newState;
});

无论是哪种方式，React 都会将新的状态值存储在内部，但不会立即应用于组件。

3. 「批处理和合并更新：」 React 会对多个 setState 调用进行批处理，将它们合并成一个单一的更新操作。这是为了提高性能并减少不必要的重新渲染。如果多个 setState 调用试图更新相同的状态属性，React 会确保它们被合并成一个更新，以确保最终状态是一致的。

4. 「触发重新渲染：」 在下一个渲染周期（通常是浏览器的下一帧）之前，React 会安排一个重新渲染操作，将新的状态应用到组件中。这个重新渲染操作会引发组件的 render 函数重新执行，以便更新组件的视图。

5. 「生命周期和副作用：」 在组件的生命周期方法（如 render、useEffect）或副作用钩子中，你可以访问最新的状态值。这些方法会在状态更新后被调用，允许你执行与状态变化相关的操作。

优缺点

优点：

「简单易用」： useState 是一种非常简单的状态管理工具，易于学习和使用，尤其适用于函数式组件。不需要理解类组件中的 this.setState 和生命周期方法。

「无副作用」： useState 是纯粹的函数，不引入任何副作用。它仅仅是一个函数，接受一个初始状态值作为参数，返回一个包含当前状态和状态更新函数的数组。

「函数式编程」： useState 鼓励使用函数式编程的方式来管理状态。你可以使用函数作为参数，以基于先前的状态值计算新状态值，有助于避免一些常见的状态更新问题。

「多状态管理」： 你可以在同一个函数式组件中多次使用 useState，创建多个独立的状态变量，而不需要使用类组件中的 this.state。

「性能优化」： React 使用一些内部机制来优化 useState 的性能，包括状态的批处理和异步更新。这有助于提高组件的性能。

「适应性强」： useState 适用于各种情况，从简单的状态管理到复杂的状态逻辑。它可以与其他 React Hook 和生命周期钩子一起使用，以满足不同的需求。

「可读性」： 在函数式组件中使用 useState 可以提高代码的可读性和可维护性，因为它让状态管理更加直观和简单。

「未来发展」： 随着 React 不断演进，函数式组件和 Hook 的使用将更加广泛，而 useState 是其中的核心之一，因此它将继续得到支持和改进。

缺点

「仅适用于函数式组件」： useState 只能在函数式组件中使用，无法用于类组件。如果你的应用程序中存在大量的类组件，你可能需要同时学习和使用两种不同的状态管理方式。

「局部状态」： useState 创建的状态是局部的，只能在组件内部使用。如果你需要将状态共享给多个组件，可能需要将状态提升到更高层次的组件或使用全局状态管理工具（如 Redux）。

「复杂状态逻辑」： 对于复杂的状态逻辑，useState 可能会导致组件内部状态的复杂化，使组件变得难以维护。在这种情况下，useReducer 或其他状态管理工具可能更适合。

「限制性能优化」： useState 的异步更新机制可以帮助提高性能，但有时候也可能导致不必要的重新渲染。对于一些特定情况，你可能需要手动优化以避免性能问题。

「无法处理复杂的全局状态」： 对于大型应用程序中的复杂全局状态管理，useState 可能不足以胜任，你可能需要引入更强大的全局状态管理库，如 Redux 或 Mobx。

「学习曲线」： 尽管 useState 相对简单，但对于初学者来说，理解 React Hook 的概念和用法可能会带来一些学习曲线。

「迁移成本」： 如果你的应用程序之前使用类组件进行状态管理，迁移到函数式组件和 useState 可能需要一定的迁移成本。

注意点

在使用 useState 进行状态管理时，有一些注意点和最佳实践，以确保代码的可读性、性能和可维护性。以下是一些使用 useState 的注意点：

1. 「初始状态值：」 在使用 useState 时，务必提供一个合适的初始状态值作为参数。这个初始值应该与你的组件的初始状态相关。如果你的初始状态依赖于外部数据（例如 props），可以使用 props 作为初始值。示例：

const [count, setCount] = useState(props.initialCount);

2. 「多个状态变量：」 如果你的组件有多个状态变量，应该为每个状态变量使用单独的 useState。这有助于保持代码的清晰性和可维护性。不要尝试将多个状态变量合并到一个对象中，除非确实需要管理它们的联合状态。

const [count, setCount] = useState(0);
const [name, setName] = useState('');

3. 「状态更新函数：」 使用 useState 返回的状态更新函数来更新状态，而不要直接修改状态变量。React 依赖于这些函数来进行批处理和合并状态更新，直接修改状态变量可能导致不一致的行为。

// 正确方式
setCount(count + 1);

// 错误方式
// count = count + 1;

4. 「函数方式更新状态：」 如果新状态值依赖于先前的状态，可以使用函数方式来更新状态。这可以确保状态更新是基于最新的状态值计算的。

setCount(prevCount => prevCount + 1);

5. 「性能优化：」 在需要频繁更新状态的情况下，考虑使用 useMemo 或 useCallback 进行性能优化，以避免不必要的重新渲染。这可以帮助提高应用程序的性能。

6. 「副作用处理：」 如果在状态更新后需要执行副作用操作，可以使用 useEffect 钩子。确保在 useEffect 中正确地处理副作用，并根据需要清理副作用。

7. 「可维护性：」 如果状态管理变得复杂，考虑使用状态容器库（如 Redux 或 Mobx）来更好地组织和管理状态。不要让组件的状态过于分散和复杂。

8. 「命名约定：」 使用有意义的变量名来命名状态和状态更新函数，以增加代码的可读性。

const [isLoading, setIsLoading] = useState(false);

9. 「组件拆分：」 如果一个组件的状态变得过于复杂，可以考虑将其拆分成多个小组件，每个组件管理自己的状态。这有助于提高组件的可维护性和复用性。

10. 「遵循 React 的规则：」 遵循 React 的规则和最佳实践，例如避免在 render 方法中触发副作用，以及理解 React 的生命周期和渲染过程。

---

欢迎点赞、关注、转发～

本文由 mdnice 多平台发布