乐趣区

关于javascript:使用React-Hooks-时要避免的5个错误

jiezi

作者：Shadeed
译者：前端小智
起源：dmitripavlutin

点赞再看 ，微信搜寻【大迁世界】,B 站关注【前端小智】 这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

很有可能你曾经读过很多对于如何应用 React Hook 的文章。但有时候，晓得何时不应用与晓得如何应用同样重要。

在这篇文章中，次要介绍一下 React hooks 谬误应用形式，以及如何解决它们。

  • 不要更改 Hook 调用程序
  • 不要应用过期状态
  • 不要创立过期的闭包
  • 不要将状态用于根底构造数据
  • 不要遗记清理副作用

1. 不要更改 Hook 调用程序

在写这篇文章的前几天，我编写了一个通过 id 获取游戏信息的组件，上面是一个简略的版本 FetchGame：

function FetchGame({id}) {if (!id) {return 'Please select a game to fetch';}

  const [game, setGame] = useState({ 
    name: '',
    description: '' 
  });

  useEffect(() => {const fetchGame = async () => {const response = await fetch(`/api/game/${id}`);
      const fetchedGame = await response.json();
      setGame(fetchedGame);
    };
    fetchGame();}, [id]);

  return (<div> <div>Name: {game.name}</div> <div>Description: {game.description}</div> </div>
  );

组件 FetchGame 接管 id（即要获取的游戏的 ID）。useEffect() 在await fetch(/game/${id}) 提取游戏信息并将其保留到状态变量 game 中。

关上演示(https://codesandbox.io/s/hook…。组件正确地执行获取操作，并应用获取的数据更新状态。然而看看 tab Eslint 正告: 有 Hook 执行程序不正确的问题。

问题产生在这一判断：

function FetchGame({id}) {if (!id) {return 'Please select a game to fetch';}  
   // ...
}

当 id 为空时，组件渲染 'Please select a game to fetch' 并退出，不调用任何 Hook。

然而，如果 id不为空（例如等于 ’1’），则会调用 useState() 和 useEffect()。

有条件地执行 Hook 可能会导致难以调试的意外谬误。React Hook 的外部工作形式要求组件在渲染之间总是以雷同的顺序调用 Hook。

这正是钩子的第一条规定: 不要在循环、条件或嵌套函数内调用 Hook。

解决办法就是将条件判断放到 Hook 前面：

function FetchGame({id}) {const [game, setGame] = useState({ 
    name: '',
    description: '' 
  });

  useEffect(() => {const fetchGame = async () => {const response = await fetch(`/api/game/${id}`);
      const fetchedGame = await response.json();
      setGame(fetchedGame);
    };
 if (id) {fetchGame();     }  }, [id]);

 if (!id) {return 'Please select a game to fetch';}
  return (
    <div>
 <div>Name: {game.name}</div>
 <div>Description: {game.description}</div>
 </div>
  );
}

当初，无论 id 是否为空，useState()和useEffect() 总是以雷同的程序被调用，这就是 Hook 应该始终被调用的形式。

2. 不要应用过期状态

上面的组件 MyIncreaser 在单击按钮时减少状态变量count:

function MyIncreaser() {const [count, setCount] = useState(0);

  const increase = useCallback(() => {setCount(count + 1);
  }, [count]);

  const handleClick = () {increase(); increase(); increase();  };

  return (
    <>
 <button onClick={handleClick}>Increase</button>
 <div>Counter: {count}</div>
 </>
  );
}

这里乏味一点的是，handleClick调用了 3 次状态更新。

当初，在关上演示之前，问一个问题：如果单击一次按钮，计数器是否减少3？

关上演示（https://codesandbox.io/s/stal…），点击按钮一次，看看后果。

不好意思，即便在 handleClick() 中 3 次调用了increase()，计数也只减少了1。

问题在于 setCount(count + 1) 状态更新器。当按钮被点击时，React 调用setCount(count + 1) 3 次

 const handleClick = () {increase();
    increase();
    increase();};

// 等价:

  const handleClick = () {setCount(count + 1);
    // count variable is now stale
    setCount(count + 1);
    setCount(count + 1);
  };

setCount(count + 1)的第一次调用正确地将计数器更新为 count + 1 = 0 + 1 = 1。然而，接下来的两次setCount(count + 1) 调用也将计数设置为 1，因为它们应用了过期的stale 状态。

通过应用函数形式更新状态来解决过期的状态。咱们用 setCount(count => count + 1) 代替setCount(count + 1)：

function MyIncreaser() {const [count, setCount] = useState(0);

  const increase = useCallback(() => {setCount(count => count + 1);  }, []);

  const handleClick = () {increase();
    increase();
    increase();};

  return (
    <>
 <button onClick={handleClick}>Increase</button>
 <div>Counter: {count}</div>
 </>
  );
}

这里有一个好规定能够防止遇到过期的变量：

如果你应用以后状态来计算下一个状态，总是应用函数形式来更新状态:setValue(prevValue => prevValue + someResult)。

3. 不要创立过期的闭包

React Hook 很大程序上依赖于闭包的概念。依赖闭包是它们如此富裕表现力的起因。

JavaScript 中的闭包是从其词法作用域捕捉变量的函数。不论闭包在哪里执行，它总是能够从定义它的中央拜访变量。

当应用 Hook 承受回调作为参数时(如useEffect(callback, deps)，useCallback(callback, deps))，你可能会创立一个过期的闭包，一个捕捉了过期的状态或变量的闭包。

咱们来看看一个应用useEffect(callback, deps) 而遗记正确设置依赖关系时创立的过期闭包的例子。

在组件 <WatchCount> 中，useEffect()每 2 秒打印一次 count 的值

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

  useEffect(function() {setInterval(function log() {console.log(`Count is: ${count}`);
    }, 2000);
  }, []);

  const handleClick = () => setCount(count => count + 1);

  return (<> <button onClick={handleClick}>Increase</button> <div>Counter: {count}</div> </>
  );
}

关上演示 (https://codesandbox.io/s/stal…，点击按钮。在控制台查看，每 2 秒打印的都 是 Count is: 0,，不论count 状态变量的理论值是多少。

为啥这样子？

第一次渲染时，log 函数捕捉到的 count 的值为 0。

之后，当按钮被单击并且 count 减少时，setInterval取到的 count 值依然是从初始渲染中捕捉 count 为 0 的值。log 函数是一个过期的闭包，因为它捕捉了一个过期的状态变量count。

解决方案是让 useEffect() 晓得闭包 log 依赖于count，并正确重置计时器

function WatchCount() {const [count, setCount] = useState(0);

  useEffect(function() {const id = setInterval(function log() {console.log(`Count is: ${count}`);
    }, 2000);
 return () => clearInterval(id); }, [count]);
  const handleClick = () => setCount(count => count + 1);

  return (
    <>
 <button onClick={handleClick}>Increase</button>
 <div>Counter: {count}</div>
 </>
  );
}

正确设置依赖关系后，一旦 count 发生变化，useEffect()就会更新 setInterval() 的闭包。

为了避免闭包捕捉旧值：确保提供给 Hook 的回调函数中应用依赖项。

4. 不要将状态用于根底构造数据

有一次，我须要在状态更新上调用副作用，在第一个渲染不必调用副作用。 useEffect(callback, deps)总是在挂载组件后调用回调函数: 所以我想防止这种状况。

我找到了以下的解决方案

function MyComponent() {const [isFirst, setIsFirst] = useState(true);
  const [count, setCount] = useState(0);

  useEffect(() => {if (isFirst) {setIsFirst(false);
      return;
    }
    console.log('The counter increased!');
  }, [count]);

  return (<button onClick={() => setCount(count => count + 1)}> Increase </button>
  );
}

状态变量 isFirst 用来判断是否是第一次渲染。一旦更新setIsFirst(false)，就会呈现另一个平白无故的从新渲染。

放弃 count 状态是有意义的，因为界面须要渲染 count 的值。然而，isFirst不能间接用于计算输入。

是否为第一个渲染的信息不应存储在该状态中。根底构造数据，例如无关渲染周期（即首次渲染，渲染数量），计时器 ID（setTimeout()，setInterval()），对 DOM 元素的间接援用等详细信息，应应用援用 useRef() 进行存储和更新。

咱们将无关首次渲染的信息存储到 Ref 中：

 const isFirstRef = useRef(true);  const [count, setCount] = useState(0);

  useEffect(() => {if (isFirstRef.current) {
      isFirstRef.current = false;
      return;
    }
    console.log('The counter increased!');
  }, [count]);

  return (<button onClick={() => setCounter(count => count + 1)}>
 Increase
 </button>
  );
}

isFirstRef是一个援用，用于保留是否为组件的第一个渲染的信息。isFirstRef.current属性用于拜访和更新援用的值。

重要阐明：更新参考 isFirstRef.current = false 不会触发从新渲染。

5. 不要遗记清理副作用

很多副作用，比方获取申请或应用 setTimeout() 这样的计时器，都是异步的。

如果组件卸载或不再须要该副作用的后果，请不要遗记清理该副作用。

上面的组件有一个按钮。当按钮被点击时，计数器每秒钟提早减少1：

function DelayedIncreaser() {const [count, setCount] = useState(0);
  const [increase, setShouldIncrease] = useState(false);

  useEffect(() => {if (increase) {setInterval(() => {setCount(count => count + 1)
      }, 1000);
    }
  }, [increase]);

  return (<> <button onClick={() => setShouldIncrease(true)}> Start increasing </button> <div>Count: {count}</div> </>
  );
}

关上演示（https://codesandbox.io/s/unmo…），点击开始按钮。正如预期的那样，状态变量 count 每秒钟都会减少。

在进行递增操作时，单击umount 按钮，卸载组件。React 会在控制台中正告更新卸载组件的状态。

修复 DelayedIncreaser 很简略：只需从 useEffect() 的回调中返回革除函数：

 // ...

  useEffect(() => {if (increase) {const id = setInterval(() => {setCount(count => count + 1)
      }, 1000);
 return () => clearInterval(id);    }
  }, [increase]);

  // ...
}

也就是说，每次编写副作用代码时，都要问本人它是否应该清理。计时器，频繁申请(如上传文件)，sockets 简直总是须要清理。

6. 总结

从 React 钩子开始的最好办法是学习如何应用它们。

但你也会遇到这样的状况: 你无奈了解为什么他们的行为与你预期的不同。晓得如何应用 React Hook 还不够: 你还应该晓得何时不应用它们。

首先不要做的是有条件地渲染 Hook 或扭转 Hook 调用的程序。无论 Props 或状态值是什么，React 都冀望组件总是以雷同的顺序调用 Hook。

要防止的第二件事是应用过期的状态值。要防止过期 状态，请应用函数形式更新状态。

不要遗记指出承受回调函数作为参数的 Hook 的依赖关系: 例如useEffect(callback, deps)， useCallback(callback, deps), 这能够解决过期闭包问题。

不要将根底构造数据（例如无关组件渲染周期，setTimeout()或setInterval()）存储到状态中。教训法令是将此类数据保留在 Ref 中。

最初，别忘了革除你的副作用。

~ 完，我是小智，我要去刷碗了。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dmitripavlutin.com/re…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版