React基础第二十九章（精简Effect依赖）

在React中，Effect Hook是处理组件副作用的主要方式。然而，不恰当的依赖项可能会导致性能问题，甚至无限循环。本文将探讨如何审查并移除Effect中不必要的依赖，以及如何避免常见的陷阱。

理解Effect依赖

当你使用useEffect时，React要求你提供一个依赖项数组，这样React就知道何时重新运行Effect。如果Effect读取了组件的props或state中的值，这些值就应该作为依赖项。

移除不必要的依赖

有时，Effect可能并不需要对某些值的变化做出响应。这时，你可以安全地移除这些依赖项。

技巧示例代码:

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // serverUrl不是依赖项，因为它是常量
}

注意事项

避免无限循环

错误代码:

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      setData(result);
    });
  }, [data]); // 这会导致无限循环，因为data作为依赖项
}

正确代码:

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      setData(result);
    });
  }, []); // 空依赖项数组表示Effect不依赖于任何值
}

不要抑制依赖项警告

抑制React的lint规则可能会导致难以发现的bug。

错误代码:

useEffect(() => {
  // ...逻辑...
  // eslint-disable-next-line react-hooks/exhaustive-deps <-这里屏蔽了eslint警告
}, []); // 🔴 抑制依赖项警告是危险的

正确代码:

useEffect(() => {
  // ...逻辑...
}, [roomId]); // ✅ 所有必要的依赖项都已包含

通过以上的讨论和示例，我们可以看到如何有效地管理Effect依赖项，避免不必要的Effect执行，并使用React的lint规则来确保代码的健壮性。记住，Effect依赖项应该反映Effect中使用的响应式值，避免包含不变的值或在每次渲染时都会变化的对象和函数。

原文链接：https://juejin.cn/post/7343131959826710538 作者：辰火流光

React基础 第二十九章（精简Effect依赖）