问题描述:

在某个组件中.有可能频繁的取数据(但是数据未改变,因此不需要更新).
数据的频繁请求会触发render函数,造成性能消耗
模拟代码如下

export class CommentList extends Component {constructor(props) {super(props);this.state = {comments: []}}// 模拟频繁的获取新数据componentDidMount() {setInterval(() => {this.setState({comments:[{ body: '奇怪的栗子', author: 'odd marron'},{ body: '好吃的栗子', author: 'nice marron'}]})}, 1000)}render() {return (<div>{this.state.comments.map((c,i)=>(<Comment key={i} data={c} />))}</div>)}
}class Comment extends React.Component{console.log('render comment');render(){return (<div><p> {this.props.data.body} </p><p> --- {this.props.data.author} </p></div>)}
}

可以看到,数据在未改变时,频繁的调用render

解决方案1

React 15.3之前(无PureComponent)
使用shouldComponentUpdate
在shouldComponentUpdate中判断当前body是否和传入的数据相等.

class Comment extends React.Component{shouldComponentUpdate(nextProps) {if(nextProps.data.body === this.props.data.body &&nextProps.data.author === this.props.data.author) {return false;}return true;}render() {return (<div><p> {data.body} </p><p> --- {data.author} </p></div>);}
}

解决方案2

PureComponent解决方案
对上面代码修改后如下

import React, { Component } from 'react';// 容器组件
export class CommentList extends Component {constructor(props) {super(props);this.state = {comments: []};}componentDidMount() {setTimeout(() =>{this.setState({comments: [{ body: "奇怪的栗子" , author: "odd marron" },{ body: "好吃的栗子", author: "nice marron" }]});}, 1000)}render() {return (<div>{this.state.comments.map((c,i) => (<Comment key={i} {...c} />))}</div>);}
}
// 展示组件
class Comment extends React.PureComponent{render() {console.log('render comment');return (<div><p>{this.props.data.body}</p><p>--- {this.props.data.author}</p></div>)}
}

此时数据为改变时不更新.

注意:

使用PureComponent时,其传递的参数只能是基本类型引用或简单的非多层嵌套对象
原因见下面PureComponent源码:

import shallowEqual from './shallowEqual'
import Component from './Component'export default function PureComponent(props, context) {Component.call(this, props, context);
}PureComponent.prototype = Object.create(Component.prototype);
PureComponent.prototype.constructor = PureComponent;
PureComponent.prototype.isPureReactComponent = true;
PureComponent.prototype.shouldComponentUpdate = shallowCompare;function shallowCompare (nextProps, nextState) {return !shallowEqual(this.props, nextProps) ||!shallowEqual(this.state, nextState);
}export default function shallowEqual(objA, objB) {// 比较引用地址if(objA === objB){return true}// 只检查一层if(typeof objA !=='object' || obja === null || typeof objB !== 'objB' || objB === null) {return false}var keysA = Object.keys(objA);var keysB = Object.keys(objB);if(keysA.length !== keysB.length ){return false}for(var i = 0; i < keysA.length; i++ ){if(!objB.hasOwnproperty(keysA[i]) || objA[keysA[i]] !== objB[krysA[i]] ){return false;}}return true;
}

PureComponent 对shouldComponentUpdate进行设置.
比较引用地址然后比较第一层…
因此使用PureComponent时,应注意将对象结构出来使用

解决方案3

React.memo (React v16.6.0以上)
React.memo是个高阶函数
更改上面Comment

const Comment = React.memo((props) => {console.log('render comment');return (<div><p>{props.body}</p><p> --- {props.author}</p></div>)
});

react --- render持续调用解决方案相关推荐

react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
[react] render方法的原理你有了解吗？它返回的数据类型是什么？
[react] render方法的原理你有了解吗?它返回的数据类型是什么? render的第一个参数通过babel转为React.createElement,后者根据参数类型的不同调用不同的内部方法来 ...
react render相关【类组件、函数组件】
[类组件] 大概就是如果是class的写法,并且extends React.component 就要手动写render [函数组件] 如果是const App = ()=> {} 那么就酸函数组 ...
TypeScript 3.0下react默认属性DefaultProps解决方案
TypeScript 3.0下react默认属性DefaultProps解决方案参考文章: (1)TypeScript 3.0下react默认属性DefaultProps解决方案 (2)https: ...
ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...
[react] render在什么时候会被触发？
[react] render在什么时候会被触发? 在 React 中,只要执行了 setState 方法,就一定会触发 render 函数执行: 组件的 props 改变了,不一定触发 render ...
[react] render函数中return如果没有使用()会有什么问题？
[react] render函数中return如果没有使用()会有什么问题? 我们在使用JSX语法书写react代码时,babel会将JSX语法编译成js,同时会在每行自动添加分号(:),如果retu ...
Jenkins持续发布解决方案
Jenkins持续发布解决方案参考文章: (1)Jenkins持续发布解决方案 (2)https://www.cnblogs.com/facethesea/p/7978598.html (3)htt ...

react --- render持续调用解决方案

问题描述:

解决方案1

解决方案2

注意:

解决方案3

react --- render持续调用解决方案相关推荐

最新文章

热门文章