react如何实现逻辑复用
实现逻辑复用的方法
高阶组件（HOC）
通过函数接收组件并返回新组件的方式复用逻辑。例如，一个权限校验的高阶组件可以包裹多个需要鉴权的页面组件，统一处理权限逻辑。
function withAuth(WrappedComponent) {
return function(props) {
const isAuthenticated = checkAuth();
return isAuthenticated ? <WrappedComponent {...props} /> : <Redirect to="/login" />;
};
}自定义Hook
将可复用的状态逻辑提取为Hook。适合处理表单逻辑、数据获取等场景。自定义Hook必须以use开头命名。
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
}
// 使用：const userData = useFetch('/api/user');Render Props
通过组件属性传递渲染函数，共享组件间的代码。适用于动态渲染内容或依赖注入的场景。
<DataProvider render={data => <ChildComponent data={data} />} />Context API
跨层级组件共享全局状态或配置。通过Provider提供数据，Consumer或useContext消费数据。
const ThemeContext = createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}组合组件
通过组件组合而非继承实现复用。例如将业务逻辑拆分为多个原子组件，通过props控制行为。
function Toggle({ children }) {
const [on, setOn] = useState(false);
return children({ on, toggle: () => setOn(!on) });
}
// 使用：<Toggle>{({ on, toggle }) => <Button onClick={toggle}>{on ? 'ON' : 'OFF'}</Button>}</Toggle>选择建议
- UI逻辑复用：优先使用组合组件或Render Props
- 状态逻辑复用：自定义Hook或Context API
- 横切关注点（如鉴权、日志）：高阶组件
- 复杂全局状态：Context API配合useReducer
每种方案各有适用场景，实际项目中常组合使用。例如用Context共享主题，用Hook封装数据请求，用HOC增强组件能力。
