类组件如何复用逻辑？

1. 高阶组件

什么是高阶组件 Higher Order Component (HOC)

高阶组件是 React 应用中共享代码，增加逻辑复用的一种方式。比如 A 组件和 B 组件都需要一个相同的逻辑，如何将逻辑抽取到一个公共的地方呢？答案就是使用高阶组件。

高阶组件的核心思想就是在组件的外层再包裹一层执行逻辑的组件，在外层组件中执行逻辑，再将逻辑执行的结果传递到内层组件。

高阶组件由一个函数返回，函数接受组件作为参数，返回一个新的组件。参数组件就是需要复用逻辑的组件，函数内部返回的新组件就是执行逻辑的组件，在新组件内部执行完逻辑以后再调用参数组件并将逻辑结果传递给参数组件。

函数名通常以 width 开头，接受的组件形参名称为 WrappedComponent，返回的组件名称和函数名称一样，只不过 with 中的 w 要大写。

需求：当浏览器窗口发生变化时组件A和组件B都需要获取浏览器窗口的宽度和高度。

function withResizeable(WrappedComponent) {
 function WithResizeable(props) {
   const [sizes, setSizes] = useState([window.innerWidth, window.innerHeight])
   useEffect(() => {
     window.addEventListener("resize", () => {
       setSizes([window.innerWidth, window.innerHeight])
     })
   }, [])
   return <WrappedComponent sizes={sizes} {...props} />
 }
 return WithResizeable
}
复制代码

function App({ sizes, name }) {
 return (
   <div>
     {JSON.stringify(sizes)} {name}
   </div>
 )
}
export default withResizeable(App)
复制代码

ReactDOM.render(<App name="张三" />, document.getElementById("root"))
复制代码

2. 渲染属性

import React, { useEffect, useState } from "react"
   
function Resizeable({ render }) {
 const [sizes, setSizes] = useState([window.innerWidth, window.innerHeight])
 useEffect(() => {
   window.addEventListener("resize", () => {
     setSizes([window.innerWidth, window.innerHeight])
   })
 }, [])
 return render(sizes)
}

export default Resizeable
复制代码

import React from "react"
   
function App({ sizes }) {
 return <div>{JSON.stringify(sizes)}</div>
}

export default App
复制代码

import React from "react"
import ReactDOM from "react-dom"
import Resizeable from "Resizeable"
import App from "./App"

ReactDOM.render(
 <Resizeable render={sizes => <App sizes={sizes} />} />,
 document.getElementById("root")
)
复制代码