《render-props, Hoc，自定义hooks 详解》

在React中，有三种主要的代码复用方法：render props、高阶组件（Higher-Order Components, HOC）和自定义钩子（Custom Hooks）。以下是它们的简单介绍和示例代码。

1. Render Props

Render props 是一个在 React 组件之间使用一个值- 一个函数 作为 props 的简单技术。

// 使用Render Props的FancyButton组件
<FancyButton render={value => `当前值: ${value}`}>
// 可以在这里渲染`value`
</FancyButton>

2. Higher-Order Components

高阶组件是一个接收一个组件并返回另一个新组件的函数。

// 高阶组件示例
const HOC = WrappedComponent => {
  class Container extends React.Component {
    // 可以添加一些状态和逻辑
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
  return Container;
};
 
// 使用HOC
export default HOC(SomeComponent);

3. 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 的所有问题（例如，不必使用嵌套组件）。