react梳理

1. react的生命周期

如果有defaultprops会先初始化，之后经过constructor初始化state，之后会走进componentwillmount进行初始化，在componentwillmount阶段setState不会引起rerender，之后进行render首次渲染，在此过程中render经过编译后生成createElement的形式生成以js组成的虚拟dom结构，通过reactDom.render方法将其插入到根节点后，页面挂在完成后，会触发componentdidmount，初始化完成，在react中是单向数据流传输，组件之间依靠props进行数据传递，如果最上层组件的props发生改变，会触发componentwillreceiveprops周期钩子，如果state发生变化，都会向下触发shouldcomponentupdate周期钩子，当为true时才会向下进行更新，触发componentwillupdata钩子，再次render，此时需要通过diff算法将前一次的dom和当前dom进行比较，更新完成后会触发componentdidupdata钩子，最后会触发componentwillunmount钩子卸载

1. diff算法

1. 为什么使用diff算法？

因为直接操作dom会比较耗性能，每次有一个地方更改就要从上到下进行一次渲染，这个过程中干就需要再次发送请求然后再进行重绘回流等操作

1. diff好处？

通过diff算法将dom节点以creteElement的形式进行js操作会比直接操作dom要快，

1. diff流程

diff过程中以同层对比的方式进行比较，查看是否有原先存在的节点，按照index和lastindex的形式进行对比，对于index<lastindex的元素进行移动，并将index置为lastindex的值供下次再比较；对于新增的元素查看原先是否存在，不存在将其直接插入，删除元素也是同样的遍历旧元素将其删除

如果两个组件不相同，将删除整个组件再新增，而不是移动

1. react-redux中connect怎么拿到store中的值

react是单向数据流传递，通过provider将store传递到context属性中去，connext中通过this.context.store.getstate()的方式可以取到state，connect中的mapstatetoprops，mapdispatchtoprops、parentProps等组合成一个新的props传递到包装组件里去，实现直接从props里面取到store

1. 高阶组件是什么，高阶组件的好处

高阶组件就是传入一个组件返回一个新组件，高阶组件可以提高函数复用性

1. 中间件有什么特殊的地方

redux中触发store.dispatch（action）更改store的方式主要是同步实现的，如果action是一个异步动作没办法立即执行，此时如果我们希望reducer接收到这个异步action后立即执行期间做一些事情就需要使用到中间件。

Redux通过applymiddware方法来加载中间件方法中包含了middleware以及compose，具体过程叙述：

每个middleware中将state和dispatch作为参数传入，返回一个next方法，调用next方法返回一个以action作为参数的函数，将next（action）作为返回值，至此表示该中间件操作完成，每个中间件进行相同操作后将返回结果合并到一个chain数组中去，最后通过compose函数将chain数组中每个中间件返回的next（action）合并成一个作为最终的dispatch,和state一同返回给reducer进行操作。

参考：https://segmentfault.com/a/1190000018347235

 

1. 怎么把reducer合成一个

当有多个reducer之后，可以通过调用combineReducer这个函数来进行合并，内部原理有点像reduce，将每个reducer的属性名以对象形式传入成一个reducers，通过object.key获取到每一个属性名，再进行reduce将total[key]赋值成reducer（state[key],action），最后通过createStore创建store

1. axios原理

axios是基于promise的向后台发起ajax请求的，在此过程中对它进行了拦截器、转json等封装，完善请求。

主要功能是拦截器，在发起请求时对其进行axios.interceptors.request.use传递两个函数，一个进行请求前的配置，一个进行请求失败的操作，收到响应之后对其进行axios.Interceptors.response.use传递两个参数，第一个参数对响应参数进行操作，第二个参数对响应出错进行操作

取消接口请求可以使用cancleToken进行操作

自定义axios。Var instance=axios.creatre(

{baseURL：‘url‘,

timeoud:设置时间，默认值为0，

methods:

})

    https://www.kancloud.cn/yunye/axios/234845

1. react性能优化

使用react-loadable进行代码分割

给每个dom都配key值进行匹配

利用shouldcomponentdidupde对不需要更改数据不触发更新

 

1. react hooks的useState

以函数组件的方式写入也可以使用state，usestate中接收状态和一个函数，在usestate参数里可以写入状态的默认值，通过函数来更改状态值。

 

1. state和props的区别

props可以用于组件之间的传递，但是props是只读的不可修改

state是每个组件特有属性，保存组件状态值，通过setstate可以对值进行修改

 

1. setstate时发生了什么？

它的内部其实是有一个数据队列，每次setState时数据并没有同步更新，内部的isbatchingUpdates标志位进行控制是同步还是异步更新，默认值为false进行同步更新，batchupdate函数会更改状态值为true将setstate的数据放到队列中，等到close复位后一次性执行完全部的操作。

       针对上述问题，可以通过setState的第二个参数来进行同步更新，第二个参数接受一个函数

 

1. redux是什么？什么时候使用redux？使用redux和context相比有什么好处？redux的流程？

1、redux相当于数据集中管理仓库，能够对组件需要的参数进行集中存储管理。

2、由于react是单向数据流，他会通过props流向其他组件，当嵌套过深，更改数据会找到他们相同的祖父组件再一级一级流向自身进行更改，这样会高度耦合，而且影响速率，通过redux可以做一个集中数据存储，都从redux中获取书局。

3、context也是可以配合provider直接将数据汇聚到顶层，然后可以从this.context中获取到数据，那和redux相比有什么优缺点？

4、context中没有action来触发变更，state状态每次都会变，数据不安全；

context没有办法使用到中间件。

1. fiber机制。

为什么需要。原先的数据加载以及数据变更会同步一层一层一口气跑完所有的周期、diff等，当需要更新的组件太多都这样同步更新，调用时间过长，长期占用主线程阻塞后续进程，会导致页面卡顿。

通过fiber可以将同步进程转为异步，每执行完一次更新调度器根据优先级查看是否有需要立即去做的事情

将周期分为调和和commit阶段，调和阶段包括了componentwillmount\componentwillupdate\shouldcomponentupdata\componentwillreceiveprops四个，找出需要更新的dom;

commit阶段包括了componentdidmount\componentdidupdate\componentwillunmount三个，一次性更新dom。

在fiber中A在时间分片时间内无论是否执行完成都要将控制权移交查看是否有优先级较高的时间需要处理，如果有就要去处理之后再回来，重新开始处理A。因此，调和阶段容易被打断，也容易被调用多次，从而引起bug，调和阶段钩子除了shouldcomponentupdate以外不建议被使用，fiber16增加了两个api，使用getderivedStateFromProps（nextprops，prevstate）来替代componentwillreceiveprops在每次初始化以及更新时调用，可以用来比较数据是否变化并更新为新数据。通过getSnapshotbeforeupdata替代componentwillupdate，在更新dom前被调用以获取最新的dom数据。