好客租房85-组件性能优化（5纯组件）-阿里云开发者社区

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

2022-06-13 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

图片.png

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

前言

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

面试题什么是纯组件（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 (<div>
             <button onClick={this.onClick}>click me</button>
             <Son value={this.state.value}/>
             </div>  );    
  }}
export default Father;

子组件

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