四、React的高阶组件
认识高阶函数(Hooks后用的较少)
- 什么是高阶组件?
- 高阶组件跟高阶函数非常相似.
- 高阶函数的百科定义:至少满足以下条件之一:
- 接收一个或多个函数作为输入
- 输出一个函数
- JavaScript中比较常见的filter,map,redue都是高阶函数
- 那么什么是高阶组件呢?
- 高阶组件(Hight-Order Components)简称HOC
- 官方的定义:高阶组件是参数为组价,返回值为新组件的函数
- 1.高阶组件 本身不是一个组件 而是一个函数
- 2.这个函数的参数是一个组件,返回值也是一个组件
高阶组件的定义
- 高阶组件的调用过程类似于这样
- 高阶函数的编写过程类似于这样
- 高阶组件并不是React API的一部分 它是基于React 的组合特性而形成的设计模式
- 高阶组件在一些React第三方库中非常常见:
- 比如redux中的connect
- 比如react-router中的withRouter
- 组件的名称问题
- 在ES6中，类表达式中类名是可以省略的
- 组件的名称都可以通过displayName来修改
开发中:应用一:props的加强
- 不修改原有代码的情况下 添加新的props
- 利用高阶组件来共享Context
开发中:应用二:渲染判断鉴权
- 在开发中,我们可能遇到这样的场景:
- 某些页面是必须用户登录成功才能进行进入
- 如果用户没有登录成功 那么直接跳转到登录页面
- 这个时候 我们就可以使用高阶组件来完成鉴权操作
开发中:应用三:生命周期劫持
- 我们也可以利用高阶函数来劫持生命周期,在生命周期中完成自己的逻辑
高阶函数的意义
- 我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理
- 早期的React有提供组件之间的一种复用方式是mixin 目前已经不再建议使用
- Mixin 可能会相互依赖 相互耦合 不利于代码维护
- 不同的Mixin中的方法可能会相互冲突
- Mixin非常多时 组件处理起来会比较麻烦 甚至还要为其做相关处理 这样会给代码造成滚雪球式的复杂
- 当然 HOC也有自己的一些缺陷
- HOC需要在原组件上进行包裹或者嵌套 如果大量使用HOC 将会产生非常多的嵌套 这让调试变得非常困难
- HOC可以劫持props 在不遵守约定的情况下也可能造成冲突
- Hooks的出现 是开创性的 它解决了很多React之前的存在的问题
- 比如this指向问题 hoc的嵌套复杂度问题等等
ref的转发
- ref不能应用于函数式组件
- 因为函数式组件没有实例 所以不能获取到对应的组件对象
- 在开发中我们可能想要获取函数式组件中某个元素的DOM 这个时候我们应该如何操作呢
- 直接传入ref属性(错误做法)
- 通过forwardRef高阶函数
五、portals和fragment
portals的使用
- 某些情况下 我们希望渲染的内容独立于父组件 甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root的DOM元素上)
- Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案
- 第一个参数(child)是任何可渲染的 React 子元素 例如一个元素 字符串或 fragment
- 第二个参数（container）是一个 DOM 元素
- 通常来说 当你从组件的 render 方法返回一个元素时 该元素将被挂载到 DOM 节点中离其最近的父节点
- 然而 有时候将子元素插入到 DOM 节点中的不同位置也是有好处的
fragment(片段)的使用
- 在之前的开发中 我们总是在一个组件中返回内容时包裹一个div元素
- 我们又希望可以不渲染这样一个div应该如何操作呢
- 使用Fragment
- Fragment 允许你将子列表分组 而无需向 DOM 添加额外节点
- React还提供了Fragment的短语法
- 它看起来像空标签 <>
- 如果我们需要在Fragment中添加key 那么就不能使用短语法
六、StrictMode严格模式
StrictMode
- StrictMode 是一个用来突出显示应用程序中潜在问题的工具
- 与 Fragment 一样 StrictMode 不会渲染任何可见的 UI
- 它为其后代元素触发额外的检查和警告
- 严格模式检查仅在开发模式下运行 它们不会影响生产构建
可以为应用程序的任何部分启用严格模式
- 不会对 Header 和 Footer 组件运行严格模式检查
- 但是 ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查
严格模式检查的是什么？
- 识别不安全的生命周期
- 使用过时的ref API
- 检测意外的副作用
- 这个组件的constructor会被调用两次
- 因为严格模式下故意进行的操作,让你来查看在这里写的一些逻辑代码被调用多次是否会产生一些副作用
- 在生产环境中,是不是会被调用两次
- 使用废弃的findDOMNode方法
- 在之前的React API中 可以通过findDOMNode来获取DOM
- 检测过时的context API
- 早期的Context是通过static属性声明Context对象属性 通过getChildContext返回Context对象等方式来使用Context的
