反应功能组件中使用和不使用useEffect的区别

Question

我有一个反应功能组件，我想在每次渲染中运行一些代码。 您知道每次渲染时都会运行没有依赖数组的useEffect钩子。

这是代码

function Component({a, b}){

useEffect(()=>{
  console.log('component rerenderd')
  // some code here
})

 return(
  <div>
    Some content
  </div>
  )
}

另一方面，没有 useEffect 做同样的事情

function Component2({a, b}){

  console.log('component rerenderd')
  // some code here

 return(
  <div>
    Some content
  </div>
  )
}

我的问题是它们两者之间有什么区别？

Answer 1

在渲染阶段之后执行的useEffect回调，这是两者之间的主要区别。

请参见下一个示例：

// Log order:
// "executed at render phase"
// "executed after render phase"

const App = () => {
  useEffect(() => {
    console.log("executed after render phase");
  });

  console.log("executed at render phase");

  return <></>;
};

Answer 2

在第二种情况下，您在返回 JSX 之前进行日志记录。 当您使用第一个片段时，传递给useEffect的回调中的代码会在组件呈现后运行。

使用useEffect还有多种其他用途，例如在 state 发生变化时做某事等。

Answer 3

功能组件的整个 function 主体基本上是“渲染” function，因此每次渲染组件时都会调用其中的任何内容，这发生在“渲染阶段”，可以在 React 计算时暂停、中止或重新启动差异。

useEffect挂钩的回调保证在每个渲染周期只被调用一次，即它更类似于componentDidMount 、 componentDidUpdate和componentWillUnmount生命周期函数。 请注意，这些发生在“提交阶段”，这意味着 DOM 已经被区分并且反应正在提交/刷新对 DOM 的 UI 更改。

尝试使用 react 的严格模式渲染你的组件，你肯定会看到不同。

检测意外的副作用

Answer 4

useEffect 可以取 2 个 arguments，第一个是 function，第二个是数组。

function 一旦组件被安装就会被调用，但是 useEffect 的扩展特性是它有一个敏感列表，如果第二个数组中的任何参数发生变化，它可以再次运行。 也使它成为 componentDidUpdate 。

但是没有 useEffect 的 console.log() 会按照它的运行方式运行。 你无法控制它。 这是一个简单的例子：

useEffect(() => {
  console.log('count=', count);
}, [count]); // Only re-run the effect if count changes

它还有一个 cleanUp 方法，你可以（例如）写一个时间间隔，当组件被卸载时它可以被清除。 您可以在 useEffect 中添加一个名为“return”的 function 并完成！

let timer;

useEffect(()=>{
  timer = setInterval(() => console.log('hello!'), 1000);
  return()=>clearImmediate(timer);
})

现在，当组件卸载时，间隔会被清除。

现在如果我们在数组中传递一些东西让 useEffect 监听它们的变化，当 useEffect 再次使用新值运行时，组件将执行 cleanUp 方法。

这是一个例子：

let timer;

useEffect(()=>{
  timer = setInterval(() => console.log('do you need something Mr./Mrs. ' + someOne + ' ?'), 1000);
  return()=>clearImmediate(timer);
},[someOne]);

我们制作了一个计时器，每秒询问某人是否需要某些东西。 现在，如果“someOne”发生变化，它会停止询问前一个并开始每秒询问新的“someOne”。

顺便说一句，您可以将 function 命名为“返回”任何您想要的东西，或者您可以只传递一个箭头 function。