一、PureComponent纯组件

纯组件用于避免不必要的渲染（render函数），提高效率

1、任务列表

//Task.js
import React, { Component } from 'react'
import PropTypes from "prop-types"
import './Task.css'export default class Task extends Component {static propTypes = {name: PropTypes.string.isRequired,isFinish: PropTypes.bool.isRequired}render() {return (<li className={this.props.isFinish?"finish":""}>{this.props.name}</li>)}
}

//TaskList.js
import React, { Component } from 'react'
import PropTypes from "prop-types"
import Task from "./Task"export default class TaskList extends Component {static propTypes = {tasks: PropTypes.arrayOf(PropTypes.shape({name: PropTypes.string.isRequired,isFinish: PropTypes.bool.isRequired})).isRequired}render() {const ts = this.props.tasks.map((it,i)=><Taskkey={i}{...it}/>)return (<div>{ts}</div>)}
}

//TaskContainer.js
import React, { Component } from 'react'
import TaskList from "./TaskList"export default class TaskContainer extends Component {state = {tasks: []}componentDidMount() {const ts = [];for(let i = 1;i <= 10;i ++){ts.push({name: `任务${i}`,isFinish: Math.random()>0.5})}this.setState({tasks: ts})}render() {return (<div><TaskList tasks={this.state.tasks} /></div>)}
}

这是一个任务列表组件，TaskContainer开始渲染时组件没有任务数据，所以TaskList渲染时没有得到任务列表；当时TaskContainer得到10个任务数据后，setState触发该组件重新渲染，TaskList也就重新渲染并有了任务列表，所以Task组件就渲染了10次，此时并没有发现什么问题。

2、添加任务

此时我们增加一个添加任务的组件

//AddTask.js
import React, { Component } from 'react'export default class AddTask extends Component {state = {name: ''}render() {return (<div><input type="text" value={this.state.name}onChange={e=>{this.setState({name: e.target.value})}}/><button onClick={()=>{this.props.onAdd && this.props.onAdd({name: this.state.name,isFinish: false})this.setState({name: ''})}}>添加任务</button></div>)}
}

//TaskContainer.js
import React, { Component } from 'react'
import TaskList from "./TaskList"
import AddTask from "./AddTask"export default class TaskContainer extends Component {state = {tasks: []}componentDidMount() {const ts = [];for(let i = 1;i <= 10;i ++){ts.push({name: `任务${i}`,isFinish: Math.random()>0.5})}this.setState({tasks: ts})}render() {console.log('TaskContainer.js',this.state.tasks.length);return (<div><AddTaskonAdd={newTask=>{this.setState({tasks:[...this.state.tasks,newTask]})}}/><TaskList tasks={this.state.tasks} /></div>)}
}

此时我们发现TaskContainer组件前后得到数据后，AddTask组件也会重新渲染，这是不必要的。

接着清空控制台，并添加一条新的任务。

发现我们仅增加了一条新的任务，但是前面的10条任务同样重新渲染了，这会影响浏览器的渲染效率。

3、性能优化

优化：如果一个组件的状态和属性，都没有发生变化，那么重新渲染是没有必要的

//Task.js
import React, { Component } from 'react'
import PropTypes from "prop-types"
import './Task.css'export default class Task extends Component {static propTypes = {name: PropTypes.string.isRequired,isFinish: PropTypes.bool.isRequired}export function ObjectEqual(obj1,obj2){for(let prop in obj1){if(!Object.is(obj1[prop],obj2[prop])){return false;}}return true;}shouldComponentUpdate(nextProps,newState){console.log("Task是否重新渲染");if(ObjectEqual(this.props,nextProps) && ObjectEqual(this.state,newState)){return false}return true;}render() {console.log("Task.js")return (<li className={this.props.isFinish?"finish":""}>{this.props.name}</li>)}
}

PureComponent是一个组件，如果一个组件继承自PureComponent，该组件的shouldComponentUpdate会自动优化，对属性和状态进行浅比较，没有变化则不进行渲染。

1.使用PureComponent

只要将继承的父组件改成PureComponent即可

//Task.js
import React, { PureComponent } from 'react'
import PropTypes from "prop-types"
import './Task.css'
import {ObjectEqual} from "../utils/helper"export default class Task extends PureComponent {static propTypes = {name: PropTypes.string.isRequired,isFinish: PropTypes.bool.isRequired}shouldComponentUpdate(nextProps,newState){console.log("Task是否重新渲染");if(ObjectEqual(this.props,nextProps) && ObjectEqual(this.state,newState)){return false}return true;}render() {console.log("Task.js")return (<li className={this.props.isFinish?"finish":""}>{this.props.name}</li>)}
}

注意：PureComponent 是进行的浅比较

为了效率，尽量使用PureComponent
要求不要改动之前的状态，永远都是创建新的状态进行赋值
有一个三方库，Immutable.js，制作不可变对象
函数组件使用React.memo制作纯组件

//Task.js
export default function Task(props) {console.log("Task.js")return (<div><li className={props.isFinish?"finish":""}>{props.name}</li></div>)
}
Task.propTypes = {name: PropTypes.string.isRequired,isFinish: PropTypes.bool.isRequired
}
React.memo(Task);

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！

react学习—PureComponent纯组件相关推荐

React中的纯组件
React中的纯组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent,通常只需要继承React.PureComponent就可以定义一个纯组件. ...
React学习二（组件详解）
文章目录一.React数据流二.组件的特性 1.属性(props) (1)React Props默认值与标签属性限制 (2)应用-React组件切分与提取 2.状态(state) (1)state ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
react学习—高阶组件HOC
高阶组件HOC 一.高阶组件HOC 1.高阶组件 2.属性传递 3.使用属性传递 4.注意一.高阶组件HOC HOF:Higher-Order Function, 高阶函数,以函数作为参数,并返回一 ...
React 学习之父子组件传值
父组件可以通过props.原型方法向子组件通信,子组件可以通过回调函数.事件冒泡向父组件通信. 1. 父组件向子组件通信父组件向子组件传值之props方法: 父组件 import React fro ...
react之纯函数、函数组件、类组件、纯组件
一.纯函数 Pure Function 定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数. - 特点: 1.函数的返回结果只依赖与它的参数(同一个输入只 ...
react学习笔记（完整版 7万字超详细）
1. React基础 1-1. react-调试插件安装浏览器右上角 - ===> 更多工具 ===> 扩展程序 ==> 开启开发者模式 ==> 将调试插件包拖拽进来即可 1 ...
react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

react学习—PureComponent纯组件

PureComponent纯组件