记录一次React程序死循环

三、原因分析

useEffect的特性表明，只要initFiles发生了改变，46-48行代码就会执行。
既然上述useEffect代码片断事实上造成了死循环，就还说明了一点：

• setFileList(initFiles)改变了initFiles，才使得useEffect中的函数再次被调用。

那么，initFiles到底是经历了怎样的变化，才使得调用能够循环往复地发生呢？

输出fileList和initFiles：

console.log(fileList === initFiles)

可以发现，只有第一次render时输出true，后续全部是false。

• 第一次输出true，表明useState的入参为array时，只是简单的赋值关系，fileList和initFiles指定了同一个内存地址。
• setFileList函数实际上是做了一次浅拷贝，然后赋值给fileList，改变了fileList的内存指向，也就是改变了最新initFiles的内存指向。同时React保留了之前initFiles的值用来做依赖对比。
• useEffect在对比引用类型的依赖，比如object/array时，采用的是简单的===操作符，也就是说比较内存地址是否一致。
• 前后两次initFiles虽然内部数据相同，但内存指向不同，就被useEffect认为【依赖发生了改变】，从而导致了死循环。

四、解决方案1

• 尽量不直接使用object或者array作为依赖项，而是使用值类型来代替引用类型

  useEffect(() => {
  //...
  
  }, [initFiles.length])

五、解决方案2

是不是在调用useState时，拷贝initFiles就可以了呢？

const [fileList, setFileList] = useState([...initFiles])

useEffect(() => {
  if (fileList.length === 0) {
    setFileList([...initFiles])
  }
}, [initFiles])

这样依然会报同样的死循环错误，这又是为什么呢？

initFiles是从父组件传入的，会不会是FileUpload组件重新render的时候，initFiles已经被重新赋值了呢？接下来的两个demo，证明了这个推测。

• Demo1 - 慎重打开。打开后会卡死浏览器标签: initFiles初始化时，使用[]作为默认值，结果出现死循环。
• Demo1 - 放心打开。打开后不执行JS，不会卡死浏览器，可放心查看代码。
• Demo2：initFiles初始化时，不使用默认值，且父组件不更新，结果不出现死循五。

Demo1中，initFiles作为一个prop，每次render时，都会被赋值为一个新的空数组，改变了其内存指向。导致useEffect不断执行。

const FileUpload = ({initFiles=[]}) => {}

Demo2中，initFiles的值完全由父组件传入，父组件的变量不变化时，initFiles没有改变。

const FileUpload = ({initFiles=[]}) => {}
const App = () => {
  return <FileUpload initFiles={[]} />
}

也就是说，只要保障initFiles不被循环赋值，就能够避免死循环。

六、结论

不建议将引用类型如array/object作为useEffect的依赖项，因欺触发bug的可能性很大，而且排查错误比较困难。

建议使用一到多个值类型作为useEffect依赖项。

原文链接：https://segmentfault.com/a/1190000042302716