React高阶组件详解

文章目录

- 高阶组件是什么？
- 认识高阶组件
- 编写高阶组件
- 高阶组件实践
- 推荐文章

高阶组件是什么？

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

高阶组件是参数为组件，返回值为新组件的函数

在此期间，我们可以对该组件进行props处理，事件处理等工作

认识高阶组件

复用逻辑

对组件进行加工处理，根据需求来定制专属化的HOC
强化props

劫持上一层传过来的props,混入新的props
赋能组件

HOC有一项独特的特性，就是可以给被HOC包裹的业务组件，提供一些拓展功能，比如说额外的生命周期，额外的事件，但是这种HOC，可能需要和业务组件紧密结合
控制渲染

劫持渲染是hoc一个特性，在wrapComponent包装组件中，可以对原来的组件，进行条件渲染，节流渲染，懒加载等功能

使用方式

装饰器模式
函数包裹

两种不同的高阶组件

正向的属性代理
```
  function HOC(WrapComponent){return class Advance extends React.Component{state={name:'loong'}render(){return <WrapComponent  { ...this.props } { ...this.state }  />}}}
```
我们来看一下上面这个例子，return 返回结果是父组件（代理组件）对子组件（业务组件）的一系列操作

在 fiber tree上，先mounted组件，然后才是我们的业务组件

反向的组件继承

    class Index extends React.Component{render(){return <div> hello,world  </div>}}function HOC(Component){return class wrapComponent extends Component{}}export default HOC(Index)

HOC采用继承的方式, 代理组件继承了业务组件的本身，我们在使用的时候直接实例化代理组件HOC即可

编写高阶组件

很多文章对其有很多分类，我这里就按照我的理解去分类

增强props
混入props 代理组件state状态会混入（上面有混入的例子）, 初次之外我们还可以进行控制state的更新

function classHOC(WrapComponent){return class  Idex extends React.Component{constructor(){super()this.state={name:'alien'}}changeName(name){this.setState({ name })}render(){return <WrapComponent { ...this.props }  { ...this.state } changeName={this.changeName.bind(this)  }  />}}
}
function Index(props){const [ value ,setValue ] = useState(null)const { name ,changeName } = propsreturn <div><div>   hello,world , my name is { name }</div>改变name <input onChange={ (e)=> setValue(e.target.value)  }  /><button onClick={ ()=>  changeName(value) }  >确定</button></div>
}export default classHOC(Index)

我们看这个例子，代理组件中changeName={this.changeName.bind(this)} ，绑定changeName方法。用来更新name属性（代理组件中，说实话让我想起来了闭包）。

题外话：上面的例子中changeName绑定的是一个函数，然后利用bind改变其this指向（返回值是一个函数），在Index组件使用的时候<button onClick={ ()=> changeName(value) } >确定</button> , 才可以正确更新到代理组建的state。如果不绑定就会找不到该方法。

控制渲染
代理组件通过处理可以控制子组件是否显示

可以通过变量控制，也可以通过其它方式。达到控制渲染的目的就可以了

我们来看一个优化的例子💨

    function HOC (Component){return function renderWrapComponent(props){const { num } = propsconst RenderElement = useMemo(() =>  <Component {...props}  /> ,[ num ])return RenderElement}}class Index extends React.Component{render(){console.log(`当前组件是否渲染`,this.props)return <div>hello,world, my name is alien </div>}}const IndexHoc = HOC(Index)export default ()=> {const [ num ,setNumber ] = useState(0)const [ num1 ,setNumber1 ] = useState(0)const [ num2 ,setNumber2 ] = useState(0)return <div><IndexHoc  num={ num } num1={num1} num2={ num2 }  /><button onClick={() => setNumber(num + 1) } >num++</button><button onClick={() => setNumber1(num1 + 1) } >num1++</button><button onClick={() => setNumber2(num2 + 1) } >num2++</button></div>}

上面的例子应该很好理解，代理组件通过useMemo钩子来依据props传入的num,来决定是否更新子组件

劫持生命周期

function HOC (Component){const proDidMount = Component.prototype.componentDidMount Component.prototype.componentDidMount = function(){console.log('劫持生命周期：componentDidMount')proDidMount.call(this)}return class wrapComponent extends React.Component{render(){return <Component {...this.props}  />}}
}

也是很好理解，代理组件保存子组建的生命周期函数，然后重新设置对应的生命周期函数

事件处理

我们来看分析下面这个例子💨

function ClickHoc (Component){return  function Wrap(props){const dom = useRef(null)useEffect(()=>{const handerClick = () => console.log('发生点击事件') dom.current.addEventListener('click',handerClick)return () => dom.current.removeEventListener('click',handerClick)},[])return  <div ref={dom} ><Component  {...props} /></div>}
}

其实就是代理组件上面加了一个click监听事件

获取自定义组件ref

我们知道在自定义组件上面ref是无用的，我们可以使用代理组件包裹业务组件即可，ref={dom}在代理组件上，即可获取
```
 return  <div ref={dom} ><Component  {...props} /></div>
```

高阶组件实践

可以参卡`推荐文章`中的这一章节，写的很详细