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>