1.類組件和函數組件
（1）類組件
import React, { Component } from 'react';class UserProfile extends Component {constructor(props) {super(props);this.state = {userData: null,isLoading: true,};this.timerId = null;}componentDidMount() {// 模擬 API 調用this.timerId = setTimeout(() => {this.setState({userData: { name: 'John Doe', age: 28 },isLoading: false});}, 2000);}componentWillUnmount() {// 清理工作：清除定時器clearTimeout(this.timerId);}render() {const { isLoading, userData } = this.state;if (isLoading) {return <div>Loading user profile...</div>;}return (<div><h2>Welcome, {userData.name}!</h2><p>Age: {userData.age}</p><p>From: {this.props.city}</p> {/* 使用從父組件傳來的 props */}</div>);}
}export default UserProfile;（2）函數組件
import React, { useState, useEffect } from 'react';const UserProfile = ({ city }) => {// 使用 useState 替代 this.stateconst [userData, setUserData] = useState(null);const [isLoading, setIsLoading] = useState(true);// useEffect 替代生命周期方法useEffect(() => {// componentDidMount 的邏輯（以及 componentDidUpdate 的相關邏輯）const timerId = setTimeout(() => {setUserData({ name: 'John Doe', age: 28 });setIsLoading(false);}, 2000);// cleanup 函數：替代 componentWillUnmountreturn () => {clearTimeout(timerId);};}, []); // 空依賴數組表示只在組件掛載時執行if (isLoading) {return <div>Loading user profile...</div>;}return (<div><h2>Welcome, {userData.name}!</h2><p>Age: {userData.age}</p><p>From: {city}</p></div>);
};export default UserProfile;
2.高階組件
高階組件是一個函數，它接收一個組件作為參數，并返回一個新的增強型組件。
簡單來說：高階組件是用于組件復用的高級技巧，它本質上是一個包裝器（wrapper）
const EnhancedComponent = higherOrderComponent(WrappedComponent);為了解決 React 中的邏輯復用問題。在自定義 Hooks 出現之前，這是 React 中主要的邏輯復用方式。
應用：
- 權限控制：利用高階組件的 條件渲染 特性可以對頁面進行權限控制，權限控制一般分為兩個維度：頁面級別和 頁面元素級別
- 組件渲染性能追蹤：借助父組件子組件生命周期規則捕獲子組件的生命周期，可以方便的對某個組件的渲染時間進行記錄
- 頁面復用
3.哪些方法會觸發 React 重新渲染？重新渲染 render 會做些什么？
- setState（）方法被調用：但是這里有個點值得關注，執行 setState 的時候不一定會重新渲染。當 setState 傳入 null 時，并不會觸發 render。
- 父組件重新渲染：只要父組件重新渲染了，即使傳入子組件的 props 未發生變化，那么子組件也會重新渲染，進而觸發 render
????重新渲染 render 會做些什么?
- 會對新舊 VNode 進行對比，也就是我們所說的Diff算法。
- 對新舊兩棵樹進行一個深度優先遍歷，這樣每一個節點都會一個標記，在到深度遍歷的時候，每遍歷到一和個節點，就把該節點和新的節點樹進行對比，如果有差異就放到一個對象里面
- 遍歷差異對象，根據差異的類型，根據對應對規則更新VNode
4.對React-Fiber的理解，它解決了什么問題？
Fiber 是 React 16 中全新的協調引擎（reconciliation engine），也是一種新的數據結構。
Fiber 是 React 的虛擬 DOM 的升級版，它讓 React 能夠實現增量渲染和更精細的任務控制。
舊架構的問題（Stack Reconciler）
在 React 16 之前，React 使用遞歸遍歷虛擬 DOM 樹來進行 diff 計算：
不可中斷：一旦開始渲染，就必須完成整個樹的計算
阻塞主線程：長時間的渲染會阻塞用戶交互、動畫等
性能瓶頸：復雜組件樹會導致頁面卡頓
Fiber 要解決的問題
可中斷渲染：將渲染任務拆分成小任務，可以暫停和恢復
任務優先級：區分高優先級（用戶交互）和低優先級（數據更新）任務
并發渲染：為未來的并發特性打下基礎
5.常用的hook
1.useState
狀態管理
2.usEffect
useEffect(() => {// 設置操作const timer = setInterval(() => {}, 1000);const listener = () => {};window.addEventListener('resize', listener);// 清理函數（可選）return () => {clearInterval(timer); // 清除定時器window.removeEventListener('resize', listener); // 移除監聽console.log('清理完成！'); // 其他清理工作};
}, []);useEffect?是：
🔧?副作用處理器：處理組件渲染之外的操作
??生命周期管理器：替代 componentDidMount、componentDidUpdate、componentWillUnmount
🧹?清理工具：提供清理函數避免內存泄漏
記住三個核心用法：
useEffect(fn)?- 每次渲染后執行useEffect(fn, [])?- 只執行一次（掛載時）useEffect(fn, [a, b])?- a或b變化時執行
3.useContext
Context 的使用三步曲：
創建：
const MyContext = createContext();提供：
<MyContext.Provider value={數據}>使用：
useContext(MyContext)
