react学习- react.memo 与 react.pureComponent

react 三大流行框架之一  前段时间在公司用react写了个小活动 感觉有点迷糊 遂看了下源码和翻阅了一些资料

React.Memo(component, is?)  两个参数，component参数react的元素组件 is可选的参数 比较函数  

它的用途是比较前一次的props 来决定是否渲染   也可以自定义比较函数来决定组件是否render 

function is (oldProps, newProps){
   if(oldProps.count === newProps.count){
      return true  // 不进行重新render
}
return false  
}
// 比较是浅比较  Object.is()

react.pureComponent  也是用来优化应用的  它规定使用pureComponent组件的所有自组件必须使用pureComponent ，pureComponent继承了Component， 其内部实现了componentshouldUpdate(preProps, preState)  

使用pureComponent 组件要注意的事项

class A extends React.PureComponent{
    constructor (props) {
     super (props)
     this.state = {}
    }
    render () {
      return (
       

        
{count}
        
 {this.props.onclick()}}> button
       
      )
    }
}

function B (props) {
 function onclick (){
  console.log('123')
 }
 return (
   {onclick()}} />
 )
}

虽然使用了PureComponent但是render函数还是每次都执行  因为onclick箭头函数每次非配的地址是不同  导致props每次都在边 虽然内容没有变   解决方也好解决  直接

function B (props) {
 function onclick (){
  console.log('123')
 }

 return (
  
 )
}

使用pureComponent 不要在render函数把props复杂类型的数据赋值