一.react生命周期
1.组件载入阶段:
componentWillMount:组件即将被装载、渲染到页面上,只调用1次
componentDidMount:组件真正在被装载,可以拿到真实DOM执行操作,只调用1次
2.运行中状态:
componentWillReceiveProps(nextProps):组件将要接收到新属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候(返回 false,接收数据后不更新,阻止 render ,后面的函数不会继续执行,默认为true)
componentWillUpdate:组件即将更新不能修改属性和状态
componentDidUpdate: 组件已经更新
3.销毁阶段:
componentWillUnmount:组件即将销毁,这时候可以销毁绑定的事件监听或者定时器什么的
二.react在哪个生命周期做优化
shouldComponentUpdate,这个方法用来判断是否需要调用 render 方法重绘 dom。
因为 dom 的描绘非常消耗性能,如果我们能在这个方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。
三.setState为什么是异步的
1.保证内部的一致性
因为props是要等到父组件渲染过后才能拿到,也就是不能同步更新,state出于统一性设成异步更新。
2.性能优化
举例说你正在一个聊天窗口输入,如果来了一条新消息又要render,那就会阻塞你的当前操作,导致延迟什么的。
3.支持state在幕后渲染
异步可以使state在幕后更新,而不影响你当前旧的页面的交互,提升用户体验。
说明:setstate在原生事件,setTimeout,setInterval,promise等异步操作中,state会同步更新。
四.Redux的实现流程
用户页面行为触发一个Action,然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。Reducer 会返回新的 State 。每当state更新之后,view会根据state触发重新渲染。
五.react-redux的实现原理
react-redux是一个轻量级的封装库,它主要通过两个核心方法实现:
Provider:从最外部封装了整个应用,并向connect模块传递store。
Connect:
1、包装原组件,将state和action通过props的方式传入到原组件内部。
2、监听store tree变化,使其包装的原组件可以响应state变化
六.redux中间件的理解
理解:中间件就是要对redux的store.dispatch方法做一些改造,以实现其他的功能。
背景:Redux 的基本做法,是用户发出 Action,Reducer 函数立刻算出新的 State,View 重新渲染,但这是做同步。
而如果有异步请求时,那就不能知道什么时候获取的数据有存进store里面,因此此时需要在请求成功时返回一个标识或状态,并在此时再触发action给reducer传值。
因此,为了解决异步的问题,就引入了中间件的概念。
作用: redux-thunk 帮助你统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,对 component 调用没有影响。