React--纯组件

1.纯组件说明：

• 说明：纯组件内部的对比是shallow compare（浅层对比）
• 对于值类型来说：比较两个值是否相同（直接赋值即可，没有坑）
• 对于引用类型来说：只好比较对象的引用（地址）是否相同
• 注意：state或props中属性值为引用类型时，应该创建新数据，不要直接修改原数据
• 纯组件：PureComponent与React.Componenth功能相似
• 区别：PureComponent内部自动实现了shouldComponentUpdate钩子，不需要手动比较
• 原理：纯组件内部通过分别对比前后两次props和state的值，来决定是否更新渲染组件

 

 

import React from 'react';
import ReactDOM from 'react-dom';
// import MyEditor from './components/MyEditor';
 
class App extends React.PureComponent{
    state={
        number:0
    }
    handleClick = () =>{
        this.setState(()=>{
            return{
                number: Math.floor(Math.random()*3)
            }
           
        })
    }
 
    
 
    render(){
         console.log('重新渲染')
        return(
            <div>
               <h1>随机数：{this.state.number}h1>
                <button onClick={this.handleClick}>重新生成button>
            div>
        )
    }
}

引用类型的比较：（因为两者的地址一样，无论怎样点击按钮，都不会进行渲染）

class App extends React.PureComponent{
    state={
        obj:{
            number:0
        }
    }
    handleClick = () =>{
        //错误演示
        const newObj = this.state.obj
        newObj.number = Math.floor(Math.random()*3)
        this.setState(()=>{
            return{
                obj:newObj
            }
           
        })
    }
 
    
 
    render(){
         console.log('重新渲染')
        return(
            <div>
               <h1>随机数：{this.state.obj.number}h1>
                <button onClick={this.handleClick}>重新生成button>
            div>
        )
    }
}

正确演示：

handleClick = () =>{
        //正确演示
        const newObj = {...this.state.obj,number:2}
        newObj.number = Math.floor(Math.random()*3)
        this.setState(()=>{
            return{
                obj:newObj
            }
           
        })
    }