[react] react中怎样阻止组件渲染？

Posted 2021-12-20 前端小歌谣

[react] react中怎样阻止组件渲染？

• class组件

• 使用shouldComponentUpdate生命周期，return false
• 继承React.PureComponent只要prop没有改变(浅比较)，就不会执行render函数

• 函数式组件

• 使用React.memo包裹组件函数，props没有改变就不会执行函数
• 使用React.memo包裹函数的同时传入比较函数作为第二个参数，return true，组件函数就不会执行

• 通用

• 在jsx的属性（包括事件）定义中，讲能提取的属性值提到外层，保证其引用地址不会发生改变,如下

import React from 'react';

class Child extends React.PureComponent 
    render () 
        console.log('child render')
        return <h2 style=this.props.style>Child</h2>
    


// 优化前:每次按钮的点击，都会引起Child组件的rener方法执行
class Demo extends React.Component 
    onClick = () => 
        this.setState()
    
    render () 
        return <>
            <button onClick=this.onClick>test</button>
            <Child style=color: 'red' />
        </>
    


// 优化后:按钮的点击不会引起Child组件的rener方法执行
class Demo extends React.Component 
    childStyle = color: 'red'
    onClick = () => 
        this.setState()
    
    render () 
        return <>
            <button onClick=this.onClick>test</button>
            <Child style=this.childStyle />
        </>
    


export default Demo;

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题