React hooks:什么/为什么`useEffect`? [英] React hooks: What/Why `useEffect`?

问题描述

关于新提出的React Effect Hook;

1. Effect 钩子 (useEffect()) 的优点和用例是什么?

1. What are the advantages and use cases of the Effect hook (useEffect())?

为什么会更好 &它与 componentDidMount/componentDidUpdate/componentWillUnmount(性能/可读性)有何不同?

Why would it be preferable & how does it differ over componentDidMount/componentDidUpdate/componentWillUnmount (performance/readability)?

文档指出:

在函数组件的主体(称为 React 的渲染阶段)中不允许发生变异、订阅、计时器、日志记录和其他副作用.

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase).

但我认为在诸如 componentDidUpdate 等生命周期方法中而不是在 render 方法中使用这些行为已经是常识.

but I think it was already common knowledge to have these behaviors in lifecycle methods like componentDidUpdate, etc. instead of the render method.

还提到:

传递给 useEffect 的函数将在渲染提交到屏幕后运行.

The function passed to useEffect will run after the render is committed to the screen.

但这不是componentDidMount &componentDidUpdate 无论如何?

but isn't that what componentDidMount & componentDidUpdate do anyways?

推荐答案

Effect 钩子 (useEffect()) 的优点和用例是什么?

What are the advantages and use cases of the Effect hook (useEffect())?

优势

首先，钩子通常可以提取和重用多个组件中通用的有状态逻辑，而无需承担高阶组件或渲染道具的负担.

Advantages

Primarily, hooks in general enable the extraction and reuse of stateful logic that is common across multiple components without the burden of higher order components or render props.

第二个好处(特别是 Effect 钩子)是避免在 componentDidUpdate 中没有正确处理依赖状态的副作用时可能出现的错误(因为 Effect 钩子确保这些副作用在每次渲染时设置和拆除).

A secondary benefit (of Effect hooks in particular) is the avoidance of bugs that might otherwise arise if state-dependent side effects are not properly handled within componentDidUpdate (since Effect hooks ensure that such side effects are setup and torn-down on every render).

另请参阅下文详述的性能和可读性优势.

See also the peformance and readability benefits detailed below.

 

任何使用生命周期方法实现有状态逻辑的组件——Effect 钩子是一种更好的方法".

Any component that implements stateful logic using lifecycle methods—the Effect hook is a "Better Way".

 

为什么会更好 &它与 componentDidMount/componentDidUpdate/componentWillUnmount(性能/可读性)有何不同?

Why would it be preferable & how does it differ over componentDidMount/componentDidUpdate/componentWillUnmount (performance/readability)?

为什么更可取

因为上面和下面详述的优点.

Why it's preferable

Because of the advantages detailed above and below.

 

效果钩子——

• 感觉比生命周期方法更具响应性，因为它们不会阻止浏览器更新屏幕；
• 然而，每次渲染都会设置和拆除副作用，这可能会很昂贵…
• …so 可以优化为完全跳过，除非特定状态已更新.

 

效果钩子导致:

• 更简单且更易于维护的组件，因为能够将以前必须在同一组生命周期方法中表达的不相关行为拆分为每个此类行为的单个钩子 - 例如:

• simpler and more maintainable components, owing to an ability to split unrelated behaviour that previously had to be expressed across the same set of lifecycle methods into a single hook for each such behaviour—for example:

componentDidMount() {
  prepareBehaviourOne();
  prepareBehaviourTwo();
}

componentDidUnmount() {
  releaseBehaviourOne();
  releaseBehaviourTwo();
}

变成:

useEffect(() => {
  prepareBehaviourOne();
  return releaseBehaviourOne;
});

useEffect(() => {
  prepareBehaviourTwo();
  return releaseBehaviourTwo;
});

请注意，与 BehaviourOne 相关的代码现在与与 BehaviourTwo 相关的代码明显分开，而之前它在每个生命周期方法中都混合在一起.

Notice that code relating to BehaviourOne is now distinctly separated from that relating to BehaviourTwo, whereas before it was intermingled within each lifecycle method.

更少的样板，因为无需在多个生命周期方法中重复相同的代码(例如在 componentDidMount 和 componentDidUpdate 之间很常见)—例如:

less boilerplate, owing to an elimination of any need to repeat the same code across multiple lifecycle methods (such as is common between componentDidMount and componentDidUpdate)—for example:

componentDidMount() {
  doStuff();
}

componentDidUpdate() {
  doStuff();
}

变成:

useEffect(doStuff); // you'll probably use an arrow function in reality

这篇关于React hooks:什么/为什么`useEffect`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！