简单易懂的ReactuseState()Hook指南

打开演示&＃xff0c;然后单击添加灯泡按钮&＃xff1a;灯泡数量增加&＃xff0c;单击开/关按钮可打开/关闭灯泡。

[on, setOn] &＃61; useState(false) 管理开/关状态

• [count, setCount] &＃61; useState(1)管理灯泡数量。

多个状态可以在一个组件中正确工作。

3.状态的延迟初始化

每当 React 重新渲染组件时&＃xff0c;都会执行useState(initialState)。如果初始状态是原始值&＃xff08;数字&＃xff0c;布尔值等&＃xff09;&＃xff0c;则不会有性能问题。

当初始状态需要昂贵的性能方面的操作时&＃xff0c;可以通过为useState(computeInitialState)提供一个函数来使用状态的延迟初始化&＃xff0c;如下所示&＃xff1a;

function MyComponent({ bigJsonData }) { const [value, setValue] &＃61; useState(function getInitialState() { const object &＃61; JSON.parse(bigJsonData); // expensive operation return object.initialValue;  }); // ...}

getInitialState()仅在初始渲染时执行一次&＃xff0c;以获得初始状态。在以后的组件渲染中&＃xff0c;不会再调用getInitialState()&＃xff0c;从而跳过昂贵的操作。

4. useState() 中的坑

现在咱们基本已经初步掌握了如何使用useState()&＃xff0c;尽管如此&＃xff0c;咱们必须注意在使用useState()时可能遇到的常见问题。

4.1 在哪里调用 useState()

在使用useState() Hook 时&＃xff0c;必须遵循 Hook 的规则

1. 仅顶层调用 Hook &＃xff1a;不能在循环&＃xff0c;条件&＃xff0c;嵌套函数等中调用useState()。在多个useState()调用中&＃xff0c;渲染之间的调用顺序必须相同。

2. 仅从React 函数调用 Hook:必须仅在函数组件或自定义钩子内部调用useState()。

来看看useState()的正确用法和错误用法的例子。

有效调用useState()

useState()在函数组件的顶层被正确调用

function Bulbs() { // Good const [on, setOn] &＃61; useState(false); // ...}

以相同的顺序正确地调用多个useState()调用:

function Bulbs() { // Good const [on, setOn] &＃61; useState(false); const [count, setCount] &＃61; useState(1); // ...

useState()在自定义钩子的顶层被正确调用

function toggleHook(initial) { // Good const [on, setOn] &＃61; useState(initial); return [on, () &＃61;> setOn(!on)];}function Bulbs() { const [on, toggle] &＃61; toggleHook(false); // ...}

useState() 的无效调用

在条件中调用useState()是不正确的&＃xff1a;

function Switch({ isSwitchEnabled }) { if (isSwitchEnabled) { // Bad const [on, setOn] &＃61; useState(false); } // ...}

在嵌套函数中调用useState()也是不对的

function Switch() { let on &＃61; false;  let setOn &＃61; () &＃61;> {}; function enableSwitch() { // Bad [on, setOn] &＃61; useState(false);  } return ( Enable light switch state );}

4.2 过时状态

闭包是一个从外部作用域捕获变量的函数。

闭包&＃xff08;例如事件处理程序&＃xff0c;回调&＃xff09;可能会从函数组件作用域中捕获状态变量。由于状态变量在渲染之间变化&＃xff0c;因此闭包应捕获具有最新状态值的变量。否则&＃xff0c;如果闭包捕获了过时的状态值&＃xff0c;则可能会遇到过时的状态问题。

来看看一个过时的状态是如何表现出来的。组件延迟3秒计数按钮点击的次数。

function DelayedCount() { const [count, setCount] &＃61; useState(0);
const handleClickAsync &＃61; () &＃61;> { setTimeout(function delay() { setCount(count &＃43; 1); }, 3000);  } return (

打开演示&＃xff0c;快速多次点击按钮。count 变量不能正确记录实际点击次数&＃xff0c;有些点击被吃掉。

delay() 是一个过时的闭包&＃xff0c;它从初始渲染&＃xff08;使用0初始化时&＃xff09;中捕获了过时的count变量。

为了解决这个问题&＃xff0c;使用函数方法来更新count状态&＃xff1a;

function DelayedCount() { const [count, setCount] &＃61; useState(0);
const handleClickAsync &＃61; () &＃61;> { setTimeout(function delay() { setCount(count &＃61;> count &＃43; 1); }, 3000); }
return (

现在etCount(count &＃61;> count &＃43; 1)在delay()中正确更新计数状态。React 确保将最新状态值作为参数提供给更新状态函数&＃xff0c;过时闭包的问题解决了。

打开演示&＃xff0c;快速单击按钮。延迟过去后&＃xff0c;count 能正确表示点击次数。

4.3 复杂状态管理

useState()用于管理简单状态。对于复杂的状态管理&＃xff0c;可以使用useReducer() hook。它为需要多个状态操作的状态提供了更好的支持。

假设需要编写一个最喜欢的电影列表。用户可以添加电影&＃xff0c;也可以删除已有的电影&＃xff0c;实现方式大致如下&＃xff1a;

import React, { useState } from &＃39;react&＃39;;function FavoriteMovies() {  const [movies, setMovies] &＃61; useState([{ name: &＃39;Heat&＃39; }]);  const add &＃61; movie &＃61;> setMovies([...movies, movie]); const remove &＃61; index &＃61;> { setMovies([ ...movies.slice(0, index), ...movies.slice(index &＃43; 1) ]);  } return ( // Use add(movie) and remove(index)... );}

尝试演示&＃xff1a;添加和删除自己喜欢的电影。

状态列表需要几个操作:添加和删除电影&＃xff0c;状态管理细节使组件混乱。

更好的解决方案是将复杂的状态管理提取到reducer中&＃xff1a;

import React, { useReducer } from &＃39;react&＃39;;function reducer(state, action) { switch (action.type) { case &＃39;add&＃39;: return [...state, action.item]; case &＃39;remove&＃39;: return [ ...state.slice(0, action.index), ...state.slice(action.index &＃43; 1) ]; default: throw new Error(); }}function FavoriteMovies() { const [state, dispatch] &＃61; useReducer(reducer, [{ name: &＃39;Heat&＃39; }]);
return ( // Use dispatch({ type: &＃39;add&＃39;, item: movie }) // and dispatch({ type: &＃39;remove&＃39;, index })... );}

reducer管理电影的状态&＃xff0c;有两种操作类型&＃xff1a;

• "add"将新电影插入列表

• "remove"从列表中按索引删除电影

尝试演示并注意组件功能没有改变。但是这个版本的更容易理解&＃xff0c;因为状态管理已经被提取到reducer中。

还有一个好处:可以将reducer 提取到一个单独的模块中&＃xff0c;并在其他组件中重用它。另外&＃xff0c;即使没有组件&＃xff0c;也可以对reducer 进行单元测试。

这就是关注点分离的威力:组件渲染UI并响应事件&＃xff0c;而reducer 执行状态操作。

4.4 状态 vs 引用

考虑这样一个场景:咱们想要计算组件渲染的次数。

一种简单的实现方法是初始化countRender状态&＃xff0c;并在每次渲染时更新它(使用useEffect() hook)

import React, { useState, useEffect } from &＃39;react&＃39;;function CountMyRenders() {  const [countRender, setCountRender] &＃61; useState(0); useEffect(function afterRender() { setCountRender(countRender &＃61;> countRender &＃43; 1);  }); return (

useEffect()在每次渲染后调用afterRender()回调。但是一旦countRender状态更新&＃xff0c;组件就会重新渲染。这将触发另一个状态更新和另一个重新渲染&＃xff0c;依此类推。

可变引用useRef()保存可变数据&＃xff0c;这些数据在更改时不会触发重新渲染&＃xff0c;使用可变的引用改造一下 &＃xff1a;

import React, { useRef, useEffect } from &＃39;react&＃39;;function CountMyRenders() {  const countRenderRef &＃61; useRef(1); useEffect(function afterRender() { countRenderRef.current&＃43;&＃43;;  }); return (

打开演示并单击几次按钮来触发重新渲染。

每次渲染组件时&＃xff0c;countRenderRef可变引用的值都会使countRenderRef.current &＃43;&＃43;递增。重要的是&＃xff0c;更改不会触发组件重新渲染。

5. 总结

要使函数组件有状态&＃xff0c;请在组件的函数体中调用useState()。

useState(initialState)的第一个参数是初始状态。返回的数组有两项:当前状态和状态更新函数。

const [state, setState] &＃61; useState(initialState);

使用 setState(newState)来更新状态值。另外&＃xff0c;如果需要根据先前的状态更新状态&＃xff0c;可以使用回调函数setState(prevState &＃61;> newState)。

在单个组件中可以有多个状态:调用多次useState()。

当初始状态开销很大时&＃xff0c;延迟初始化很方便。使用计算初始状态的回调调用useState(computeInitialState)&＃xff0c;并且此回调仅在初始渲染时执行一次。

必须确保使用useState()遵循 Hook 规则。

当闭包捕获过时的状态变量时&＃xff0c;就会出现过时状态的问题。可以通过使用一个回调来更新状态来解决这个问题&＃xff0c;这个回调会根据先前的状态来计算新的状态。

最后&＃xff0c;您将使用useState()来管理一个简单的状态。为了处理更复杂的状态&＃xff0c;一个更好的的选择是使用useReducer() hook。