如果不指定依赖项，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 Child

useEffect但这引出了一个问题，除非您将依赖矩阵指定为第二个参数，否则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 之前执行。在再次运行效果之前，您将没有可以执行的清理机制。