奇葩说框架之 react组件及逻辑复用-CSDN博客

本文链接：https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/120755182

代码逻辑复用 是我们开发人员减少代码重复度，进行代码优化的一个重要因素，上期我们的同学分享了关于 Vue 框架的相关逻辑复用的方法及原理，本期我们一起来了解下 React 框架中的逻辑复用，涉及mixins，HOC，render props，Hook 四个部分，由浅入深，欢迎大家交流学习。

1 mixins

1.1 mixins简介

React在v15.3.0之前，通过React.createClass 创建组件，支持mixins；在v15.3.0之后(包含)，通过class 创建组件，废弃mixins。

1.2 mixins demo演示（基于v15.2.1）

demo比较简单，这里就不赘述了。

tips: 可以类比vue的mixins。

1.3 mixins 源码解析

基于1.2 demo，经过debugger调试，我画了如下基础的React相关的类图及调用关系。蓝色部分就是核心的mixins流程，简单理解就是：

通过React.createClass(spec)接收到spec参数，判断spec对象中是否有mixins属性，
如果没有，那太棒了，直接遍历spec把propTypes、componentWillMount等生命周期函数、事件方法等挂载到Constructor.prototype上，这个Constructor就是react组件实例的构造函数；
如果有，就需要判断mixins对象中是否还有mixins属性（因为框架允许mixins嵌套mixins），没有再回到步骤2挂载到原型，有则继续步骤3遍历。

tips：步骤2挂载到原型，会经历react的合并策略，例如mixins、propTypes等规定我们可以定义多次，内部实现方法合并调用；render函数只被允许定义一次，超限会直接报错提示，更多可以查看源码了解

1.4 mixins 缺点

引入了隐式依赖

例如：嵌套mixins各自定义的属性可能被嵌套的多个mixins隐式引用着，删除其中一个会破坏另一个，不形成层次结构，被扁平化并在相同的命名空间中运行。

导致命名冲突

存在潜在的破坏性更改，因为在某些使用它的组件上可能已经存在具有相同名称的方法。

导致滚雪球般的复杂性

原本抽离公共的mixins是为了代码复用，但是随着业务需求的迭代，逐渐出现了差异化，就开始在上面增加if...else逻辑，代码耦合度、复杂度增高，随之带来的是理解成本和开发出错成本，重构代码也是个难题。

详细理解可参看官方博客：Mixins Considered Harmful

2 HOC

2.1 HOC 简介

官方介绍：

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

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

2.2 HOC demo演示（基于v15.3.0）

高阶组件（HOC）常见的两个应用场景是属性代理和反向继承，因为对反向继承的应用理解不是太深入，所以这里仅演示对属性代理的操作。

Demo组件可理解为一个公共基础组件，Hoc函数定义返回了一个增强组件，抽象了props age属性，Hoc(Demo)的执行结果EnhancedComponent就是Demo的增强组件，当然可以将EnhancedComponent作为公共组件继续向上抽象公共属性和方法。

tips: 可以类比vue的高阶组件

2.3 HOC 源码解析

基于2.2 demo，画了如下基础的React相关的类图及调用关系。

简单理解：

代码执行完 const EnhancedComponent = Hoc(Demo)可以通过浏览器看到EnhancedComponent变成了class HOC类，并且继承了React component
当代码执行遇到jsx语法const comp = <EnhancedComponent /> 时，会调用React.createElement()方法将其转成react element对象节点，如下图所示：
当代码执行ReactDOM.render(comp, document.getElementById("root"))，其实是调用了ReactMount.render并最终返回了React component类型的组件，ReactMount.render在执行过程中会执行HOC组件的render函数，在遇到jsx语法 return会执行步骤2转成react element，接着执行Demo组件的render函数，遇到jsx语法执行步骤1转成react element，最终经过复杂的渲染过程渲染到页面。

2.4 HOC 缺点

很难复用逻辑，会导致组件树层级很深

如果使用HOC或者render props方案来实现组件之间复用状态逻辑，会很容易形成“嵌套地狱”。

业务逻辑分散在组件的各个方法中
难以理解的class

对于非前端专业的同学，理解class的成本会有点高

3 render props

3.1 render props 简介

官方介绍：

“render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。

具有 render prop 的组件接受一个函数，该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。

注意：render prop 是因为模式才被称为 render prop ，你不一定要用名为 render 的 prop 来使用这种模式。事实上，任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”

3.2 render props demo演示（基于v15.3.0）

这里我定义了一个可以接收props func函数的Demo组件，在外部使用Demo组件时传入func函数，告诉组件内部渲染成h1标签。

tips：这个用法简直像极了vue的slot插槽呀

3.3 render props 源码解析

简单理解：

当代码执行遇到jsx语法const comp = <Demo func={(name) => { return <h1>{name}</h1> }} />，会调用React.js的createElement方法，其实调用的是ReactElement.js中createElement方法转成react element节点。
当代码执行ReactDOM.render(comp, document.getElementById("root"))调用的是ReactDOM.render，最终返回React component类型的组件，在执行render的过程中，会调用Demo组件的render函数，遇到jsx语法return (<div>{func(this.state.name)}</div>);会执行步骤1生成element节点并返回，当执行到func(this.state.name)，遇到jsx语法return <h1>{name}</h1>，会再次执行步骤1生成element节点并返回，最终经过复杂的渲染过程渲染到页面。

3.4 render props 缺点

缺点同高阶组件(HOC)，嵌套地狱、业务逻辑分散在各个组件、难以理解的class。

上述三种逻辑复用策略都存在一定的问题，于是官方提出了Hook。

4 Hook

4.1 Hook 简介

官方介绍：

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

4.2 Hook demo演示（基于v16.8.0）

官方提供了好几个Hook方法，包括常用的useState、useEffect、useRef、useContext，还有高级的useReducer、useMemo、useLayoutEffect方法以及自定义Hook方法。

这里，我仅演示useState、useEffect

tips: 这个跟vue3 composition api神似

4.3 Hook 源码解析

在实际的debugger过程中会发现，useState的调用分为两个阶段：

声明阶段：在首次渲染页面的过程中会触发一次useState的调用，也就是下图蓝色区域的render阶段Reconciler过程中会触发，这个蓝色区域不是本次重点，后续会有同学分享到这部分哦~

其实这一次调用是在执行Demo组件中的这行代码：const [count, setCount] = useState(0);一路追踪useState，最终定位源码：

ReactCurrentDispatcher$1.current = nextCurrentHook === null ? HooksDispatcherOnMountInDEV : HooksDispatcherOnUpdateInDEV;

详细的调用关系图如下图蓝色部分：

可以看到声明阶段：实际调用的HooksDispatcherOnMountInDEV对象的useState，然后useState又调用的最终的核心方法-mountState

调用阶段：在更新count时，也就是调用setCount时会触发useState调用。

可以看到调用阶段：实际调用的HooksDispatcherOnUpdateInDEV对象的useState，然后useState又调用了updateState，最终调用了核心方法-updateReducer，接下来会重点分析这两个阶段核心的方法里mountState和updateReducer都做了啥。

声明阶段-mountState

源码截图如下：源码拆解如下图所示：

简单理解：

创建hook对象，用于存放初始值和dispatch函数，便于调用阶段的数据更新，当执行 useState(0)，实际上是执行 mountState(0)，initialState即0赋值给memoizedState，dispatch关联内部dispatchAction函数, 最终返回[hook.memoizedState, dispatch]，也是正好对应了[count, setCount]的解构赋值，最终count被赋上了初始值，setCount也关联上了内部定义的dispatchAction。

调用阶段-updateReducer

源码截图如下：当我们点击主动触发setCount(count + 1)时，可以看下面流程图理解：最终执行的updateReducer，获取了声明阶段定义的hook对象，判断非首次更新则进入优化策略，是首次更新则会计算结果_newState的值，然后更新hook对象的新计算值memoizedState，初始值baseState、队列中记录的上一次更新的dispatch函数以及计算值，并最终返回[hook.memoizedState, dispatch]，此时count值就变更成了1。