react性能最佳优化实战

pureComponnt+immutable.js库

redux中间价原理和数据管理

antd里面webpack中bable怎样实现组件的按需加载

webpack，是借助的loader完成的jxs代码转化，还是bable

webpack打包的时候，借助脚手价将代码转化成化es5，在浏览器中使用。

vue是webpack里面借助webpack中vue-loader来转化
而react是借助 babel babel-preset-react

虚拟dom，为什么提升了性能

就是js对象，

之前的真实dom的有（事件绑定，属性，方法），模拟的比较简单，比较起来比较快。
diff：一层节点有问题，就不比对了，该放弃就放弃，优化算法比对次数
key相同直接复用

diff怎么写的的源码

React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
React 通过分层求异的策略，对 tree diff 进行算法优化；
React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；
React 通过设置唯一 key的策略，对 element diff 进行算法优化；
建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；
建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。

setState怎么用，传什么

//不会实现一次加一，setState是异步的，会实现合并，最终一次可以加到9，
     this.setState({
         age:this.state.age++;
     })
//而采用函数式调用，避免不必要的坑
     this.setState((preState)=>{
          age:++ preState;
     })
//在回调函数中处理，要不然拿到的是之前的，会有坑，vue用的是nextTick
     this.setState((preState)=>{
          age:++ preState;
     },()=>{
         this.refs.input.value
     })

refs的业务场景

场景

如渲染图片的宽高

写法

要写成函数形式，有助于react销毁组件，重新渲染，有效清空数据，防止内存泄露

componentDidmount(){
    this.elem
}
render(){
    return <div ref = ((div)=>{ this.elem=div })>
}

内存泄露问题

会报错，组件销毁时没有销毁，它是挂在在window上的事件要调用this

高阶函数

设计模式中，组合优于继承，可维护性比继承要好很多高阶组件就是一个函数，是对组件的包装，返回一个新的组件，通过在里面传入不同的参数，来实现不同效果，实现不同业务上的差异会出现高级地狱的问题，解决问题，react新版本hook

受控组件和非受控组件

受控组件：根据数据的改变非受控组件：就是那dom数据，而不是受数据的驱动那个更好：受控组件，react时数据驱动的组件

this指向

render(){
    return <div onClick={()=>{console.log(this)}}>div</div>
}

为什么代码中的this指向他自己本身？

这设计到了this是一个作用域链的问题，没找到，就找到了自己本身。

采用bind，apply等改变this指向，是在 constructor(props){} 里面，使函数的引用保持一份，不做无谓的渲染。

hooks

函数式组件只接受props （重点） function(props){ return <div /> } hook的出现，可以使用state

函数组件怎么做性能优化

函数组件和普通组件的性能

高：函数，没有生命周期，没有构造class的过程，可以直接执行函数
di:props改变，整个就改变le,可以采用react.memo()去解决。

反应memo（）是记忆功能组件的一个很好的工具。如果应用正确，当下一个道具与前一个道具相同时，它可以防止无用的重新渲染。在记忆使用道具作为回调的组件时，请采取预防措施。确保在渲染之间提供相同的回调函数实例。

componentDidMonut

ssr原理

react-sage，什么事sideEffects

react，jquery，vue怎样共存

避免ajax数据重新请求

用react-redux进行状态管理

react-router4是组件思想，可以到处放，router3是放在配置页面里写的，相对比较灵活

reselect充当vue的computent（缓存数据提升性能）

异步组件

reloadable库 import('').then require.ensure

react