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

编辑:如果使用 [] 作为依赖数组，它只会执行一次。如果效果中有async函数，例如fetch，则以最后执行的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