React高级进阶教程--掌握编程“套路”，打造高质量应用

引言

当我们谈论 React 设计模式时

实际上是在谈论 “React 组件的设计模式”

• 高阶组件(HOC)
• Render Props
• 剥离有状态组件与无状态组件

以尽可能优雅的姿态，实现组件逻辑的复用

对“单一职责”和“开放封闭”这两个非常重要的设计原则有所认知

设计模式是否是万能的？

如果不是，那么对框架来说，还有没有更加深刻】彻底的解法呢？

HOC: 最经典的组件逻辑复用方式

什么是高阶组件

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

高阶组件在概念上沿袭了高阶函数

高阶函数：接收函数或者输出函数

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

高阶组件本质是一个函数

const withProps = (WrappedComponent) => {
    const targetComponent = (props) => {
        <div>
            <WrappedComponent {...props} />
        </div>
    }
    return targetComponent;
}

高阶组件是如何实现逻辑复用的？

我有一个名为 checkUserAccess 的方法

这个方法专门用来检验用户的身份是否合法

若不合法，那么一部分组件就要根据这个不合法的身份

调整自身的展示逻辑逻辑

假如说页面中的 A、B、C、D、E 五个组件需要甄别用户身份是否合法，那么这五个组件在理论上都需要先请求一遍 checkUserAccess 这个接口

Render Props: 复用逻辑的另一种思路

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

高阶组件的使用姿势是用“函数”包裹“组件”

而 render props 恰恰相反

它强调的是用”组件“包裹”函数“