[ffxixslh] React Docs [beta] - 学习笔记(5)

Synchronizing with effects

假设 React 中存在一些需要与外部系统进行同步的组件。例如，你可能想控制一个基于 React state 的非 React 组件与服务器建立连接，或在组件出现在屏幕时发送一个分析日志。 Effects 允许你在渲染之后运行这些代码，由此你可以与外部的系统同步你的组件。

在学习 Effects 之前，你需要熟悉 React 组件内的两种逻辑：

• 渲染代码存在于组件的最顶层。这是你存放 props 和 state ，转换它们和返回你想在屏幕上看到的 JSX 的地方。渲染代码必须是纯函数，它应该只计算结果，而不做其他事情。

• 事件句柄是组件中的内嵌函数，它们会做事，而不仅只是计算。一个事件句柄可能会更新一个 input 域，发送一个 HTTP POST 请求来购买一个产品，或者引导用户浏览其他页面。事件句柄承载着 “副作用”（它们会改变程序的状态），会被用户的特定操作触发（例如，点击按钮或者输入文字）。

Effects 允许你指定这些副作用是由渲染本身产生的，而非通过一个特定的事件。

Effects 会在屏幕更新后，在渲染过程的末尾运行。这也是同步 React 组件和外部系统的最佳时机。

Here and later in this text, capitalized “Effect” refers to the React-specific definition above, i.e. a side effect caused by rendering. To refer to the broader programming concept, we’ll say “side effect”.

You might not need an Effect

不要冲动地为组件添加 Effects 。 时刻记住 Effects 是能够跨出你的 React 代码的和某个外部系统同步的典型。如果你的副作用仅仅只是为了适应一些基于其他状态的状态，那么你不应该需要一个 Effect。

How to write an Effect

可以通过以下三步创建一个 Effect：

1. 定义Effect。默认的，你的Effect会在每次渲染后运行。

2. 指定依赖项。大多数Effects仅在需要它们的时候进行重渲染，而不是在每次渲染之后。例如，只有在出现组件时才能触发淡出动画。只有在组件出现并消失时，或者聊天室更改时，才会对聊天室进行连接或断开连接。因此你可以通过添加相关依赖项来控制它们。

3. 如有需要，添加cleanup。有些副作用需要指定怎样停止，撤回或清除，无论它们在干什么。例如，“连接”需要“断开连接”，“关注”需要“取消关注”。因此，你可以通过返回一个函数来做到这些。

Step 1: Declare an Effect

首先，引入 useEffect 这个 hook 函数：

import {
    useEffect } from 'react';

然后再组件的顶层调用它，并添加一些代码进去：

function MyComponent() {
   
  useEffect(() => {
   
    // Code here will run after *every* render
  });
  return <div />;
}

注意：在组件创建时不能存在 useEffect 中有 setState 的行为，这会创建一个无限循环，因为组件会在渲染后才调用 useEffect ，而 useEffect 被调用后，其中的 setState 又会触发重新渲染，导致无限循环的现象出现。所以没有与外部系统同步的需求，最好不要使用Effect，即使你只想调整一个 state 来适应另外的 state 。

// It will produce an infinite loop
const [count, setCount] = useState(0);
useEffect(() => {
   
  setCount(count + 1);
});

Step 2: Specify the Effect dependencies

默认情况下， Effects 在每次渲染后运行。通常，这不是你想要的:

• 有时，这很慢。与外部系统同步并不总是即时的，因此您可能需要跳过执行此操作，除非有必要。例如，您不想通过每次击键来重新连接到聊天服务器。

• 有时，这是错误的。例如，您不想在每次击键触发组件淡出动画。当组件首次出现时，动画只能播放一次。

依赖项数组可以包含多个依赖项。如果指定的所有依赖项的值都与上一次渲染中的值完全相同，则 React 只会跳过 Effect 的重新运行。

React compares the dependency values using the Object.is comparison

useEffect 在以下的情况会表现出不同的行为：

useEffect(() => {
   
  // This runs after every render
});

useEffect(()