useEffect无限循环

84 阅读1分钟

useEffect无限循环

基本类型、组件状态(useState)可以放到依赖里,但是对象、数组、函数等引用类型不可以放到依赖里。

setNum 执行使组件重新渲染,一来的dep对象与之前的dep对象引用改变,导致重新执行副作用,导致了无限循环。

<div id="app"></div>
<script type="text/babel">
  const { useEffect, useMemo, useState } = React;
  function App () {
    const [num, setNum] = useState(0)
    // let dep = { name: 'jack' } // 无限循环
    // let dep = [] // 无限循环
    let dep = 0 // 不无限循环
    useEffect(() => {
      console.log('App useEffect')
      setNum(num + 1)
    }, [dep])
    return <div>
    </div>
  }

  ReactDOM.render(<App />, document.getElementById('app'))

</script>