为什么 React hooks 以这种方式命名为 useXXX?

had*_*lah 6 reactjs react-hooks

我一直想知道 React hooks 的命名。例如 useEffect,它的名称如何暗示类似 componentDidUpdate 或 componentDidMount 之类的东西,它相当于什么?而我们在组件加载后执行的这些操作不是副作用,而是主应用程序流程的一部分,那么为什么这些被称为副作用呢?

Dre*_*ese 5

\n

为什么 React hooks 以这种方式命名为 useXXX?

\n
\n\n

来自 hooks 文档,使用自定义 Hook

\n\n
\n

我是否必须以 \xe2\x80\x9cuse\xe2\x80\x9d 开头命名我的自定义 Hook?请这样做。这个约定非常重要。如果没有它,我们就无法自动检查是否违反了 Hooks 规则,因为我们无法判断某个函数是否包含对 Hooks 的调用。

\n
\n\n

use前缀并不表示特定的功能,只是表示它是 React 已建立的命名约定的 React hook。这类似于使用withXXXX前缀的 HOC 命名约定。

\n\n
\n

为什么这些被称为副作用?

\n
\n\n

钩子useEffect用于在满足特定条件时触发效果,在本例中,当更新其依赖项数组中的值时。它是基于类的组件的生命周期函数的同义词,最常见的两个是componentDidMountcomponentDidUpdate

\n\n

React 状态模型被认为是使用纯函数来更新状态,即setState/ useState/etc 接受输入,不会改变它们,而是返回一个对象,而其他函数,例如useEffect不直接改变并返回对象,但可以发出其他效果,例如调用异步API端点等。

\n\n

使用数组的超级简单示例

\n\n
    \n
  • array::map是一个纯函数,它迭代数组,将每个元素映射到新值,并返回一个新数组。无副作用。(redux减速器通过返回下一个状态值来类似)
  • \n
  • array::forEach是一个纯函数,它迭代数组,为每个元素调用副作用回调,然后返回undefined。副作用。(调用API,通常没有返回值,但会在其他地方触发更新)
  • \n
\n