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 调用只在组件初次挂载时执行一次，从而避免不必要的重复请求。