【React系列三】—React学习历程的分享

一、组件实例核心---Refs

通过定义 ref 属性可以给标签添加标识

字符串形式的Refs

这种形式已经不再推荐使用，官方不建议使用

https://zh-hans.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

回调形式的Refs

javascript 复制代码

<script type="text/babel">
  class Demo extends React.Component {
    showData = () => {
      const { input1 } = this
      alert(input1.value)
    }
    render() {
      return (
        <div>
          <input
            ref={(c) => {
              this.input1 = c
            }}
            type="text"
            placeholder="点击按钮提示数据"
          />
          &nbsp;
          <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        </div>
      )
    }
  }

  ReactDOM.render(<Demo />, document.getElementById('test'))
</script>

关于回调函数形式的Refs的执行次数，官方描述如下：

TIP

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

即内联函数形式，在更新过程中 ref 回调会被执行两次，第一次传入 null ，第二次传入 DOM 元素。若是下述形式，则只执行一次。但是对功能实现没有影响，因此一般也是用内联函数形式。

createRef API

该方式通过调用 React.createRef 返回一个容器用于存储节点，且一个容器只能存储一个节点

事件处理

React 使用自定义事件，而非原生 DOM 事件，即 onClick、onBlur ：为了更好的兼容性
React 的事件通过事件委托方式进行处理：为了高效
通过 event.target 可获取触发事件的 DOM 元素：勿过度使用 ref

当触发事件的元素和需要操作的元素为同一个时，可以不使用 ref

二、组件通信

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。
在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。
为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯。

组件生命周期

生命周期钩子函数存在于类组件中，详细生命周期介绍请查看官方文档

State & 生命周期 -- React

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等
组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
钩子函数的作用：为开发人员在不同阶段操作组件提供了实际

生命周期的三个重要的钩子函数

render ：初始化渲染和更新渲染
componentDidMount ：进行初始化，如开启定时器、发送网络请求、订阅消息
componentWillUnmount ：进行收尾，如关闭定时器、取消订阅消息

组件复用

复用的是组件操作state的逻辑方法

props模式

render 是一个函数，当做 props 传递到组件当中，并在此组件中调用此函数拿到render 返回的内容
把 prop 是一个函数并且告诉组件要渲染什么内容的技术叫做 render props 模式

高阶函数（HOC）

目的：实现状态逻辑复用
采用包装/装饰模式
手机：获取保护功能
手机壳：提供保护功能
高阶组件就相当于手机壳，通过包装组件，增强组件功能

作用：

复用逻辑：高阶组件更像是一个加工 react 组件的工厂，批量对原有组件进行加工，包装处理。我们可以根据业务需求定制化专属的 HOC,这样可以解决复用逻辑。

强化 props：这个是 HOC 最常用的用法之一，高阶组件返回的组件，可以劫持上一层传过来的 props,然后混入新的 props,来增强组件的功能。代表作 react-router 中的 withRouter。

赋能组件：HOC 有一项独特的特性，就是可以给被 HOC 包裹的业务组件，提供一些拓展功能，比如说额外的生命周期，额外的事件，但是这种 HOC，可能需要和业务组件紧密结合。典型案例 react-keepalive-router 中的 keepaliveLifeCycle 就是通过 HOC 方式，给业务组件增加了额外的生命周期。

控制渲染：劫持渲染是 hoc 一个特性，在 wrapComponent 包装组件中，可以对原来的组件，进行条件渲染，节流渲染，懒加载等功能，后面会详细讲解，典型代表做 react-redux 中 connect 和 dva 中 dynamic 组件懒加载。

三、严格模式

strictMode

用来突出显示应用程序潜在问题的工具
与 Fragment 一样，StrictMode 不会渲染任何可见的 UI
它为其后代元素触发额外的检查和警告
严格模式检查仅在开发模式下运行；他们不会影响生产环境
可以为应用程序的任何部分开启严格模式，用 React.StrictMode 包起来即可，会对所有的后代生效

四、虚拟DOM和Diff算法

Virtual DOM 是以对象的方式来描述真实 dom 对象的，那么在做一些 update 的时候，可以在内存中进行数据比对，减少对真实 dom 的操作减少浏览器重排重绘的次数，减少浏览器的压力，提高程序的性能，并且因为 diff 算法的差异比较，记录了差异部分，那么在开发中就会帮助程序员减少对差异部分心智负担，提高了开发效率。

虚拟 dom 好多这么多，渲染速度上是不是比直接操作真实 dom 快呢？并不是。虚拟 dom 增加了一层内存运算，然后才操作真实 dom，将数据渲染到页面上。渲染上肯定会慢上一些。虽然虚拟 dom 的缺点在初始化时增加了内存运算，增加了首页的渲染时间，但是运算时间是以毫秒级别或微秒级别算出的，对用户体验影响并不是很大。

key的作用

key是虚拟dom对象的标识，可以提高页面更新渲染的效率

当状态中的数据发生变化时，React 会根据新数据生成新的虚拟 DOM ，接着对新旧虚拟 DOM 进行 Diff 比较，规则如下：

旧虚拟 DOM 找到和新虚拟 DOM 相同的 key：

- 若内容没变，直接复用真实 DOM
- 若内容改变，则生成新的真实 DOM ，替换页面中之前的真实 DOM

旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key：根据数据创建新的真实 DOM ，渲染到页面
使用 index 作为 key 可能引发的问题：
若对数据进行逆序添加、逆序删除等破坏顺序的操作，会进行没有必要的真实 DOM 更新。界面效果没问题，但效率低下。
如果结构中包含输入类的 DOM（如 input 输入框），则会产生错误的 DOM 更新。
若不存在对数据逆序添加、逆序删除等破坏顺序的操作，则没有问题。

有不明白的或者有其他问题的可以评论区留言噢

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！