6 个 React Hook 最佳实践技巧

本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。

在过去，像状态和生命周期函数这样的 React 特性只适用于基于类的组件。基于函数的组件被称为哑（dumb）、瘦（skinny）或表示（presentational）组件，因为它们无法访问状态和生命周期函数。

但是自从 React Hooks 发布以来，基于函数的组件已升格为 React 的一等公民。它使函数组件能够以新的方式编写、重用和共享 React 代码。

在这篇文章中，我将分享 6 个关于 React Hooks 的技巧。你可以把它当作一份指南，在将 Hooks 实现到组件中时可以拿来参考。

遵守 Hooks 规则

这条规则看起来是句废话，但无论是新手还是经验丰富的 React 开发人员，都常常会忘记遵循 React Hooks 的规则。这些规则包括：

不要在循环、条件和嵌套函数内调用 Hooks。当你想有条件地使用某些 Hooks 时，请在这些 Hooks 中写入条件。

不要这样做：

if (name !== '' ) {

useEffect( function persistForm () {

localStorage.setItem( 'formData' , name);

});

}

复制代码

相比之下，你应该这样做：

useEffect( function persistForm () {

if (name !== '' ) {

localStorage.setItem( 'formData' , name);

}

});

复制代码

这条规则能确保每次渲染组件时都以相同的顺序调用 Hooks。这样一来，React 就能在多个 useState 和 useEffect 调用之间正确保留 Hooks 的状态。