react相关:

该博客讲解琐碎的知识点,以后遇到这些名词可以很好的理解:

react同构

什么是react同构:

一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用。简而言之, 就是服务端直出和客户端渲染的组合, 能够充分结合两者的优势,并有效避免两者的不足。

概括地说,同构就是服务端(Node)替客户端请求接口,获取到数据后,将有数据和结构的页面渲染好之后返回给客户端,这样避免了客户端页面首次渲染,同时服务端RPC比客户端请求要快。

react同构的目的是什么:

  • 性能: 通过Node直出, 将传统的三次串行http请求简化成一次http请求,降低首屏渲染时间
  • SEO: 服务端渲染对搜索引擎的爬取有着天然的优势,虽然阿里电商体系对SEO需求并不强,但随着国际化的推进, 越来越多的国际业务加入阿里大家庭,很多的业务依赖Google等搜索引擎的流量导入,比如Lazada.
  • 兼容性: 部分展示类页面能够有效规避客户端兼容性问题,比如白屏。

支持react同构的框架:

Next.js

https://www.nextjs.cn/learn/basics/create-nextjs-app?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=next-website

 

同构与SPA对比:

 

 

 

SPA:服务端替客户端请求数据,完成第一次render,将render完成之后的html页面返回给客户端,相对于客户端渲染,客户端第一次获取的html是个有数据有结构的html,结合样式文件下载客户端可以较快的看到首屏内容。

SSR:服务端Node也可以运行React解析出页面内容,并且要比客户端更快;客户端通常要在render一次之后请求数据,数据返回之后再render一次,服务端渲染可以解决客户端重复渲染问题。

 

同构与SPA时间对比:

 

 

 

以一个常见的场景为例:

进入页面,componentDidMount中请求数据,同时页面loading,请求返回后,取消loading,页面可交互。

SPA:

  1. 客户端请求页面,服务端返回SPA的html,此html不可视;(request&response)
  2. html加载完之后,去加载页面中的js;(processing)
  3. js加载完成之后开始执行;(rendering)
  4. 页面首次渲染完毕,向后端请求数据(loading)
  5. 请求返回,页面再次渲染,用户可交互(useing)

SSR:

  1. 客户端请求页面,服务端去请求数据,请求返回后渲染页面,将渲染好的html返回给客户端,此时页面可视;(request&response)
  2. html加载完之后,去加载页面中的js;(processing)
  3. js加载完成之后开始执行;(rendering)
  4. js解析完毕,用户可交互;(useing)

通过上述流程图可发现,理论上同构要比客户端渲染要快,而且体验要好。

 

fiber

fiberNode

react双缓存

react的优势

react的生命周期

react优先级管理

任务当中两大工作循环

任务是怎样被中断的怎么被执行的

messageChannel

requestIdleCallback

commitRoot是不是会中断

expirationTime排序任务的时间

workLoop

react用到的数据结构,并且运用到的位置

setState---设置数据合并队列

react事件的绑定

target

react生命周期

spa:

SPA single page application --单页面应用

react同构

什么是高阶组件

hooks

 

es6相关

es5继承

[].shift.call()

Object.creat()

非数组转化为真数组的方法

克里化函数

vue相关

vue2升级vue3需要改哪些地方

2,和3的区别

状态管理