如果不指定依赖项，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但这引出了一个问题，除非您将依赖矩阵指定为第二个参数，否则使用的意义何在？副作用不能用普通的 JS 正常运行吗？

Answer 1

来自文档：

\n

\n

使用useEffectdon\xe2\x80\x99t 安排的效果会阻止浏览器更新屏幕。这会让您的应用感觉响应更快。大多数效果不需要同步发生。

\n

\n

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

\n

例子：

\n

\r\n

\r\n

function App() {\n\n  let [hi, setHi] = React.useState(false);\n  let [inEffect, setInEffect] = React.useState(true);\n  let msg = inEffect ? "useEffect (DOM will be updated immediately)" : "functional component (it will block DOM update)";\n  \n  return (\n    <React.Fragment>\n      <p>\n        Long-running code is in {msg} {" "}\n        <button onClick={() => (setInEffect(!inEffect), setHi(false))}>switch</button>\n      </p>\n      <button onClick={() => setHi(true)}>Say Hi</button>\n      { hi ? <Hi {...{inEffect}}/> : null }\n    </React.Fragment>\n  );\n}\n\nfunction Hi({inEffect}) {\n  !inEffect && block();\n  React.useEffect(() => inEffect && block());\n  return <h1>Hi!</h1>\n}\n\nfunction block(time = 2000) {\n  const now = Date.now();\n  while(now + time > Date.now());\n}\n\n\nReactDOM.render(<App/>, document.getElementById("root"));

\r\n

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

\r\n

\r\n

\r\n

\n