useEffect

1.依赖项是什么？

依赖项通常是指在 React Hooks 中用到的一个概念，尤其是在 useEffect、useMemo 和 useCallback 等 Hooks 中。依赖项是一个数组，用于列出在组件中使用的状态或属性，这些状态或属性可能会影响到 Hook 的执行。当这些依赖项中的任何一个值发生变化时，Hook 就会重新执行。

例如，在 useEffect 中，我们可以设置一个依赖项数组：

useEffect(() => {
  // 这里是副作用代码，当 `count` 发生变化时会重新执行
  console.log(`Count has changed to: ${count}`);

  // 一些可能的清理工作
  return () => {
    console.log('Cleanup code');
  };
}, [count]); // 这里是依赖项数组，包含了 count 变量

上面的代码中，useEffect Hook 有一个依赖项数组 [count]。当 count 值发生变化时，useEffect 会重新执行。如果不提供依赖项数组或将其设置为空数组（[]），那么副作用函数只会在组件挂载时执行一次，并在组件卸载时执行清理操作。

依赖项的作用是确保 Hook 只在相关状态或属性发生变化时执行，而不是每次组件重新渲染时都执行。这有助于优化性能，避免不必要的操作。

2.useEffect怎么知道依赖项数组发生了改变？

useEffect 在内部使用了浅比较（shallow comparison）来检测依赖项数组是否发生了变化。当组件重新渲染时，useEffect 将当前渲染周期的依赖项数组与上一次渲染周期的依赖项数组进行比较。如果其中任何一个元素发生了变化（即，它们的引用不相等），那么 useEffect 会认为依赖项数组发生了改变，并执行副作用函数。

举个例子，假设我们有以下代码：

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(`Count has changed to: ${count}`);
}, [count]);

在这个例子中，count 是 useEffect 的依赖项。当组件重新渲染时，React 会获取当前渲染周期的 count 值和上一次渲染周期的 count 值。如果它们不相等，那么 useEffect 会执行副作用函数。这里的比较是浅比较，也就是说，React 只检查 count 变量的引用是否相等，而不会深入比较它们的内部结构。

这种浅比较在大多数情况下是足够的，因为基本类型（如数字、字符串和布尔值）是不可变的，而对象和数组通常会在更改时产生新的引用。然而，在某些情况下，浅比较可能会导致不必要的副作用执行，特别是当依赖项是可变对象或数组时。为避免这种情况，可以使用 useMemo 或 useCallback 等其他 Hooks 来确保依赖项的引用在值实际发生变化时才会更改。

3.依赖项的改变会导致无限渲染吗？

依赖项的改变不会导致无限渲染，除非你在副作用函数内部引起了依赖项的改变。当依赖项改变时，useEffect 会执行副作用函数。如果副作用函数的执行结果是导致依赖项再次改变，那么会形成一个循环，从而导致无限渲染。

举个例子：

const [count, setCount] = useState(0);

useEffect(() => {
  // 这里的 setCount 会导致 count 值改变，从而触发 useEffect 再次执行
  setCount(count + 1);
}, [count]);

在这个例子中，useEffect 的副作用函数会调用 setCount 修改 count 的值。这会导致组件重新渲染，并再次执行 useEffect。由于 count 是 useEffect 的依赖项，每次 count 改变时，都会触发 useEffect，从而导致无限渲染。

为了避免无限渲染，你需要确保副作用函数不会在每次执行时都引起依赖项的改变。你可以通过在副作用函数内部添加条件判断或使用其他策略来实现这一点。例如，你可以这样修改上面的例子：

const [count, setCount] = useState(0);

useEffect(() => {
  // 在条件满足时才更新 count
  if (count < 5) {
    setCount(count + 1);
  }
}, [count]);

最好不要在useEffect中改变依赖项，如果一定要改变，就要增加条件语句，避免死循环。

现在，useEffect 只会在 count 小于 5 时更新 count 的值。当 count 达到 5 时，副作用函数不再引起 count 的改变，从而避免了无限渲染。

4.使用 Object.is 来比较新/旧 state 是否相等，浅比较？

Object.is() 是一个 JavaScript 函数，用于比较两个值是否相等。这种比较被称为**“浅比较”（Shallow Comparison）**，它检查两个值是否具有相同的类型和值。Object.is() 的比较方式与 === 类似，但有两个关键区别：

1. Object.is() 把 NaN 视为与其自身相等（NaN 是 “Not a Number” 的缩写，表示一个非数字值）。
2. Object.is() 把 +0 和 -0 视为不相等。

下面是一些示例：

Object.is(42, 42); // true
Object.is('hello', 'hello'); // true
Object.is(null, null); // true
Object.is(undefined, undefined); // true
Object.is(NaN, NaN); // true
Object.is(+0, -0); // false

在 React 的 Hooks 中，useState 和 useReducer 在更新组件状态时使用 Object.is() 进行浅比较，以确定是否需要重新渲染组件。这意味着，只有当新的状态值与旧的状态值不相等时，组件才会重新渲染。

请注意，浅比较并不会递归地比较对象的属性。因此，当使用对象作为状态时，如果对象内部的属性发生变化，但对象的引用仍然相同，Object.is() 则认为这两个对象相等，导致组件不会重新渲染。在这种情况下，可以使用不可变数据结构（immutable data structures）或通过创建一个新对象来确保触发组件更新。

5.为什么要用浅比较，而不用深比较呢？

使用浅比较而不是深比较的原因主要有以下几点：

1. 性能：深比较需要递归地遍历整个对象结构，可能涉及大量的计算。对于大型对象或嵌套结构较深的对象，这可能导致性能问题。而浅比较只需要比较对象的第一层属性，因此性能开销更小。

2. 简化：在大多数情况下，React 组件的状态更新很少涉及到深层嵌套的对象结构。浅比较足以满足大部分使用场景的需求，同时可以简化实现。

3. 不可变性：在 React 中，一个推荐的做法是尽量使用不可变数据结构。当你更新状态时，而不是直接修改对象，而是创建一个新对象。这样，浅比较就足够检测出状态是否发生了变化。

4. **避免死循环：**深比较可能会导致死循环，尤其是在对象中存在循环引用的情况下。浅比较可以避免这种情况。

总之，浅比较在性能、简化和实用性方面都比深比较更有优势。对于那些需要深度比较的场景，开发者可以在组件内部自行实现，以满足特定需求。

6.如何在 useState 中处理副作用（例如，当状态更新时触发某个操作）？

可以使用 useEffect 来处理副作用。useEffect 会在组件挂载、卸载以及依赖项更改时执行。如果需要在某个状态更新时执行副作用，可以将该状态作为 useEffect 的依赖项。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;

    return () => {
      document.title = 'React App';
    };
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

7.如何理解副作用Effect？

在 React 中，副作用（side effects）是指在组件的生命周期内发生的那些与纯渲染无关的行为。它们可能会影响组件之外的部分，包括但不限于：

1. **数据获取：**从服务器或本地获取数据并在组件中显示。
2. 订阅：订阅数据源以便在新数据可用时更新组件。
3. DOM 操作：直接操作 DOM（例如，修改样式、属性或者添加事件监听器）。
4. 定时器：使用 setTimeout 或 setInterval 定时执行某些操作。

这些副作用通常会在组件挂载、卸载和更新时执行。在类组件中，我们需要使用生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）来处理副作用。而在函数组件中，我们可以使用 useEffect Hook 来处理副作用。

8.如何理解纯渲染？

纯渲染（Pure Rendering）是指一个组件的渲染行为完全取决于其接收到的属性（props）和状态（state），即相同的输入总是产生相同的输出。纯渲染组件不会产生其他副作用，如修改全局变量、改变 DOM 之外的部分、触发网络请求等。

与纯渲染相对的是非纯渲染或有副作用的渲染。这些组件在渲染过程中可能产生与渲染无关的行为，如数据获取、订阅、DOM 操作等。这些副作用可能会影响到组件之外的部分，并且与组件的状态和属性有关。

下面是两个组件的示例，一个是不纯的组件（非纯渲染组件），另一个是纯组件（纯渲染组件）：

1. 不纯的组件（有副作用）：

import React, { useState, useEffect } from 'react';

function NonPureComponent() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <h1>当前时间：{time}</h1>
    </div>
  );
}

在这个不纯的组件中，我们使用 useEffect Hook 来创建一个定时器，用于每秒更新当前时间。该组件具有副作用，因为它创建了一个定时器，并在组件卸载时清除定时器。这些副作用会影响到组件之外的部分（例如全局的计时器）。

2. 纯组件（纯渲染）：

import React from 'react';

function PureComponent({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

在这个纯组件中，它仅仅根据接收到的 title 和 content 属性来渲染。相同的输入（属性）总是产生相同的输出（渲染结果）。这个组件没有任何副作用，完全取决于传入的属性。因此，这是一个纯渲染组件。

setCount(prevCount => prevCount + 1);

9.useEffect何时执行？

useEffect 的回调函数会在组件挂载后和每次依赖项更新时执行。如果您提供了一个空的依赖项数组（[]），则 useEffect 只会在组件挂载后执行一次。

当您在 useEffect 的回调函数中返回一个函数时，该函数将被作为清理函数。清理函数会在以下情况执行：

1. 当组件卸载时。
2. 当依赖项发生变化时，也就是说，在执行新的副作用之前，先执行清理函数以清除之前的副作用。

这是一个简单的示例：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component did mount or update.');

    return () => {
      console.log('Component will unmount or dependencies changed.');
    };
  }, [count]); // 依赖项数组

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在这个例子中，当组件挂载后和每次 count 变化时，useEffect 的回调函数都会执行。相应地，当组件卸载或依赖项 count 发生变化时，清理函数将被执行。

10.为什么在 useEffect 的依赖项数组中包含函数或对象可能导致问题？如何解决这个问题？

函数或对象作为依赖项的问题: 如果函数或对象在每次渲染时都被重新创建，它们的引用将改变，导致 useEffect 不断地重新执行。为了解决这个问题，可以使用 useCallback、useMemo 或将函数/对象移至组件外部。

11.如何在 useEffect 中模拟 componentDidMount 和 componentDidUpdate、componentWillUnmount 生命周期方法？

为了模拟 componentDidMount，将依赖项数组设置为空；

为了模拟 componentDidUpdate，将需要观察的变量放入依赖项数组。

在 useEffect 内返回一个清理函数，该函数将在组件卸载时执行。

12.当一个组件有多个 useEffect 时，它们的执行顺序是什么？

按照它们在代码中出现的顺序依次执行。

13.如何使用 useEffect 实现一个定时器，并在组件卸载时清除它？

useEffect(() => {
  const timer = setTimeout(() => {
    // 执行操作
  }, 1000);
  
  return () => {
    clearTimeout(timer);
  };
}, []);

14.为什么不能在 useEffect 回调函数中直接使用 async/await

在 useEffect 回调函数中直接使用 async/await 是不被允许的，原因如下：

1. useEffect 的设计是用于处理副作用，它期望接收一个同步函数作为参数。当你将一个异步函数作为参数传递给 useEffect 时，这个异步函数会返回一个 Promise 对象，而不是一个清理函数。这会导致 React 抛出警告，因为它期望你返回一个可用于清理副作用的函数（或者不返回任何内容）。

2. 直接在 useEffect 中使用 async/await 可能导致意外的行为。因为异步函数的执行是非阻塞性的，useEffect 可能在异步操作完成之前就被重新调用或清理，这可能会导致竞争条件和潜在的错误。

为了正确地在 useEffect 中使用 async/await，你可以在 useEffect 内部定义一个异步函数并立即调用它。这样做的好处是，你可以在清理函数中处理异步操作（例如取消请求）以防止内存泄漏和竞争条件。

下面是一个示例：

useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await fetch(/* ... */);
      // 处理数据
    } catch (error) {
      // 处理错误
    }
  };

  fetchData();
}, []);

这种方法允许你在 useEffect 中正确处理异步操作，同时遵循 React 的要求。