小白学习 react hook 遇到的坑?

Question

直接上图吧 我设置了一个定时器 为什么会重复打印?

如何消除这个 bug 尝试过 useMemo 没有成功...

Answer 1

详细的原因可以看下我的这个回答，结论就是要想能终止更新，最终要上dispatchAction里面传入的action能和前一轮的更新的state是能严格相等的(也就是Object.is)
https://segmentfault.com/q/10...

Answer 2

以下方法都可以解决，根据实际需求选择

1. 一般setTimeout需要写到Effect Hook里面

useEffect(()=>{
  setTimeout(()=>{setName("alan")}, 2000)
},[])

[]确保只执行一次

2. 关于useState的严格相等的判定的解决：

   1. 不使用Object，直接setState("mike"),setName("alan")
   2. 使用useReducer代替

function reducer(state, action) {
    switch (action.type) {
      case "changeName":
        return { name: "alan" };
      default:
        return state;
    }
  const [name, setName] = useReducer(reducer, { name: "mike" });
  setTimeout(() => {
    setName({ type: "changeName" });
  }, 2000);

3. 使用immutable.js: 其他库当然也可以

Answer 3

自问自答一下 多次测试后的猜测:
因为我 setName 是一个新的 {} 所以引用了新的内存地址,换成普通类型就没问题了
react 可能认为我是一个新的变量,所以会重复渲染. 如果有大佬有更好的解释 请指教!