reactjs - 如果我在 React 的 useEffect 第二个参数中添加多个依赖项怎么办？

Question

例如，如果我将useEffect钩子设为useEffect(() => {...},[a,b]). useEffect如果 [a,b] 之一发生变化或两个 [a,b] 都发生变化，会被解雇吗？

标签： reactjsreact-hooks

Answer 1

当其中任何一个发生变化时，它将触发。思考它的方式是你告诉 React：

a并且b是我在这个效果中使用的东西，所以如果它们中的任何一个发生变化，我的效果将需要清理旧版本并使用更新的值重新执行。

这是一个简单的示例，可让您查看行为：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [dependency1, setDependency1] = useState(1);
  const [dependency2, setDependency2] = useState(1);
  useEffect(
    () => {
      console.log("only dependency1", dependency1, dependency2);
    },
    [dependency1]
  );
  useEffect(
    () => {
      console.log("dependency1 and dependency2", dependency1, dependency2);
    },
    [dependency1, dependency2]
  );
  return (
    <div className="App">
      <button
        onClick={() => {
          setDependency1(prev => prev + 1);
        }}
      >
        Change dependency1
      </button>
      <button
        onClick={() => {
          setDependency2(prev => prev + 1);
        }}
      >
        Change dependency2
      </button>
      <button
        onClick={() => {
          setDependency1(prev => prev + 1);
          setDependency2(prev => prev + 1);
        }}
      >
        Change both
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);