reactjs - React，如果多个效果 setState 一个值会发生什么？

Question

执行以下操作是否安全？

const [foo, setFoo] = useState(undefined)

useEffect(() => {
  dispatch(someFunc()).then(response => {
    let { someFoo } = response
    setFoo(someFoo)
  })
}, []) // or  }, [bar])

useEffect(() => {
  dispatch(anotherFunc()).then(response => {
    let { anotherFoo } = response
    setFoo(anotherFoo)
  })
}, [bar])

Answer 1

效果按给定的顺序执行，只有最后一个效果 setter 中的“foo”才会在 UI 中可见。例如，以下组件将输出 bar - 1:

const Component = ({ bar }) => {
  const [foo, setFoo] = useState(undefined);
  console.log("render", bar, foo);

  useEffect(() => {
    console.log("effect 1");
    let someFoo = bar + 1;
    setFoo(someFoo);
  }, [bar]);

  useEffect(() => {
    console.log("effect 2");
    let anotherFoo = bar - 1;
    setFoo(anotherFoo);
  }, [bar]);

  return (
    <div>
      {bar} sets {foo}
    </div>
  );
};

https://codesandbox.io/s/proud-leaf-g55n9?file=/src/App.js:76-482
编辑:如果使用 [] 作为依赖数组，它只会执行一次。如果有 异步 效果内的函数，如 获取 , 以最后执行的 setFoo 为准。以下示例将在每次点击时显示随机结果:

  useEffect(() => {
    if (disabled) {
      const random = 500 * Math.random();
      const handle = setTimeout(() => {
        setFoo(1);
      }, random);

      return () => clearTimeout(handle);
    }
  }, [disabled]);

  useEffect(() => {
    if (disabled) {
      const random = 500 * Math.random();
      const handle = setTimeout(() => {
        setFoo(2);
      }, random);

      return () => clearTimeout(handle);
    }
  }, [disabled]);

示例 2:
https://codesandbox.io/s/jovial-architecture-0ybcz?file=/src/App.js