为什么 React 钩子以这种方式命名为 useXXX? [英] Why are React hooks named in this fashion useXXX?

问题描述

我一直想知道 React 钩子的命名.比如useEffect，这个名字怎么暗示像componentDidUpdate或者componentDidMount这样的东西，它等价于什么?而我们在组件加载后所做的这些动作不是副作用而是主要应用流程的一部分，那么为什么将这些称为副作用呢?

I have been wondering about the naming of the React hooks. For example useEffect, how does the name suggests something like componentDidUpdate or componentDidMount, which it is equivalent to? And these actions that we do after a component is loaded are not side-effects but are part of the main application flow, then why are these called side-effects?

推荐答案

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

Why are React hooks named in this fashion useXXX?

从钩子文档中，使用自定义钩子

我是否必须以use"开头来命名我的自定义 Hook?请这样做.这约定非常重要.没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 内部的调用

Do I have to name my custom Hooks starting with "use"? Please do. This convention is very important. Without it, we wouldn’t be able to automatically check for violations of rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it.

use 前缀并不表示特定的功能，只是它是 React 已建立为命名约定的反应钩子.这类似于使用 withXXXX 前缀的 HOC 命名约定.

The use prefix isn't indicating specific functionality other than that it is a react hook that React has established as a naming convention. This is similar to the HOC naming convention of using the withXXXX prefix.

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

why are these called side-effects?

useEffect 钩子用于在满足特定条件时触发效果，在这种情况下，当更新其依赖项数组中的值时.它是基于类的组件的生命周期函数的同义词，两个最常见的函数是 componentDidMount 和 componentDidUpdate.

The useEffect hook is used to trigger an effect when a certain condition it met, in this case, when a value in its dependency array is updated. It is synonymous to the class-based component's lifecycle functions, the two most common ones being componentDidMount and componentDidUpdate.

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

The react state model is thought of as using pure functions to update state, i.e. setState/useState/etc which takes inputs, doesn't mutate them but instead returns a new object, whereas other functions, like useEffect don't directly mutate and return objects, but can issue other effects, such as calling asynchronous API endpoints, etc..

一个使用数组的超级简单的例子

A super easy example using arrays

• array::map 是一个纯函数，它遍历一个数组，将每个元素映射到一个新值，并返回一个新数组.没有副作用.(redux reducer 类似，返回下一个状态值)
• array::forEach 是一个纯函数，它遍历一个数组，为每个元素调用一个副作用回调，并返回 undefined.副作用.(调用一个API，通常没有返回值，但会在别处触发更新)

• array::map is a pure function that iterates over an array, maps each element to a new value, and returns a new array. No side-effect. (A redux reducer is similar by returning the next state value)
• array::forEach is a pure function that iterates over an array, calls a side-effect callback for each element, and returns undefined. Side-effect. (Calling an API, usually no return value, but triggers an update elsewhere)

这篇关于为什么 React 钩子以这种方式命名为 useXXX?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！