如果不指定依赖项，useEffect() 有什么意义

Question

useEffect我在一个功能组件中使用反应钩子，并且想知道当你不指定依赖项时它的用途是什么。我知道它用于副作用的文档状态，但我的问题是为什么这些副作用不能只在功能组件内使用纯 JS 运行？作为一个非常基本的示例，我正在使用以下代码：import {useEffect, useState} from 'react'function Child () {  const [clickCount, updateCount] = useState(0)  console.log('Run outside of useEffect')  useEffect(()=>{    console.log("Run inside of useEffect")  })  return (    <button onClick = {() => updateCount(clickCount+1)}> Child COmponent </button>  )}export default Child正如您所期望的那样，它基本上只是一个普通的 JS 函数，在每次由单击按钮引起的重新渲染时，console.log都会执行这两个函数。useEffect我理解为什么您可能想在如下情况下使用，您只想useEffect在特定更改时运行：import {useEffect, useState} from 'react'function Child () {  const [clickCount, updateCount] = useState(0)  console.log('Run outside of useEffect')  //this now only runs when `someVariable` changes  useEffect(()=>{        console.log("Run inside of useEffect")  }, [someVariable])  return (    <button onClick = {() => updateCount(clickCount+1)}> Child COmponent </button>  )}export default ChilduseEffect但这引出了一个问题，除非您将依赖矩阵指定为第二个参数，否则using 有什么意义？副作用不能只使用普通 JS 正常运行吗？

Answer 1

从文档：

预定的效果useEffect不会阻止浏览器更新屏幕。这会让您的应用感觉响应更快。大多数效果不需要同步发生。

钩子内的代码useEffect在 DOM 更新后运行。这就是区别。

例子：

function App() {

  let [hi, setHi] = React.useState(false);

  let [inEffect, setInEffect] = React.useState(true);

  let msg = inEffect ? "useEffect (DOM will be updated immediately)" : "functional component (it will block DOM update)";

  

  return (

    <React.Fragment>

      <p>

        Long-running code is in {msg} {" "}

        <button onClick={() => (setInEffect(!inEffect), setHi(false))}>switch</button>

      </p>

      <button onClick={() => setHi(true)}>Say Hi</button>

      { hi ? <Hi {...{inEffect}}/> : null }

    </React.Fragment>

  );

}

function Hi({inEffect}) {

  !inEffect && block();

  React.useEffect(() => inEffect && block());

  return <h1>Hi!</h1>

}

function block(time = 2000) {

  const now = Date.now();

  while(now + time > Date.now());

}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

除非您将依赖矩阵指定为第二个参数，否则使用 useEffect 有什么意义？

指定依赖数组是一种优化，如果某些值在组件的不同渲染之间没有改变，则告诉 React 跳过执行效果。

副作用不能只使用普通 JS 正常运行吗？

与钩子内部的效果相比，在功能组件内部的顶层执行的效果以不同的方式执行useEffect。

当效果在useEffect:

• 它们在浏览器绘制屏幕后执行，即在 React 将更改应用到 DOM 后。

• 在再次运行效果之前，useEffect可以运行清理功能，如果提供了清理功能。

• 指定依赖数组将允许您在每次重新渲染组件后跳过运行效果。

• 省略数组可能会导致无限重新渲染。

由于上述几点，您总是希望在钩子内部执行副作用useEffect。

就功能组件中顶层代码的效果而言，考虑以下几点：

• 将在用户看到屏幕上的任何内容之前执行效果，即效果将在 React 更新 DOM 之前执行。

• 在再次运行效果之前，您将没有可以执行的清理机制。