好客租房85-组件性能优化（5纯组件）-CFANZ编程社区

好客租房85-组件性能优化（5纯组件）

好客租房85-组件性能优化（5纯组件）_点击事件

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷

前言

最好的种树是十年前其次是现在

好客租房85-组件性能优化（5纯组件）_点击事件_02

面试题什么是纯组件（react）

React 有一个特点，那就是当父组件重新 render 的时候，无论传入子组件的 props 有没有变化，子组件都会重新 render。但是这种 render 很多情况下是没有必要的。”

代码案例

父组件

import React, { Component } from 'react';import Son from './Son';class Father extends Component {    constructor(props) {        super(props);        this.state = { value:0 }    }    onClick=()=>{        this.setState({            value : this.state.value+1        })    }    render() {         console.log('我是爸爸组件')        return (                                
  );    }}export default Father;

子组件

import React, { Component,PureComponent } from 'react';
class Son extends Component {    constructor(props) {        super(props);        this.state = {  }    }    render() {         console.log('我是儿子组件')        return (            {this.props.value}        
  );    }}

子组件改成 PureComponent，即，当检测到 props 没有变化的时候，并不重新渲染。但是当这个点击事件开始触发的时候就会发生变化，这个是无法改变的 PureComponent是控制子组件状态不改变的方式之一

当第一次改变的时候打印的值

//我是父亲组件我是儿子组件我是父亲组件我是儿子组件

当点击事件的时候打印的值

//我是父亲组件我是父亲组件我是父亲组件我是父亲组件

0 条评论