React中useEffect钩子内无法向数组push新元素的问题

• 执行顺序不符合预期：React 函数组件的固定执行流程为「执行组件函数体内的所有同步代码 → 渲染DOM节点 → 执行 useEffect 回调函数」。你写在组件顶层的console.log(arr)会在 useEffect 回调运行前就执行，此时还没有调用arr.push('test')，所以打印结果是空数组。
• 普通变量无法触发组件重渲染：你声明的arr是组件内部的普通局部变量，没有通过 React 的 useState 等状态API声明，React 不会监听它的变更。就算后续 useEffect 执行修改了 arr 的值，也不会触发组件重新渲染，组件函数不会再次执行，你既看不到更新后的打印结果，页面也不会渲染出新增的<span>元素。

如果需要修改数组后能触发重渲染，拿到符合预期的结果，需要用 useState 声明数组状态：

import { useEffect, useState } from 'react'

export default function App() {
  const [arr, setArr] = useState([])

  useEffect(() => {
    // 不可直接修改原状态，要返回新的数组引用触发更新
    setArr(prev => [...prev, 'test'])
  }, [])

  console.log(arr)
  return (
    <div className="App">
        {arr.map((i, index) => <span key={index}>{i}</span>)}
    </div>
  );
}

这个写法下，修改状态会触发组件重渲染，console.log 会先后打印空数组和['test']，页面也会正常渲染出对应的内容。

内容的提问来源于stack exchange，提问作者Asking