react组件知识点总结（二）

不可变数据的力量

• 总之不要直接更改state的数据
• 因为浅层比较的时候，会比较前后的数据是否变化，一但没有变化，则不会更新UI

事件总线

• 前面通过Context主要实现的是数据的共享，但是在开发中如果有跨组件之间的事件传递，应该如何操作呢？

  • 在Vue中我们呢可以通过Vue的实例，快速实现一个事件总线，来完成操作
  • 在React中，我们可以来一个使用较多的库events 来完成对应的操作

• 我们可以通过npm或者 yarn来安装events

• events常用的API

  • 创建EventEmitter的对象：eventBus对象

    • import { EventEmitter } from 'events'
      const eventBus = new EventEmitter()
      

  • 发出事件：eventBus.emit(“事件名称”,参数列表)

  • 监听事件：eventBus.addListener(‘事件名称’,监听函数)

  • 移除事件：eventBus.removeListener(‘事件名称’,监听函数)

Ref的使用

• React的开发模式中，不建议直接操作DOM原生，以下特殊的情况可能需要用到
  • 管理焦点，文本选择或者媒体播放
  • 触发轻质动画
  • 集成第三方DOM库
• 如何创建refs来获取对应的DOM呢、
  • 方式一：传入字符串
    • 使用时通过this.refs传入的字符串格式获取对应的元素
  • 方式二：传入一个对象
    • 对象是通过React.createRef()方式创建出来的
    • 使用时获取到创建的对象中的current属性就是对应的元素
  • 方式三：传入一个函数，函数回掉时候的参数就是这个DOM节点，函数体内保存了，之后就可以用

ref的类型

• ref的值根据节点的类型而有所不同
  • 当ref属性用于HTML元素的时候，构造函数中使用React.createRef() 创建的ref接收底层DOM元素作为其current属性
  • 当ref属性用于自定义class组件的时候，ref对象接收组件的挂载实例作为其current属性
  • 你不能在函数组件上使用ref属性，因为函数式组件没有实例
• 函数式组件没有实例，所以无法通过ref获取他们的实例
  • 但是某些时候，我们可能想要获取函数式组件中的某个DOM元素
  • 这个时候我们可以通过React.forwardRef，后面我们也会学习hooks中如何使用ref

认识受控组件

• 在React中HTML表单的处理方式和普通的DOM元素不太一样，表单元素通常会保存一些内部的state
• 比如下面的HTML表单元素：
  • 这处理方式是DOM默认处理HTML表单的行为，在用户点击提交的时候会提交到某个服务器，并刷新页面
  • 在React中并没有禁止这个行为，它依然是有效的
  • 但是通常情况下会使用javascript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据
  • 实现这种效果的标准方式是 使用 受控组件

受控组件基本

• 在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行 更新
• 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
  • 我们将两者结合起来，使React的state成为“唯一数据源”；
  • 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作；
  • 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
• 由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。
• 由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

这种并不像vue上的双向数据绑定，他的数据流其实是单向的。

非受控组件

• React推荐大多数情况下使用 受控组件 来处理表单数据：
  • 一个受控组件中，表单数据是由 React 组件来管理的
  • 另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理
• 如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。
  • 我们来进行一个简单的演练：
  • 使用ref来获取input元素
• 在非受控组件中通常使用defaultValue来设置默认值
• 同样，<input type="checkbox">和 <input type="radio">支持 defaultChecked，<select>和 <textarea>支 持 defaultValue

认识高阶函数

• 什么是高阶组件呢？
• 相信很多同学都听说过，也用过高阶函数，它们非常相似，所以我们可以先来回顾一下什么是 高阶函数
• 高阶函数的维基百科定义：至少满足以下条件之一：
  • 接收一个或多个函数作为输入
  • 输出一个函数
• javascript中比较常见的高阶函数有 filter map reduce
• 那么什么是高阶组件呢？
  • 高阶组件的英文是 Higher-Order Component ，简称HOC
  • 官方定义：高阶组件是参数为组件，返回值为新组件的函数
• 我们可以进行如下的解析
  • 首先，高阶组件本身不是一个组件，而是一个函数
  • 其次，这个函数的参数是一个组件，返回值也是一个组件

高阶组件的定义

const EnhancedComponent = higherOrderComponent(WrappedComponent)

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

• function higherOrderComponent(WrapperComponent){
  	class NewComponent extends PureComponent {
          render(){
              return <WrapperComponent />
          }
      }
      NewComponent.displayName = 'CoderWang'
      return NewComponent
  }
  

• 组件名称问题：

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

应用一：props的增强

• // 不修改源代码的情况下，添加新的props
  
  function enhanceProps (WrapperCpn,otherProps) {
      return props => <WrapperCpn {...props} {...otherProps} />
  }
  

• // 利用高阶组件来共享Context
  function withUser (WrapperCpn){
      return props => {
          return (
          <UserContext.Consumer>
              {
                  value => {
                      return <WrapperCpn {...props} {...value} />
                  } 
              }
          </UserContext.Consumer>
        )
      }
  }
  

应用二：渲染判断鉴权

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

  • 某些页面是必须用户登录成功才能进行进入
  • 如果用户没有登陆成功，那么直接跳转到登陆页面

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

  • function loginAuth(Page){
    	return props = >{
            if(props.isLogin){
                return <Page />
            }else {
            return <LoginPage />
        }
        }
    }
    

应用三-生命周期劫持

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

function logRenderTime(Wrapper){
    return class extends PureComponent {
        UNSAFE_componentWillMount(){
            this.begin = Date.now()
        }
        
        componentDidMount(){
            this.end = Date.now()
            const interval = this.end - this.begin
            console.log(`${WrapperCpn.name}渲染时间：${interval} `)
        }
        
        render(){
            return <WrapperCpn {...this.props} />
        }
    }
}

高阶组件的意义

• 我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理
• 其实早期的React有提供组件之间的一种复用方式 mixin 目前已经不再建议使用
  • Mixin可能会相互依赖，相互耦合，不利于代码维护
  • 不同的Mixin中的方法可能会相互冲突
  • Mixin非常多时，组件是可以感知到的，甚至还要为其做相关的处理，这样给代码造成滚雪球式的复杂性
• 当然，HOC也有自己的一些缺陷
  • HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这样调试变得非常困难
  • HOC可以劫持props，在不遵守约定的情况下也可能造成冲突
• Hooks的出现，是开创性的，它解决了很多React之前存在的问题
  • 比如this指向的问题，比如hoc相关的知识

高阶组件的补充

ref的转发

• 前面我们说过通过ref绑定DOM，官方推荐的方式ref绑定一个通过 React.createRef()创建的对象，然后通过这个对象的current的属性拿到绑定的DOM
• 但是由于函数式组件没有实例，因此无法给函数组件绑定一个ref，这个时候我们就需要通过高阶组件对ref进行一个转发，绑定到函数组件中的某个DOM元素上
• 官方给我们封装好了这个高阶组件，他就是React.forwardRef（原函数组件，ref参数）
• 这样只需要给函数组件中的DOM绑定上这个ref参数即可

portals的使用

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

fragment

• 在之前的开发中，我们呢总是在一个组件的返回内容的包裹一个div元素
• 我们又希望可以不渲染这样一个div应该怎么操作呢？
  • 使用Fragment
  • Fragment 允许你将子列表分组，而无需向DOM添加额外节点
• React还提供了Fragment的短语法
  • 它看起来像空标签<></>
  • 但是，如果我们呢需要在Fragment中添加key，那么就不能使用短语法

StrictMode

• StrictMode 是一个用来突出显示应用程序中潜在问题的工具。
  • 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI；
  • 它为其后代元素触发额外的检查和警告
  • 严格模式检查仅在开发模式下运行； 它们不会 影响 生 产 构 建 ；
• 可以为应用程序的仍和部分开启严格模式
• 检查对象
  • 识别不安全的生命周期
  • 使用过期的ref API
  • 使用废弃的findDOMNode方法
  • 检查意外的副作用
    • 这个组件的constructor会被调用两次；
  • 检测过时的context API