React 中的“重新渲染”和“组件初次挂载”的区别

组件初次挂载 vs. 重新渲染

组件初次挂载（Mounting）：
- 当组件第一次被添加到 DOM 中时，就称为组件的初次挂载。
- 例如，当你导航到一个新页面，这个页面包含了该组件，组件会被挂载。
- 在初次挂载时，React 会执行组件的 constructor、render 方法，以及 componentDidMount（对于类组件）或 useEffect（对于函数组件）中没有依赖项的副作用。
组件重新渲染（Re-rendering）：
- 当组件的状态（state）或属性（props）发生变化时，React 会重新调用组件的 render 方法，从而更新 DOM。
- 例如，当用户点击按钮更新组件的状态时，或者父组件重新渲染并传递新的属性给子组件时，都会触发重新渲染。
- 在函数组件中，每次组件重新渲染时，整个函数都会重新执行。

示例说明

以下是一个简单的例子来说明组件的初次挂载和重新渲染：

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

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

  useEffect(() => {
    console.log('Component mounted');
  }, []); // 只有在组件初次挂载时执行

  useEffect(() => {
    console.log('Component rendered or re-rendered');
  }); // 在每次组件渲染时执行

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

export default MyComponent;

解释

组件初次挂载：
- 当你第一次加载这个组件时，useEffect(() => { console.log('Component mounted'); }, []); 只会执行一次，打印出 “Component mounted”。
- 这个 useEffect 没有依赖项，因此只在组件挂载时执行。
组件重新渲染：
- 当你点击按钮，setCount 更新 count 状态时，组件会重新渲染。
- 每次重新渲染时，useEffect(() => { console.log('Component rendered or re-rendered'); }); 都会执行，打印出 “Component rendered or re-rendered”。
- 这个 useEffect 没有依赖数组，因此在每次渲染时都会执行。

具体应用到 API 调用

我们希望在组件初次挂载时调用 API 获取数据，而不是每次重新渲染时都调用 API。这是因为重新渲染可能会频繁发生，而我们只需要在页面初次加载时获取数据。

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

const MyComponent = () => {
  const [list, setList] = useState([]);
  const [isFetching, setIsFetching] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setIsFetching(true);
    setError(null);
    try {
      const res = await getArticleListAPI();
      setList(res.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsFetching(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []); // 只有在组件初次挂载时执行

  return (
    <div>
      {isFetching && <div>Loading...</div>}
      {error && <div>Error: {error}</div>}
      <Card title="...">
        <Breadcrumb items="..." />
        {/* 使用 list 状态渲染 UI */}
        {list.map(item => (
          <div key={item.id}>{item.title}</div>
        ))}
      </Card>
    </div>
  );
};

export default MyComponent;