PureComponent使用方法

react 专栏收录该内容
15 篇文章 2 订阅

React.PureComponent

React.PureComponent 类似于 React.Component。它们的不同之处在于React.Component 没有实现 shouldComponentUpdate(),但是 React.PureComponent实现了它。采用对属性和状态用浅比较的方式。

import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {number: 0}
  }
  add = () => {
    this.setState({
      number: 0
    })
  }
  componentDidUpdate () {
    console.log('组件更新')
  }
  render() { 
    return (
      <div>
        <span>{this.state.number}</span>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
}
 

export default App;

如果React组件的 render() 函数在给定相同的propsstate下渲染为相同的结果,在某些场景下你可以使用 React.PureComponent 来提升性能。

import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {number: 0}
  }
  add = () => {
    this.setState({
      number: 0
    })
  }
  componentDidUpdate () {
    console.log('组件更新')
  }
  render() { 
    return (
      <div>
        <span>{this.state.number}</span>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
}
 

export default App;

React.memo

React.memo 是一个高级组件. 它和React.PureComponent类似,只是在函数组件使用,而不是类组件

import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {number: 0}
  }
  add = () => {
    this.setState({
      number: 0
    })
  }
  render() { 
    return (
      <div>
        <MyButton2 number={this.state.number}></MyButton2>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
}

let MyButton2 = React.memo(MyButton)
function MyButton (props) {
  console.log('组件更新')
  return <span>{props.number}</span>
}

export default App;

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值