1、react性能优化方案?

1.重新shouldComponentUpdate方法,来避免不必要的操作:
我们可以通过shouldComponentUpdate方法返回的布尔值,来判断当前组件是否需要更新。
比较当前的state和之前的state是否相同,也可以判断某个值更新了来更新组件。

2.使用production版本的react.js

3.使用key值来帮助react识别列表中所有子组件的变化。

  

2、什么是虚拟dom?

真实的dom在js内部做了一个缓存,每次有数据更改的时候,react内部先使用diff 算法,对dom结构进行对比,找到需要增删改查的dom节点,然后对真是dom进行更新。这样就大大减少了操作dom的次数。

 diff算法

diff针对不同类型的节点,会判定原来的节点需要卸载,并用新的节点来装载原来的节点的位置。如果相同类型的节点,会对比这个节点类型的属性,如果节点的所有类型属性也都相同的话,那么判断这个节点不需要更新。如果不相同的话,则会判断需要更新,react会更新并重新渲染这个节点。

  

3、react组件中key值的作用?

key的作用:给每一个reactNode添加一个身份标识,方便react进行识别。
在重新渲染的过程中,如果key一样,若组件属性有所变化,则react只更新组件对应的属性,没有变化则不更新。
如果key不一样,react则先销毁这个组件,然后重新创建这个组件。

  

4、setState函数原理?

setState:异步调用。
为什么异步?
因为setState的变化,会引起页面的重绘,如果每次更新一下setState的数据,多次调用setState则会造成不必要的损失。放到异步的话,可以将多次调用放入到一个队列中,在恰当的时候统一进行更新。

setState的调用并不会立即引起state的变化。如果想要进行数据的及时更新的话,可以在setState中进行第二个参数的修改.  

this.setState((prevState) => (
  { count: prevState.count + 1 }), 
  () => {
console.log(this.state)
}

 

5、redux状态管理

store:就是保存数据的地方,包含所有对象。整个容器只能有一个store。
state:如果想要得到某个时点的数据,就要对store进行快照。这种时点的数据结合,就叫做state。
action:action是个普通对象,action用来描述当前发生的事情。改变state的唯一办法就是使用action。它会运送数据到store。
action creator:action构造函数,可以定义一个函数生成action。
store.dispatch(): 是view发出action的唯一办法。
reducer:store接收action以后,必须给一个新的state,这样view才会发生变化。这个state的变化过程叫做Reducer。
reducer是一个函数,他接收旧的state和action,返回一个新的state。
reducer最重要的特征就是,它是一个纯函数。只要是相同的输入,必定得到相同的输出结果。

  

6、react redux中间件

redux-logger:输出日志
redux-thunk:处理异步操作
redux-promise: 处理异步操作,aciton creator返回的是一个promise

  

 

posted on 2020-11-09 19:22  liumcb  阅读(128)  评论(0编辑  收藏  举报