问反应:成分功能的副作用与效应的区别？

EN

从useEffect钩子发出的副作用的好处是每个呈现周期最多触发一次。这里的呈现周期意味着当React计算下一个视图并将其提交到DOM时，即“提交阶段”。

当呈现出组件(以及子组件和整个ReactTree)以计算更改的内容并需要提交到DOM时，不应将此与React称为“呈现阶段”混淆。

​

​

React函数组件的整个函数体是--“呈现”函数。正如您在图表中所看到的，在render或主体中任何无意的副作用都将在“呈现阶段”中发生，这些副作用可以通过React暂停、中止或重新启动(即再次运行)。请注意，“呈现阶段”是纯的，没有副作用。

组件的“提交阶段”可以使用DOM并运行副作用。

这有什么关系？如何区分。？

实际上，使用一个帮助您检测意外副作用的组件来响应。

检测意外副作用

严格模式不能自动为您检测副作用，但它可以帮助您通过使其更具确定性来识别它们。这是通过有意地双重调用以下函数来实现的：

• 类组件constructor、render和shouldComponentUpdate方法
• 类构件静态getDerivedStateFromProps方法
• 功能构件体
• 状态更新函数(setState的第一个参数)
• 传递给useState、useMemo或useReducer的函数

下面是一个沙箱演示示例，它演示了意外的副作用。

​

​

注意，意外的效果是加倍的。

​

​

代码：

const externalValue1 = { count: 0 };
const externalValue2 = { count: 0 };

function EffectVsFunctionQuestion() {
  const [state, setState] = React.useState(0);

  React.useEffect(() => {
    externalValue1.count++;
    console.log("incremented within hook", externalValue1.count);
  });
  externalValue2.count++;
  console.log("incremented within component function", externalValue2.count);

  return (
    <button type="button" onClick={() => setState((c) => c + 1)}>
      Render
    </button>
  );
}