1、React状态管理有哪些方式？
答：React的状态管理方式主要分为以下几类：
- 组件内部状态：
useState、useReducer管理单个组件的局部状态； - 状态提升：
props+共享 state多个组件共享，由父组件维护state； React Context：useContext+createContext跨层级共享数据(轻量全局状态)；- 状态管理库：
Redux、Zustand、Jotai、Recoil、MobX管理复杂的全局状态，解耦组件间通信。
2、一个 React 组件重新渲染了，可能的原因有哪些？
答：触发一个组件重新渲染的原因有以下几种：
- 父组件重新渲染：父组件更新会触发子组件的重新渲染（无论
props是否变化）； props变化：只要传入组价的props值发生了变化（即使是引用变化），也会重新渲染；- 组件内部
state变化：调用useState/useReducer触发组件状态更新； - context 变化：使用了
useContext,当context值变化时触发重新渲染； - 强制更新（force update）：例如
class 组件中调用this.forceUpdate()(很少用)； - key 变化（列表组件）：如果组件的 key 发生了变化，React 会销毁旧组件，重新挂载新组件。
3、在 React 中如何实现组件懒加载？
答：React的懒加载是通过React.lazy()动态导入组件，实现按需加载，从而减少首屏体积，提升应用性能。通常与Suspense组件结合使用以处理加载状态。
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
React.lazy(() => import(...))：动态导入模块（返回的是 Promise），React会在需要时才加载这个组件；Suspense：包裹懒加载组件，fallback是加载期间显示的内容。
4、如何封装一个 Loading 高阶组件？（HOC）
答：高阶组件（HOC）是一个函数，接收一个组件作为参数，返回一个增强后的组件。在实际开发中，我们可以用HOC封装通用逻辑，比如权限校验、loading 状态处理等。
import React from 'react';
function withLoading(WrappedComponent) {
return function LoadingComponent({ isLoading, ...restProps }) {
if (isLoading) return <div style={styles.loading}>Loading...</div>;
return <WrappedComponent {...restProps} />;
};
}
const styles = {
loading: {
padding: '20px',
textAlign: 'center',
fontSize: '18px',
color: '#666'
}
};
export default withLoading;
withLoading是一个 HOC，它接受一个原始组件和 loading 状态，根据 isLoading 渲染 Loading UI 或真实组件。优点是可复用、解耦 Loading 逻辑、让业务组件保持干净。可以通过参数扩展自定义 Loading 样式，甚至结合 React.lazy 实现懒加载时的 Loading 状态。
