在React中，有三种主要的代码复用方法：render props、高阶组件（Higher-Order Components, HOC）和自定义钩子（Custom Hooks）。以下是它们的简单介绍和示例代码。
- Render Props
Render props 是一个在 React 组件之间使用一个值- 一个函数 作为 props 的简单技术。
// 使用Render Props的FancyButton组件
<FancyButton render={value => `当前值: ${value}`}>
// 可以在这里渲染`value`
</FancyButton>- Higher-Order Components
高阶组件是一个接收一个组件并返回另一个新组件的函数。
// 高阶组件示例
const HOC = WrappedComponent => {
class Container extends React.Component {
// 可以添加一些状态和逻辑
render() {
return <WrappedComponent {...this.props} />
}
}
return Container;
};
// 使用HOC
export default HOC(SomeComponent);- Custom Hooks
自定义钩子是一个函数，其名称以 "use" 开头，可以让你在组件之间共享逻辑。
// 自定义钩子示例
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;
}
// 在组件中使用钩子
function MyComponent() {
const windowWidth = useWindowWidth();
return <div>Window width is: {windowWidth}px</div>;
}这三种模式都可以用来复用代码，但每种都有其用途和限制。选择哪种模式取决于具体情况，但在大多数情况下，React 团队推荐使用 Hooks，因为它们可以提供类似 HOC 的复用能力，而无需 HOC 的所有问题（例如，不必使用嵌套组件）。