react代码执行两次问题?

下面的段代码

import React, { useState, useEffect } from "react"
import ReactDOM from "react-dom"
import "./index.css"

const useUpdate = (fn, dep) => {
  console.log('here')
  const [count, setCount] = useState(0)

  useEffect(() => {
    setCount(x => x+1)  // 删掉这行就不会两次执行
  }, [dep])

  useEffect(() => {
    if(count > 1) {
      fn()
    }
  }, [count])
}

const App = () => {
  const [n, setN] = useState(0)
  const add = () => {
    setN(n + 1)
  }

  console.log('app')

  useUpdate(() => console.log('n changed'), n)
  return (
    <div>
      {n}
      <button onClick={add}>+1</button>
    </div>
  )
}

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

我尝试着用useEffect实现componentDidUpdate,但是运行之后在没点击按钮的情况下,组件App和自定义hook useUpdate执行了两次:
image.png

我没有用StrictMode,但如果我删掉这行setCount(x => x+1),就不会两次执行,为什么呢?是不是自定义Hook内部定义的State改变了也会触发使用Hook的组件重新渲染?

阅读 240
评论
    2 个回答

    因为组件挂载后会执行 setCount(x => x+1),它会更新 state 造成整个 AppuseUpdate 函数再次重新执行,所以一共执行了 2 次