组件初次挂载 vs. 重新渲染
-
组件初次挂载(Mounting):
- 当组件第一次被添加到 DOM 中时,就称为组件的初次挂载。
- 例如,当你导航到一个新页面,这个页面包含了该组件,组件会被挂载。
- 在初次挂载时,React 会执行组件的
constructor
、render
方法,以及componentDidMount
(对于类组件)或useEffect
(对于函数组件)中没有依赖项的副作用。
-
组件重新渲染(Re-rendering):
- 当组件的状态(state)或属性(props)发生变化时,React 会重新调用组件的
render
方法,从而更新 DOM。 - 例如,当用户点击按钮更新组件的状态时,或者父组件重新渲染并传递新的属性给子组件时,都会触发重新渲染。
- 在函数组件中,每次组件重新渲染时,整个函数都会重新执行。
- 当组件的状态(state)或属性(props)发生变化时,React 会重新调用组件的
示例说明
以下是一个简单的例子来说明组件的初次挂载和重新渲染:
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;
总结
- 初次挂载:当组件第一次被渲染到页面上时(如打开一个包含这个组件的页面),会触发
useEffect
中的 API 调用。 - 重新渲染:当组件的状态或属性发生变化时,组件会重新渲染,但由于
useEffect
依赖数组为空,API 不会再次被调用。 - 通过在
useEffect
中调用 API 并传入空依赖数组,确保 API 调用只在组件初次挂载时执行一次,从而避免不必要的重复请求。