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

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

1. 组件初次挂载（Mounting）：

   • 当组件第一次被添加到 DOM 中时，就称为组件的初次挂载。
   • 例如，当你导航到一个新页面，这个页面包含了该组件，组件会被挂载。
   • 在初次挂载时，React 会执行组件的 constructor、render 方法，以及 componentDidMount（对于类组件）或 useEffect（对于函数组件）中没有依赖项的副作用。

2. 组件重新渲染（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;

解释

1. 组件初次挂载：

   • 当你第一次加载这个组件时，useEffect(() => { console.log('Component mounted'); }, []); 只会执行一次，打印出 “Component mounted”。
   • 这个 useEffect 没有依赖项，因此只在组件挂载时执行。

2. 组件重新渲染：

   • 当你点击按钮，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;

总结

• 初次挂载：当组件第一次被渲染到页面上时（如打开一个包含这个组件的页面），会触发 useEffect 中的 API 调用。
• 重新渲染：当组件的状态或属性发生变化时，组件会重新渲染，但由于 useEffect 依赖数组为空，API 不会再次被调用。
• 通过在 useEffect 中调用 API 并传入空依赖数组，确保 API 调用只在组件初次挂载时执行一次，从而避免不必要的重复请求。