react如何拓展
React 拓展方法
使用高阶组件（HOC）
高阶组件是一种函数，接收一个组件并返回一个新组件。通过 HOC 可以复用组件逻辑，例如添加日志、权限控制或数据注入。
示例代码：
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}自定义 Hooks
Hooks 允许在不编写类组件的情况下复用状态逻辑。自定义 Hook 是一个以 use 开头的函数，可以调用其他 Hooks。
示例：
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}Render Props 模式
通过组件的 render 或 children 属性传递函数，实现逻辑与 UI 的分离。
示例：
<DataProvider render={data => <Component data={data} />} />组合组件（Compound Components）
通过多个关联组件共享隐式状态，例如 <Select> 和 <Option>。
示例：
function Select({ children }) {
const [value, setValue] = useState();
return (
<SelectContext.Provider value={{ value, setValue }}>
{children}
</SelectContext.Provider>
);
}使用 Context API
跨层级传递数据，避免 props 层层传递。适用于主题、用户信息等全局状态。
示例：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}集成第三方状态管理库
如 Redux、MobX 或 Recoil，用于复杂状态管理。Redux 示例：
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);代码分割与懒加载
使用 React.lazy 和 Suspense 动态加载组件，优化性能。
示例：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}服务端渲染（SSR）
通过 Next.js 等框架实现 SSR，提升首屏加载速度和 SEO。
Next.js 示例：
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}TypeScript 集成
为 React 添加类型检查，提高代码健壮性。
示例：
interface Props {
name: string;
}
const Greet: React.FC<Props> = ({ name }) => <div>Hello {name}!</div>;性能优化技术
- 使用
React.memo避免不必要的渲染。 - 使用
useMemo和useCallback缓存计算和函数。
示例：const MemoizedComponent = React.memo(MyComponent); const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
