使用自定义钩子重用逻辑

自定义 Hook：在组件之间共享逻辑

🌐 Custom Hooks: Sharing logic between components

想象一下你正在开发一个严重依赖网络的应用（就像大多数应用一样）。如果用户在使用你的应用时网络连接意外断开，你想要提醒他们。你会怎么做呢？看起来你的组件需要两样东西：

🌐 Imagine you’re developing an app that heavily relies on the network (as most apps do). You want to warn the user if their network connection has accidentally gone off while they were using your app. How would you go about it? It seems like you’ll need two things in your component:

1. 跟踪网络是否在线的一种状态。
2. 一个订阅全局 online 和 offline 事件并更新该状态的 Effect。

这将使你的组件与网络状态保持同步。你可以从如下内容开始:

🌐 This will keep your component synchronized with the network status. You might start with something like this:

尝试打开和关闭你的网络，并注意这个 StatusBar 如何根据你的操作更新。

🌐 Try turning your network on and off, and notice how this StatusBar updates in response to your actions.

现在想象一下，你还想在不同的组件中使用相同的逻辑。你想实现一个保存按钮，当网络断开时，该按钮将被禁用，并显示“正在重新连接…”而不是“保存”。

🌐 Now imagine you also want to use the same logic in a different component. You want to implement a Save button that will become disabled and show “Reconnecting…” instead of “Save” while the network is off.

首先，你可以将 isOnline 状态和效果复制并粘贴到 SaveButton 中：

🌐 To start, you can copy and paste the isOnline state and the Effect into SaveButton:

验证如果你关闭网络，按钮将改变其外观。

🌐 Verify that, if you turn off the network, the button will change its appearance.

这两个组件工作得很好，但它们之间逻辑的重复是不幸的。看起来尽管它们有不同的视觉外观，你仍然想在它们之间重用逻辑。

🌐 These two components work fine, but the duplication in logic between them is unfortunate. It seems like even though they have different visual appearance, you want to reuse the logic between them.

从组件中提取你自己的自定义钩子

🌐 Extracting your own custom Hook from a component

试想一下，类似于useState和useEffect，有一个内置的useOnlineStatus Hook。那么这两个组件都可以简化，并且你可以去除它们之间的重复内容：

🌐 Imagine for a moment that, similar to useState and useEffect, there was a built-in useOnlineStatus Hook. Then both of these components could be simplified and you could remove the duplication between them:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Progress saved');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

虽然没有这样的内置 Hook，但你可以自己编写。声明一个名为 useOnlineStatus 的函数，并将之前组件中所有重复的代码移到该函数中：

🌐 Although there is no such built-in Hook, you can write it yourself. Declare a function called useOnlineStatus and move all the duplicated code into it from the components you wrote earlier:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

在函数的末尾，返回 isOnline。这让你的组件可以读取该值：

🌐 At the end of the function, return isOnline. This lets your components read that value:

确认打开和关闭网络会更新这两个组件。

🌐 Verify that switching the network on and off updates both components.

现在你的组件没有那么多重复的逻辑。更重要的是，它们内部的代码描述了它们想做什么（使用在线状态！）而不是如何去做（通过订阅浏览器事件）。

🌐 Now your components don’t have as much repetitive logic. More importantly, the code inside them describes what they want to do (use the online status!) rather than how to do it (by subscribing to the browser events).

当你将逻辑提取到自定义 Hook 中时，你可以隐藏处理某些外部系统或浏览器 API 的复杂细节。你的组件代码表达的是你的意图，而不是实现方式。

🌐 When you extract logic into custom Hooks, you can hide the gnarly details of how you deal with some external system or a browser API. The code of your components expresses your intent, not the implementation.

钩子名称总是以 use 开头

🌐 Hook names always start with use

React 应用是由组件构建的。组件是由 Hooks 构建的，无论是内置的还是自定义的。你很可能经常使用别人创建的自定义 Hooks，但偶尔你自己也可能会写一个！

🌐 React applications are built from components. Components are built from Hooks, whether built-in or custom. You’ll likely often use custom Hooks created by others, but occasionally you might write one yourself!

你必须遵循以下命名约定：

🌐 You must follow these naming conventions:

1. **React 组件的名称必须以大写字母开头，**例如 StatusBar 和 SaveButton。React 组件还需要返回 React 可以显示的内容，例如一段 JSX。
2. 钩子名称必须以 use 开头，后跟大写字母， 如 useState（内置）或 useOnlineStatus（自定义，如页面前面所示）。钩子可以返回任意值。

这个约定保证你总是可以查看一个组件并知道它的状态、Effects 以及其他 React 特性可能“隐藏”的地方。例如，如果你在组件内部看到一个 getColor() 函数调用，你可以确定它不可能包含 React 状态，因为它的名字不是以 use 开头的。然而，像 useOnlineStatus() 这样的函数调用很可能会包含对其他 Hooks 的调用！

🌐 This convention guarantees that you can always look at a component and know where its state, Effects, and other React features might “hide”. For example, if you see a getColor() function call inside your component, you can be sure that it can’t possibly contain React state inside because its name doesn’t start with use. However, a function call like useOnlineStatus() will most likely contain calls to other Hooks inside!

// 🔴 Avoid: A Hook that doesn't use Hooks
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Good: A regular function that doesn't use Hooks
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ It's ok to call getSorted() conditionally because it's not a Hook
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Good: A Hook that uses other Hooks
function useAuth() {
  return useContext(Auth);
}

// ✅ Good: A Hook that will likely use some other Hooks later
function useAuth() {
  // TODO: Replace with this line when authentication is implemented:
  // return useContext(Auth);
  return TEST_USER;
}

自定义钩子让你共享状态逻辑，而不是状态本身

🌐 Custom Hooks let you share stateful logic, not state itself

在前面的例子中，当你开关网络时，两个组件会一起更新。然而，认为一个单独的 isOnline 状态变量在它们之间共享是错误的。看看这段代码：

🌐 In the earlier example, when you turned the network on and off, both components updated together. However, it’s wrong to think that a single isOnline state variable is shared between them. Look at this code:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

它的工作方式与提取重复之前相同：

🌐 It works the same way as before you extracted the duplication:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

这是两个完全独立的状态变量和效果！它们之所以在同一时间有相同的值，是因为你用相同的外部值（无论网络是否开启）将它们同步了。

🌐 These are two completely independent state variables and Effects! They happened to have the same value at the same time because you synchronized them with the same external value (whether the network is on).

为了更好地说明这一点，我们需要一个不同的例子。考虑这个 Form 组件：

🌐 To better illustrate this, we’ll need a different example. Consider this Form component:

每个表单字段都有一些重复的逻辑：

🌐 There’s some repetitive logic for each form field:

1. 有一块状态（firstName 和 lastName）。
2. 有一个变化处理器（handleFirstNameChange 和 handleLastNameChange）。
3. 有一段 JSX 为该输入指定了 value 和 onChange 属性。

你可以将重复的逻辑提取到这个 useFormInput 自定义 Hook 中：

🌐 You can extract the repetitive logic into this useFormInput custom Hook:

注意它只声明了一个名为 value 的状态变量。

🌐 Notice that it only declares one state variable called value.

然而，Form 组件调用 useFormInput 两次：

🌐 However, the Form component calls useFormInput two times:

function Form() {
  const firstNameProps = useFormInput('Mary');
  const lastNameProps = useFormInput('Poppins');
  // ...

这就是为什么它像声明两个独立的状态变量一样工作！

🌐 This is why it works like declaring two separate state variables!

自定义 Hook 允许你共享有状态逻辑，但不共享状态本身。 对 Hook 的每次调用都是完全独立的，与对同一 Hook 的每次其他调用无关。这就是为什么上面的两个沙盒完全等价。如果你愿意，可以向上滚动比较它们。提取自定义 Hook 前后的行为是相同的。

当你需要在多个组件之间共享状态本身时，改为提升它并向下传递即可。

🌐 When you need to share the state itself between multiple components, lift it up and pass it down instead.

在钩子之间传递反应值

🌐 Passing reactive values between Hooks

你自定义 Hook 中的代码将在组件的每次重新渲染时重新运行。这就是为什么像组件一样，自定义 Hook 需要保持纯粹 的原因。把自定义 Hook 的代码当作组件主体的一部分来考虑吧！

🌐 The code inside your custom Hooks will re-run during every re-render of your component. This is why, like components, custom Hooks need to be pure. Think of custom Hooks’ code as part of your component’s body!

因为自定义 Hook 会随着你的组件一起重新渲染，它们总是接收到最新的 props 和 state。要理解这意味着什么，请考虑这个聊天室示例。更改服务器 URL 或聊天室：

🌐 Because custom Hooks re-render together with your component, they always receive the latest props and state. To see what this means, consider this chat room example. Change the server URL or the chat room:

当你更改 serverUrl 或 roomId 时，Effect 会对你的更改做出反应并重新同步。你可以从控制台消息中看出，每次更改 Effect 的依赖时，聊天都会重新连接。

🌐 When you change serverUrl or roomId, the Effect “reacts” to your changes and re-synchronizes. You can tell by the console messages that the chat re-connects every time that you change your Effect’s dependencies.

现在将副作用的代码移动到自定义钩子中：

🌐 Now move the Effect’s code into a custom Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

这使你的 ChatRoom 组件可以调用你的自定义 Hook，而不用担心它内部是如何工作的：

🌐 This lets your ChatRoom component call your custom Hook without worrying about how it works inside:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        Server URL:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>Welcome to the {roomId} room!</h1>
    </>
  );
}

这看起来简单多了！(但它做的事情是一样的。)

🌐 This looks much simpler! (But it does the same thing.)

注意，逻辑仍然会响应prop和state的变化。尝试编辑服务器URL或所选房间：

🌐 Notice that the logic still responds to prop and state changes. Try editing the server URL or the selected room:

注意你是如何获取一个钩子的返回值的：

🌐 Notice how you’re taking the return value of one Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

并将其作为输入传递给另一个 Hook：

🌐 and passing it as an input to another Hook:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

每当你的 ChatRoom 组件重新渲染时，它会将最新的 roomId 和 serverUrl 传递给你的 Hook。这就是为什么每次重新渲染后，当它们的值不同，你的 Effect 会重新连接到聊天的原因。（如果你曾经使用过音频或视频处理软件，用这种方式串联 Hooks 可能会让你想到串联视觉或音频效果。就好像 useState 的输出“输入”到了 useChatRoom 的输入。）

🌐 Every time your ChatRoom component re-renders, it passes the latest roomId and serverUrl to your Hook. This is why your Effect re-connects to the chat whenever their values are different after a re-render. (If you ever worked with audio or video processing software, chaining Hooks like this might remind you of chaining visual or audio effects. It’s as if the output of useState “feeds into” the input of the useChatRoom.)

将事件处理程序传递给自定义钩子

🌐 Passing event handlers to custom Hooks

当你开始在更多组件中使用 useChatRoom 时，你可能希望让组件自定义其行为。例如，目前消息到达时的处理逻辑是硬编码在 Hook 内部的：

🌐 As you start using useChatRoom in more components, you might want to let components customize its behavior. For example, currently, the logic for what to do when a message arrives is hardcoded inside the Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

假设你想将此逻辑移回你的组件：

🌐 Let’s say you want to move this logic back to your component:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

为了使其工作，将你的自定义 Hook 修改为将 onReceiveMessage 作为其命名选项之一：

🌐 To make this work, change your custom Hook to take onReceiveMessage as one of its named options:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}

这会起作用，但是当你的自定义钩子接受事件处理程序时，你还可以进行另一项改进。

🌐 This will work, but there’s one more improvement you can do when your custom Hook accepts event handlers.

添加对 onReceiveMessage 的依赖并不理想，因为它会导致每次组件重新渲染时聊天重新连接。将此事件处理程序封装到 Effect Event 中以将其从依赖中移除：

🌐 Adding a dependency on onReceiveMessage is not ideal because it will cause the chat to re-connect every time the component re-renders. Wrap this event handler into an Effect Event to remove it from the dependencies:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}

现在，每当 ChatRoom 组件重新渲染时，聊天不会重新连接。这里有一个完整可用的演示，展示如何将事件处理程序传递给自定义 Hook，你可以进行试用：

🌐 Now the chat won’t re-connect every time that the ChatRoom component re-renders. Here is a fully working demo of passing an event handler to a custom Hook that you can play with:

注意你现在不再需要知道 useChatRoom 是如何工作的，就能使用它。你可以将它添加到任何其他组件中，传递任何其他选项，它的工作方式都不会变。这就是自定义 Hooks 的力量。

🌐 Notice how you no longer need to know how useChatRoom works in order to use it. You could add it to any other component, pass any other options, and it would work the same way. That’s the power of custom Hooks.

何时使用自定义钩子

🌐 When to use custom Hooks

你不需要为每一小段重复的代码都提取一个自定义 Hook。有些重复是可以的。例如，像之前那样提取一个 useFormInput Hook 来封装单个 useState 调用，可能没必要。

🌐 You don’t need to extract a custom Hook for every little duplicated bit of code. Some duplication is fine. For example, extracting a useFormInput Hook to wrap a single useState call like earlier is probably unnecessary.

然而，每当你编写一个 Effect 时，请考虑是否也将其封装到自定义 Hook 中会更清晰。你不应该经常需要使用 Effects， 因此，如果你正在编写一个 Effect，这意味着你需要“跳出 React”，与某些外部系统同步，或者执行 React 没有内置 API 的操作。将其封装到自定义 Hook 中可以让你准确表达你的意图以及数据如何在其中流动。

🌐 However, whenever you write an Effect, consider whether it would be clearer to also wrap it in a custom Hook. You shouldn’t need Effects very often, so if you’re writing one, it means that you need to “step outside React” to synchronize with some external system or to do something that React doesn’t have a built-in API for. Wrapping it into a custom Hook lets you precisely communicate your intent and how the data flows through it.

例如，考虑一个 ShippingForm 组件，它显示两个下拉菜单：一个显示城市列表，另一个显示所选城市的区域列表。你可能会从如下代码开始：

🌐 For example, consider a ShippingForm component that displays two dropdowns: one shows the list of cities, and another shows the list of areas in the selected city. You might start with some code that looks like this:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // This Effect fetches cities for a country
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // This Effect fetches areas for the selected city
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

虽然这段代码相当重复，但将这些 Effects 分开是正确的。 它们同步两个不同的事情，所以你不应该将它们合并成一个 Effect。相反，你可以通过将它们之间的共用逻辑提取到你自己的 useData Hook 中来简化上面的 ShippingForm 组件：

🌐 Although this code is quite repetitive, it’s correct to keep these Effects separate from each other. They synchronize two different things, so you shouldn’t merge them into one Effect. Instead, you can simplify the ShippingForm component above by extracting the common logic between them into your own useData Hook:

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

现在你可以在 ShippingForm 组件中将两个 Effects 都替换为对 useData 的调用：

🌐 Now you can replace both Effects in the ShippingForm components with calls to useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

提取自定义 Hook 可以使数据流变得明确。你输入 url，就可以得到 data。通过将你的 Effect “隐藏”在 useData 中，你还可以阻止在 ShippingForm 组件上工作的其他人向其添加不必要的依赖。随着时间的推移，你应用的大多数 Effect 都将位于自定义 Hooks 中。

🌐 Extracting a custom Hook makes the data flow explicit. You feed the url in and you get the data out. By “hiding” your Effect inside useData, you also prevent someone working on the ShippingForm component from adding unnecessary dependencies to it. With time, most of your app’s Effects will be in custom Hooks.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Avoid: using custom "lifecycle" Hooks
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Avoid: creating custom "lifecycle" Hooks
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Good: two raw Effects separated by purpose

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Great: custom Hooks named after their purpose
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

自定义钩子帮助你迁移到更好的模式

🌐 Custom Hooks help you migrate to better patterns

Effects 是一个“应急方案”：当你需要“跳出 React”并且没有更好的内置解决方案适用于你的使用场景时，你就会使用它们。随着时间的推移，React 团队的目标是通过为更具体的问题提供更具体的解决方案，将你应用中的 Effects 数量减少到最少。将你的 Effects 封装在自定义 Hooks 中，可以在这些解决方案可用时更容易升级你的代码。

🌐 Effects are an “escape hatch”: you use them when you need to “step outside React” and when there is no better built-in solution for your use case. With time, the React team’s goal is to reduce the number of the Effects in your app to the minimum by providing more specific solutions to more specific problems. Wrapping your Effects in custom Hooks makes it easier to upgrade your code when these solutions become available.

让我们回到这个例子：

🌐 Let’s return to this example:

在上面的例子中，useOnlineStatus 是通过一对 useState 和 useEffect 实现的。然而，这不是最好的解决方案。它没有考虑许多边界情况。例如，它假设当组件挂载时，isOnline 已经是 true，但如果网络已经离线，这可能是错误的。你可以使用浏览器的 navigator.onLine API 来检查，但直接使用它在服务器上生成初始 HTML 时是不可行的。总之，这段代码可以改进。

🌐 In the above example, useOnlineStatus is implemented with a pair of useState and useEffect. However, this isn’t the best possible solution. There is a number of edge cases it doesn’t consider. For example, it assumes that when the component mounts, isOnline is already true, but this may be wrong if the network already went offline. You can use the browser navigator.onLine API to check for that, but using it directly would not work on the server for generating the initial HTML. In short, this code could be improved.

React 包含一个专用的 API，称为 useSyncExternalStore，它可以为你处理所有这些问题。这里是你的 useOnlineStatus Hook，重新编写以利用这个新 API：

🌐 React includes a dedicated API called useSyncExternalStore which takes care of all of these problems for you. Here is your useOnlineStatus Hook, rewritten to take advantage of this new API:

注意到你不需要更改任何组件就能进行这次迁移：

🌐 Notice how you didn’t need to change any of the components to make this migration:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

这是为什么在自定义钩子中封装副作用通常是有益的另一个原因：

🌐 This is another reason for why wrapping Effects in custom Hooks is often beneficial:

1. 你使流入和流出副作用的数据非常明确。
2. 你让你的组件专注于意图而不是副作用的确切实现。
3. 当 React 添加新功能时，你可以删除这些副作用而无需更改任何组件。

类似于设计系统， 你可能会发现从应用的组件中提取常见习惯用法到自定义 Hooks 中会很有帮助。这将使你的组件代码专注于意图，并让你避免频繁编写原始 Effects。许多优秀的自定义 Hooks 由 React 社区维护。

🌐 Similar to a design system, you might find it helpful to start extracting common idioms from your app’s components into custom Hooks. This will keep your components’ code focused on the intent, and let you avoid writing raw Effects very often. Many excellent custom Hooks are maintained by the React community.

import { use, Suspense } from "react";

function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

export function MessageContainer({ messagePromise }) {
  return (
    <Suspense fallback={<p>⌛Downloading message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

import { use } from 'react';

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

有不止一种方法可以做到

🌐 There is more than one way to do it

假设你想使用浏览器 requestAnimationFrame API 从零开始 实现一个淡入动画。你可能会从一个设置动画循环的 Effect 开始。在动画的每一帧中，你可以改变你 持有在 ref 中 的 DOM 节点的不透明度，直到它达到 1。你的代码可能像这样开始：

🌐 Let’s say you want to implement a fade-in animation from scratch using the browser requestAnimationFrame API. You might start with an Effect that sets up an animation loop. During each frame of the animation, you could change the opacity of the DOM node you hold in a ref until it reaches 1. Your code might start like this:

为了使组件更易读，你可以将逻辑提取到一个 useFadeIn 自定义 Hook 中：

🌐 To make the component more readable, you might extract the logic into a useFadeIn custom Hook:

你可以保持 useFadeIn 代码不变，但你也可以对其进行更多重构。例如，你可以将设置动画循环的逻辑从 useFadeIn 中提取到一个自定义的 useAnimationLoop Hook 中：

🌐 You could keep the useFadeIn code as is, but you could also refactor it more. For example, you could extract the logic for setting up the animation loop out of useFadeIn into a custom useAnimationLoop Hook:

然而，你并不必须那样做。和常规函数一样，最终由你决定在代码的不同部分之间划分界限。你也可以采取一种完全不同的方法。你可以不把逻辑保留在 Effect 中，而是将大部分命令式逻辑移到一个 JavaScript 类: 中。

🌐 However, you didn’t have to do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. You could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript class:

Effects 让你将 React 连接到外部系统。Effects 之间需要的协调越多（例如，链式多个动画），将逻辑完全从 Effects 和 Hooks 中提取出来就越有意义，就像上面的沙盒示例一样。然后，你提取出来的代码就成为了“外部系统”。这使得你的 Effects 保持简单，因为它们只需要向你已移出 React 的系统发送消息。

🌐 Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to chain multiple animations), the more it makes sense to extract that logic out of Effects and Hooks completely like in the sandbox above. Then, the code you extracted becomes the “external system”. This lets your Effects stay simple because they only need to send messages to the system you’ve moved outside React.

以上示例假设淡入逻辑需要用 JavaScript 编写。然而，这种特定的淡入动画使用普通的 CSS 动画: 实现既更简单又更高效。

🌐 The examples above assume that the fade-in logic needs to be written in JavaScript. However, this particular fade-in animation is both simpler and much more efficient to implement with a plain CSS Animation:

有时，你甚至不需要钩子！

🌐 Sometimes, you don’t even need a Hook!