React高阶组件详解

风不识途
1,684 阅读6分钟

React高阶组件

高阶组件

1.认识高阶函数

  • 什么是高阶组件呢？它和高阶函数非常相似，我们可以先来回顾一下什么是: 高阶函数

  • 高阶函数的维基百科定义(至少满足以下条件之一)：

    • 接受一个或多个函数作为输入
    • 输出一个函数

  • JavaScript中比较常见的filter、map、reduce都是高阶函数

  • 那么什么是高阶组件呢?

    • 高阶组件的英文是 「Higher-Order」 「Components」，简称为 HOC
    • 官方的定义: 「高阶组件是参数为组件, 返回为新的组件」

  • 我们可以进行如下的解析:

    • 「首先, 高阶组件本身不是一个组件, 而是一个函数」
    • 「其次, 这个函数的参数是一个组件, 返回值是一个组件」

2.高阶组件的定义

  • 「高阶组件调用」类似于:

  • 高阶函数的编写过程类似于这样

  • 组件的名称问题：

    • 在ES6中，「类表达式中」类名是可以省略的
    • 组件的名称都可以通过displayName来修改
❝

高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式

高阶组件在一些React第三方库中非常常见：

  • 比如redux中的connect (后续会讲到)
  • 比如react-router中的withRouter (后续会讲到)
❞

3.高阶组件应用场景

应用一: props的增强

  • 「不修改原有代码的情况下，添加新的props」
  • 「利用高阶组件来共享Context」

应用二: 渲染判断鉴权

  • 在开发中，我们可能遇到这样的场景：

    • 某些页面是必须用户登录成功才能进行进入；

    • 如果用户没有登录成功，那么直接跳转到登录页面；

  • 这个时候，我们就可以使用高阶组件来完成鉴权操作

应用三: 生命周期劫持

  • 我们也可以利用高阶函数来劫持生命周期，在生命周期中完成自己的逻辑：

4.高阶组件的意义

  • 我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理

  • 利用高阶组件可以完成多个组件中的共同功能

  • 其实早期的React有提供组件之间的一种复用方式是mixin，「目前已经不再建议使用」:

    • Mixin 可能会相互依赖，相互耦合，不利于代码维护
    • 不同的Mixin中的方法可能会相互冲突
    • Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性

  • 当然，(高阶组件)HOC 也有自己的一些缺陷：

    • HOC需要在原组件上进行「包裹」或者「嵌套」，如果大量使用HOC，将会产生非常多的「嵌套」，这「让调试变得非常困难」

    • HOC可以劫持props，在不遵守约定的情况下也可能造成冲突

  • Hooks的出现，是开创性的，它解决了很多React之前的存在的问题

  • 比如this指向问题、比如hoc的嵌套复杂度问题等等

4.ref的转发(获取函数式组件DOM)

  • 在前面我们学习ref时讲过，ref「不能应用于函数式组件」：
    • 因为「函数式组件没有实例」，所以「不能获取到对应的组件对象」
  • 但是，在开发中我们可能想要「获取函数式组件中某个元素的DOM」，这个时候我们应该如何操作呢?
    • 方式一：直接传入ref属性 (错误的做法)
    • 「方式二：「通过」forwardRef高阶函数」


Portals

Portals的使用

  • 某些情况下，我们「希望渲染的内容独立于父组件」，甚至是「独立于当前挂载到的DOM元素中」(默认都是挂载到id为root的DOM元素上的)
  • Portal提供了一种将子节点渲染到存在于父组件之外的 DOM 节点
    • 参数一: child 是任何可渲染的 React 子元素, 例如一个元素，字符串或 fragment；
    • 参数二: container 是一个DOM 元素
    • ReactDOM.createPortal(child, container)
  • 通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点
  • 然而，有时候将子元素插入到 DOM 节点中的不同位置也是有好处的


Fragment

Fragment的使用

  • 在之前的开发中，我们「总是在一个组件中」返回内容时「包裹一个div根元素」

  • 我们「希望可以不渲染这样根元素div」应该如何操作呢？

    • 使用Fragment

    • Fragment允许你将子列表分组, 无需向 DOM 天添加额外节点

  • React还提供了Fragment的「短语法」:

    • 「短语法」使用: <></>

    • 下拉查看

    • 注意: 如果我们需要在Fragment中添加属性或者key, 那么就不能使用短语法



StrictMode

StrictMode 介绍

  • StrictMode 是一个用来突出显示应用程序中潜在问题的「工具」

    • 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI
    • 它为其后代元素触发额外的检查和警告
    • 严格模式检查仅在开发模式下运行；它们不会影响生产构建

  • 可以为应用程序的任何部分启用严格模式：

    • 不会对 Header 和 Footer 组件运行严格模式检查
    • 但是，ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查

严格模式检查的是什么？

「到底检测什么呢?」

  1. 识别不安全的生命周期

  2. 使用过时的ref API

  3. 使用废弃的findDOMNode方法

    • 在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了

  4. 检查意外的副作用

    • 这个组件的 constructor 会被调用两次
    • 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用
    • 在生产环境中，是不会被调用两次的

  5. 检测过时的context API

    • 早期的Context是通过static属性声明Context对象属性，通过getChildContext返回Context对象等方式来使用Context的
    • 目前这种方式已经不推荐使用，大家可以自行学习了解一下它的用法

    脑图

avatar
文章
阅读
粉丝