搞定 React 状态和函数爆炸问题<#

2024-02-21 23:54:05

<#title>搞定 React 状态和函数爆炸问题<#/title>

React 的 Function Component 确实比 Class Component 更加方便，模糊了生命周期的概念，也没有很多令人上头的 UNSAFE 方法。但 Functional Component 也有一个问题，那就是 useState 和 useEffect 的使用很容易导致代码爆炸。

因为 useState 是一个函数，每当组件的状态发生变化时，都会重新执行。useEffect 也是一个函数，每当组件渲染时，都会执行一次。这就会导致代码的重复。

举个例子，我们有一个组件，它需要在每次渲染时都从服务器获取数据。我们可以使用以下代码来实现：

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

  useEffect(() => {
    fetch('https://example.com/data.json')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};

这段代码的问题在于，useEffect 函数每次都会执行。即使 data 已经存在，它仍然会重新获取数据。这就会导致不必要的网络请求，并降低性能。

为了解决这个问题，我们可以使用一个自定义 hook 来提取重复的逻辑。自定义 hook 是一个函数，它可以被其他组件重用。我们可以在自定义 hook 中使用 memo 来缓存数据，这样就只需要在数据发生变化时才重新获取数据。

import { useState, useEffect } from 'react';

const useData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/data.json')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return data;
};

const MyComponent = () => {
  const data = useData();

  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
};