高阶组件

Tue, 17 Dec 2024 00:00:00 +0800

一前言

React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。

高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景， 高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。

我们带着问题去开始今天的讨论：

1 什么是高阶组件，它解决了什么问题？
2 有几种高阶组件，它们优缺点是什么？
3 如何写一个优秀高阶组件？
4 hoc怎么处理静态属性，跨层级ref等问题？
5 高阶组件怎么控制渲染，隔离渲染？
6 高阶组件怎么监控原始组件的状态？
…

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

二全方位看高阶组件

1 几种包装强化组件的方式

① mixin模式

原型图

老版本的`react-mixins`

在react初期提供一种组合方法。通过React.createClass,加入mixins属性，具体用法和vue 中mixins相似。具体实现如下。

const customMixin = {
 componentDidMount(){
 console.log( '------componentDidMount------' )
 },
 say(){
 console.log(this.state.name)
 }
}

const APP = React.createClass({
 mixins: [ customMixin ],
 getInitialState(){
 return {
 name:'alien'
 }
 },
 render(){
 const { name } = this.state
 return <div> hello ,world , my name is { name } </div>
 }
})

这种mixins只能存在createClass中，后来React.createClass连同mixins这种模式被废弃了。mixins会带来一些负面的影响。

高阶组件 on Last Stand

高阶组件

一 前言

二 全方位看高阶组件

1 几种包装强化组件的方式

① mixin模式

老版本的react-mixins

一前言

二全方位看高阶组件

老版本的`react-mixins`