react生命周期与优化
转载自https://www.cnblogs.com/penghuwan/p/6707254.html
凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓"学而不思则罔",在不断的学习中,我开始思考这一些问题:
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
import React from 'react' class Test extends React.Component{constructor(props) {super(props);this.state = {Number:1}}//这里调用了setState但是并没有改变setState中的值handleClick = () => {const preNumber = this.state.Numberthis.setState({Number:this.state.Number})}//在render函数调用前判断:如果前后state中Number不变,通过return false阻止render调用shouldComponentUpdate(nextProps,nextState){if(nextState.Number == this.state.Number){return false}}render(){//当render函数被调用时,打印当前的Numberconsole.log(this.state.Number)return(<h1 onClick = {this.handleClick} style ={{margin:30}}>{this.state.Number}</h1>)} }
![](/assets/blank.gif)
点击标题1,UI仍然没有任何变化,但此时控制台已经没有任何输出了,没有意义的重渲染被我们阻止了!
组件的state没有变化,并且从父组件接受的props也没有变化,那它就还可能重渲染吗?——【可能!】
![](/assets/blank.gif)
import React from 'react' class Son extends React.Component{render(){const {index,number,handleClick} = this.props//在每次渲染子组件时,打印该子组件的数字内容console.log(number);return <h1 onClick ={() => handleClick(index)}>{number}</h1>} } class Father extends React.Component{constructor(props) {super(props);this.state = {numberArray:[0,1,2]}}//点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件handleClick = (index) => {let preNumberArray = this.state.numberArraypreNumberArray[index] += 1;this.setState({numberArray:preNumberArray})}render(){return(<div style ={{margin:30}}>{this.state.numberArray.map((number,key) => {return <Sonkey = {key}index = {key}number ={number}handleClick ={this.handleClick}/>})}</div>)} } export default Father
![](/assets/blank.gif)
在这个例子中,我们在父组件Father的state对象中设置了一个numberArray的数组,并且将数组元素通过map函数传递至三个子组件Son中,作为其显示的内容(标题1,2,3),点击每个Son组件会更改对应的state中numberArray的数组元素,从而使父组件重渲染,继而导致子组件重渲染
demo:(点击前)
点击1后:
控制台输出:
demo如我们设想,但这里有一个我们无法满意的问题:输出的(1,1,2),有我们从0变到1的数据,也有未发生变化的1和2。这说明Son又做了两次多余的重渲染,但是对于1和2来说,它们本身state没有变化(也没有设state),同时父组件传达的props也没有变化,所以我们又做了无用功。
那怎么避免这个问题呢?没错,关键还是在shouldComponentUpdate这个钩子函数上
![](/assets/blank.gif)
import React from 'react' class Son extends React.Component{shouldComponentUpdate(nextProps,nextState){if(nextProps.number == this.props.number){return false}return true}render(){const {index,number,handleClick} = this.props//在每次渲染子组件时,打印该子组件的数字内容console.log(number);return <h1 onClick ={() => handleClick(index)}>{number}</h1>} } class Father extends React.Component{constructor(props) {super(props);this.state = {numberArray:[0,1,2]}}//点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件handleClick = (index) => {let preNumberArray = this.state.numberArraypreNumberArray[index] += 1;this.setState({numberArray:preNumberArray})}render(){return(<div style ={{margin:30}}>{this.state.numberArray.map((number,key) => {return <Sonkey = {key}index = {key}number ={number}handleClick ={this.handleClick}/>})}</div>)} } export default Father
![](/assets/blank.gif)
![](/assets/blank.gif)
![](/assets/blank.gif)
在这种简单的情景下,只要利用好shouldComponent一切都很美好,但是当我们的state中的numberArray变得复杂些的时候就会遇到很有意思的问题了,让我们把numberArray改成
[{number:0 /*对象中其他的属性*/},{number:1 /*对象中其他的属性*/},{number:2 /*对象中其他的属性*/} ]
![](/assets/blank.gif)
import React from 'react' class Son extends React.Component{shouldComponentUpdate(nextProps,nextState){if(nextProps.numberObject.number == this.props.numberObject.number){return false}return true}render(){const {index,numberObject,handleClick} = this.props//在每次渲染子组件时,打印该子组件的数字内容console.log(numberObject.number);return <h1 onClick ={() => handleClick(index)}>{numberObject.number}</h1>} } class Father extends React.Component{constructor(props) {super(props);this.state = {numberArray:[{number:0 /*对象中其他的属性*/},{number:1 /*对象中其他的属性*/},{number:2 /*对象中其他的属性*/}]}}//点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件handleClick = (index) => {let preNumberArray = this.state.numberArraypreNumberArray[index].number += 1;this.setState({numberArray:preNumberArray})}render(){return(<div style ={{margin:30}}>{this.state.numberArray.map((numberObject,key) => {return <Sonkey = {key}index = {key}numberObject ={numberObject}handleClick ={this.handleClick}/>})}</div>)} } export default Father
![](/assets/blank.gif)
![](/assets/blank.gif)
what!!!我的代码结构明明没有任何变化啊,只是改传递数字为传递对象而已。嗯嗯,问题就出在这里,我们传递的是对象,关键在于nextProps.numberObject.number == this.props.numberObject.number这个判断条件,让我们思考,这与前面成功例子中的nextProps.number == this.props.number的区别:
![](/assets/blank.gif)
![](/assets/blank.gif)
let obj = object.assign({},{a:1},{b:1})//obj为{a:1,b:1}
![](/assets/blank.gif)
import React from 'react' class Son extends React.Component{shouldComponentUpdate(nextProps,nextState){//旧的number Object对象的number属性 == 新的number Object对象的number属性if(nextProps.numberObject.number == this.props.numberObject.number){console.log('前一个对象' + JSON.stringify(nextProps.numberObject)+'后一个对象' + JSON.stringify(this.props.numberObject));return false}return true}render(){const {index,numberObject,handleClick} = this.props//在每次渲染子组件时,打印该子组件的数字内容console.log(numberObject.number);return <h1 onClick ={() => handleClick(index)}>{numberObject.number}</h1>} } class Father extends React.Component{constructor(props) {super(props);this.state = {numberArray:[{number:0 /*对象中其他的属性*/},{number:1 /*对象中其他的属性*/},{number:2 /*对象中其他的属性*/}]}}//点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件handleClick = (index) => {let preNumberArray = this.state.numberArray//把做修改的number Object先拷贝到一个新的对象中,替换原来的对象preNumberArray[index] = Object.assign({},preNumberArray[index])//使新的number Object对象的number属性加一,旧的number Object对象属性不变preNumberArray[index].number += 1;this.setState({numberArray:preNumberArray})}render(){return(<div style ={{margin:30}}>{this.state.numberArray.map((numberObject,key) => {return <Sonkey = {key}index = {key}numberObject ={numberObject}handleClick ={this.handleClick}/>})}</div>)} } export default Father
![](/assets/blank.gif)
点击0后打印1,问题解决!
2深拷贝/浅拷贝或利用JSON.parse(JSON.stringify(data))
let a =2,b; b = a;//将a的值赋给b a = 1;//改变a的值 console.log('a =' + a);//输出 a = 1 console.log('b =' + b);//输出 b = 2,表明赋值后b,a毫无关联
![](/assets/blank.gif)
let obj1 ={name:'李达康'},obj2; obj2 = obj1;//将obj1的地址赋给obj2 obj1.name = '祁同伟';//改变obj1的name属性值 console.log('obj1.name =' + obj1.name);//输出 obj1.name = '祁同伟' console.log('obj2.name =' + obj2.name);//输出 obj2.name = '祁同伟',表明赋值后obj1/obj2形成耦合关系,两者互相影响
![](/assets/blank.gif)
![](/assets/blank.gif)
const { fromJS } = require('immutable') let obj1 = fromJS({name:'李达康'}),obj2; obj2 = obj1;//obj2取得与obj1相同的值,但两个引用指向不同的对象 obj2 = obj2.set('name','祁同伟');//设置obj2的name属性值为祁同伟 console.log('obj1.name =' + obj1.get('name'));//obj1.name =李达康 console.log('obj2.name =' + obj2.get('name'));//obj2.name =祁同伟
![](/assets/blank.gif)
【注意】
1这个时候obj1=obj2并不会使两者指向同一个堆内存中的对象了!所以这成功绕过了我们前面的所提到的对象赋值表达式所带来的坑。所以我们可以随心所欲地像使用普通基本类型变量复制 (a=b)那样对对象等引用类型赋值(obj1 = obj2)而不用拷贝新对象
2对于immutable对象,你不能再用obj.属性名那样取值了,你必须使用immuutable提供的API
- fromJS(obj)把传入的obj封装成immutable对象,在赋值给新对象时传递的只有本身的值而不是指向内存的地址。
- obj.set(属性名,属性值)给obj增加或修改属性,但obj本身并不变化,只返回修改后的对象
- obj.get(属性名)从immutable对象中取得属性值
1优点:深拷贝/浅拷贝本身是很耗内存,而immutable本身有一套机制使内存消耗降到最低
2缺点:你多了一整套的API去学习,并且immutable提供的set,map等对象容易与ES6新增的set,map对象弄混
![](/assets/blank.gif)
import React from 'react' const { fromJS } = require('immutable') class Son extends React.Component{shouldComponentUpdate(nextProps,nextState){//旧的number Object对象的number属性 == 新的number Object对象的number属性if(nextProps.numberObject.get('number') == this.props.numberObject.get('number')){return false}return true}render(){const {index,numberObject,handleClick} = this.propsconsole.log(numberObject.get('number'));//在每次渲染子组件时,打印该子组件的数字内容return <h1 onClick ={() => handleClick(index)}>{numberObject.get('number')}</h1>} } class Father extends React.Component{constructor(props) {super(props);this.state = {numberArray:fromJS([{number:0 /*对象中其他的属性*/},{number:1 /*对象中其他的属性*/},{number:2 /*对象中其他的属性*/}])}}//点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件handleClick = (index) => {let preNumberArray = this.state.numberArray//使新的number Object对象的number属性加一,旧的number Object对象属性不变let newNumber = preNumberArray.get(index).get('number') + 1;preNumberArray = preNumberArray.set(index,fromJS({number: newNumber}));this.setState({numberArray:preNumberArray})}render(){return(<div style ={{margin:30}}>{this.state.numberArray.map((numberObject,key) => {return <Sonkey = {key}index = {key}numberObject ={numberObject}handleClick ={this.handleClick}/>})}</div>)} } export default Father
![](/assets/blank.gif)
成功,demo效果同上
这篇文章实在太过冗长,不过既然您已经看到这里了,那么我就介绍解决上述问题的一种简单粗暴的方法——
4继承react的PureComponent组件
如果你只是单纯地想要避免state和props不变下的冗余的重渲染,那么react的pureComponent可以非常方便地实现这一点:
![](/assets/blank.gif)
import React, { PureComponent } from 'react' class YouComponent extends PureComponent { render() { // ... } }
![](/assets/blank.gif)
当然了,它并不是万能的,由于选择性得忽略了shouldComponentUpdate()这一钩子函数,它并不能像shouldComponentUpdate()“私人定制”那般随心所欲
转载于:https://www.cnblogs.com/nerosen/p/9952193.html
react生命周期与优化相关推荐
- react生命周期(自己的方式理解)
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载 首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
- ES6中的React生命周期详解
太长时间没写react了,有点生.重新捡起来练练手. import React,{ Component } from 'react';class Demo extends Component {con ...
- react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数 初始化阶段 getDefaultProps() 设置组件默认的 ...
- react生命周期详细介绍
目录 挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
- React、react生命周期、react生命周期运行过程、shouldComponentUpdate的用法
React.react生命周期.react生命周期运行过程 1.创建阶段 constructor(){super()console.log('执行构造函数')this.state={num:1}}UN ...
- React生命周期讲解
React生命周期图解 先上图 其实总结就是 进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载 constructor /* * constructor 其实是Es6 里面带的 ...
- React生命周期大全:
react生命周期分三个阶段: 1.初始化阶段(挂载) a.componentWillMount (): -- 用的较少,组件挂载到DOM前调用,且只会被调用一次,它代表的过程是组件已经经历了cons ...
- React生命周期(经典)
什么是生命周期函数? && 生命周期函数(钩子函数)通俗的说就是在某一时刻会被自动调用执行的函数. React生命周期(经典) 1.挂载 componentWillMount ,组件将 ...
- React生命周期理解
前言 如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩.在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为'钩子函数'.那 ...
最新文章
- 2013 vc 字体 静态文本框_vc 中mfc 的 静态文本框 的名字 的字体怎么设置
- vue+element 后台管理系统(三)树形图
- 开发人员最喜爱的十大免费的Visual Studio插件
- JavaScript学习总结(五)——Javascript中==和===的区别
- 游戏行业DDoS 6年谈:什么样的架构才可以对DDoS免疫?
- Caffe + Ubuntu 15.04/16.04 + CUDA 7.5/8.0 在服务器上安装配置及卸载重新安装(已测试可执行)
- ASP.NET Core使用Nacos SDK访问阿里云ACM
- thread java 关闭_怎么在java中关闭一个thread
- html导出pdf实例,jsPDF导出pdf示例
- 漫谈SCA(软件成分分析)测试技术:原理、工具与准确性
- Vue按需加载提升用户体验
- [转载] Java中自定义异常的声明与处理
- 芯洲 DCDC SCT2433STER参数可以P2P替代TPS5430DDAR,3.8V-40V输入,3.5A,低静态电流同步降压DCDC转换器
- 【预测模型】基于灰狼算法优化最小二乘支持向量机实现数据分类matlab代码​
- 金税盘3.1、百旺V5、UKEY数据库
- 手把手教你使用R语言做出一篇20分SCI文章的交互效应表(p for Interaction)
- 修改docker时区为北京时间
- excel导出时报错 “文件格式和扩展名不匹配,文件可能已损坏或不安全”解决办法
- 硬盘服务器与硬盘阵列,磁盘阵列和硬盘的区别是什么
- js日期转换成时间戳
热门文章
- 解决deepin更换输入法之后系统报错、出现bug的问题
- GDIplus学习--业精于勤荒于嬉,行成于思毁于随
- Java开发必须要会!java自动填写网页表单
- 个人信用报告内容组成和解读(7) ---公共信息明细
- 你好,uv变换(新手入门向聊天教程)
- 导出模型中顶点与其对应的uv坐标
- PyCharm2016.2专业版注册码
- JAVA 给定开始时间和结束时间计算天数
- 旗舰计算机系统蓝图,【求助】求助大神给这些蓝图一个参考定价
- matlab中voa,matlab 运算出错 function [w1,w2,VoA,VoB,VoC,VoD,VoE,VA1,VB1,VC1,