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

【问题标题】：Difference between with and without useEffect in react functional component反应功能组件中使用和不使用useEffect的区别
【发布时间】：2020-10-20 12:42:22
【问题描述】：

我有一个反应功能组件，我想在每个渲染中运行一些代码。你知道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>
  )
}

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

【问题讨论】：

这能回答你的问题吗？ React useEffect in depth / use of useEffect?

标签： javascript reactjs

【解决方案1】：

useEffect 回调执行 after the render phase 这是两者的主要区别。

看下一个例子：

// 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 <></>;
};

Read more here

【讨论】：

【解决方案2】：

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

useEffect 还有多种其他用途，例如在状态变化时做某事等。

【讨论】：

【解决方案3】：

useEffect 可以有 2 个参数，第一个是函数，第二个是数组。

一旦组件被挂载，该函数就会被调用，但是 useEffect 的扩展特性是它有一个敏感列表，它允许它在第二个数组中的任何参数发生变化的情况下再次运行。也让它成为 componentDidUpdate。

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

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

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

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' 发生变化，它会停止询问前一个并开始每秒询问新的 'someOne'。

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

【讨论】：

不完全是 useEffect 接受 2 个参数它也接受 one argument ，我知道第二个参数是做什么的，我的问题不是这个
没错，我忘记写了。谢谢你的来信。

【解决方案4】：

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

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

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

Detecting unexpected side effects

【讨论】：