react如何拓展
React 拓展方法
使用高阶组件（HOC）
高阶组件是一种函数，接收一个组件并返回一个新组件。通过HOC可以复用组件逻辑，例如添加日志、权限控制等。
示例代码：
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
const EnhancedComponent = withLogging(MyComponent);自定义Hooks
自定义Hooks可以将组件逻辑提取到可复用的函数中。适用于状态管理、副作用封装等场景。
示例代码：
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(count + 1);
return { count, increment };
}
function MyComponent() {
const { count, increment } = useCounter(0);
return <button onClick={increment}>{count}</button>;
}渲染属性（Render Props）
通过组件属性传递渲染函数，实现逻辑与UI分离。适用于动态渲染或数据共享场景。
示例代码：
class DataProvider extends React.Component {
state = { data: null };
render() {
return this.props.render(this.state.data);
}
}
<DataProvider render={data => <div>{data}</div>} />使用Context API
Context提供跨组件层级的数据传递，避免多层props drilling。适用于主题、用户信息等全局数据。
示例代码：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}集成第三方库 通过React的灵活性集成Redux、React Router等库。例如Redux用于状态管理：
import { Provider } from 'react-redux';
import store from './store';
function App() {
return (
<Provider store={store}>
<MyComponent />
</Provider>
);
}性能优化 使用React.memo、useMemo、useCallback等API优化渲染性能。例如：
const MemoizedComponent = React.memo(MyComponent);
function Parent() {
const memoizedCallback = useCallback(() => doSomething(), []);
return <MemoizedComponent onClick={memoizedCallback} />;
}服务器组件（React Server Components） 利用服务端渲染能力，减少客户端负载。适用于静态内容或数据获取：
// ServerComponent.server.js
export default function ServerComponent() {
const data = fetchDataSync(); // 服务端同步获取
return <div>{data}</div>;
}微前端架构 通过模块联邦或iframe集成React到微前端体系。示例配置：
// webpack.config.js
new ModuleFederationPlugin({
name: 'app1',
exposes: { './Component': './src/Component' }
});
