React中渲染与useEffect执行间隙能否触发点击事件？

答案是可以的，具体原因和验证方式如下：

• 先明确React的执行顺序：当点击companyB触发组件重渲染后，React会同步完成DOM更新（也就是Child组件重渲染完成），此时浏览器会优先处理用户的交互事件，再执行useEffect的回调，这中间存在可操作的间隙。
• 重渲染完成但useEffect未执行时，list依然是之前的[{id: 'companyA1'}]，所以companyA1按钮还在页面上。此时点击该按钮，handleClick函数里的company是更新后的companyB（组件已完成重渲染，函数闭包拿到了最新props），而item.id是companyA1，控制台会输出companyB companyA1。

你可以给代码加一句日志验证这个顺序：

function Child({ company }) {
  const [list, setList] = useState([]);

  useEffect(() => {
    console.log('useEffect 开始执行'); // 添加这句日志
    setList([]);
    setTimeout(() => {
      setList([{ id: company + "1" }]);
    }, 500);
  }, [company]);

  const handleClick = (company, item) => {
    console.log(company, item.id);
  };

  return (
    <div style={{ marginTop: "16px" }}>
      {list.map((item) => (
        <button key={item.id} onClick={() => handleClick(company, item)}>{item.id}</button>
      ))}
    </div>
  );
}

点击companyB后立刻点companyA1，会看到控制台先输出companyB companyA1，再输出useEffect 开始执行，直接证明这个间隙的可操作性。

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