阅读 54

React知识点总结

react 性能优化 以及 hooks,setState(批量更新等)

看自己写的两篇文章

生命周期

redux(动机,解决了什么问题,怎么使用)

为什么 props 要保持不可变性

  • 这是react的官方规则,组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props,所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
  • 如果我们改变了传入的props,组件显示的形态变得不可预测,很难跟踪到数据的变化。
  • 跟踪不可变数据的变化相对来说就容易多了。如果发现对象变为新对象,那麽我们就可以说对象发生改变了,组件就可以发生更新。

什么是纯函数,为什么很重要

定义

  • 1.如果函数调用的参数相同,则永远返回相同的结果。不依赖于程序执行期间函数外部任何状态或数据的变化,只依赖于其输入参数。
  • 2.函数不会产生任何副作用,例如网络请求,Dom 操作等。

好处

  • 维护和重构代码变得更加容易,不用担心没有考虑到副作用等因素的影响
  • 可以产生更加高质量的代码,测试容易
  • 可缓存,因为纯函数对于相同的输入有相同的输出,所以可以将结果进行存储,减少运算过程,提高性能。

构造函数调用 super 并将 props 作为参数传入的作用是啥?

在 super() 被调用之前,子类是不能使用 this 的,ES6 要求,子类的构造函数必须执行一次super函数,否则 JavaScript 引擎会报错。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

react事件机制

df
<div onClick={this.handleClick.bind(this)}>点我</div>
复制代码

React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。 这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事件。

除此之外,冒泡到document上的事件也不是原生的浏览器事件,而是由react自己实现的合成事件。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法,而不是调用event.stopProppagation()方法。

合成事件的目的

  • 合成事件首先抹平了浏览器之间的兼容问题,兼容所有浏览器,更好的跨平台;
  • 方便 react 统一管理事务机制。
  • 对于原生浏览器事件来说,浏览器会给监听器创建一个事件对象。如果你有很多的事件监听,那么就需要分配很多的事件对象,造成高额的内存分配问题。但是对于合成事件来说,有一个事件池专门来管理它们的创建和销毁,当事件需要被使用时,就会从池子中复用对象,事件回调结束后,就会销毁事件对象上的属性,从而便于下次复用事件对象。

高阶组件是什么,优缺点

定义

高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。高阶组件(HOC)就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件

优点 逻辑服用、不影响被包裹组件的内部逻辑。

缺点 维护比起hooks要复杂,嵌套过深,代码难以理解。

适用场景

  • 代码复用,逻辑抽象
  • 渲染劫持,权限控制

那些会触发react的重新渲染,重新渲染render会做些什么

  • setState()方法被调用,state发生了改变
  • 传入的props发生改变
  • 父组件重新渲染,即使传入子组件的 props 未发生变化,那么子组件也会重新渲染,进而触发 render

重新渲染时做的事情

  • 会对新旧 VNode 进行对比,也就是我们所说的Diff算法。

  • 对新旧两棵树进行一个深度优先遍历,这样每一个节点都会一个标记,在到深度遍历的时候,每遍历到一和个节点,就把该节点和新的节点树进行对比,如果有差异就放到一个对象里面

  • 遍历差异对象,根据差异的类型,根据对应对规则更新VNode

下面的问到至少说的出来

单项数据流

Fiber的理解

  • react15版本的时候,更新页面的时候,React会遍历应用的所有节点,找出需要变动的节点,然后同步更新它们。这个过程期间, React 会占据浏览器资源,这会导致用户触发的事件得不到响应,并且会导致掉帧,导致用户感觉到卡顿

fiber原理

  • 运算切割为多个步骤,分批完成。也就是说在完成一部分任务之后,将控制权交回给浏览器,让浏览器有时间进行页面的渲染。等浏览器忙完之后,再继续之前未完成的任务。

  • 把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会。

  • 灵活的暂停、继续和丢弃执行的任务

虚拟dom的理解

本质上来说,虚拟dom也是一个javascript对象,通过对象的方式来描述真实dom结构。数据发生变化前,虚拟dom都会缓存一份,变化之时,现在的虚拟dom会与缓存的虚拟dom进行比较。react内部封装了diff算法,通过这个算法来进行比较,渲染时修改改变的变化,原先没有发生改变的通过原先的数据进行渲染,减少修改DOM的重绘重排次数,提高渲染性能。

Virtual DOM厉害的地方并不是说它比直接操作 DOM 快,而是说不管数据怎么变,都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较,从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时,遍历两棵树进行各种比对还是相当耗性能的,特别是在顶层 setState 一个微小的修改,默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法,但是这个过程仍然会损耗性能.

diff算法的理解

diff 算法探讨的就是虚拟 DOM 树发生变化后,生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异,将更新补丁作用于真实 DOM,以最小成本完成视图更新。

key值的作用

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。

在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染此外,React 还需要借助 Key 值来判断元素与本地状态的关联关系。

文章分类
前端
文章标签