react 组件渲染控制

场景：子组件不进行任何操作，但父组件操作更新将会导致子组件也进行了重新更新

解决重复渲染组件方式：

shouldComponentUpdate
PureComponent
memo 只可以是纯函数

场景代码如下： ComponentTemplate组件每次执行点击事件都将会重新渲染Template组件

import React, { Component, } from 'react'
class Template extends Component {render() {console.log('是否重复执行')return null}
}
export default class ComponentTemplate extends Component {state = {count: 0}render() {return (<div><button onClick={() => {this.setState({ count: this.state.count + 1 })}}>按钮</button><Template name='abc' /></div>)}
}

解决不重复渲染方式1 shouldComponentUpdate

import React, { Component, } from 'react'
class Template extends Component {shouldComponentUpdate(nextProps, nextStatus) {if (nextProps.name === this.props.name) {return false}return true}render() {console.log('是否重复执行')return null}
}
export default class ComponentTemplate extends Component {state = {count: 0}render() {return (<div><button onClick={() => {this.setState({ count: this.state.count + 1 })}}>按钮</button><Template name='abc' /></div>)}
}

解决不重复渲染方式2 PureComponent

缺点1 ：只能数据层级1层例如传入的数据是object，更改object.key内的数据将失效
缺点2 ：函数传入将失效，除非使用类属性

import React, { Component, PureComponent } from 'react'
class Template extends PureComponent {render() {console.log('是否重复执行')return null}
}
export default class ComponentTemplate extends Component {state = {count: 0}//callback = () => {  类属性//}render() {return (<div><button onClick={() => {this.setState({ count: this.state.count + 1 })}}>按钮</button><Template name='abc' />      {/* <Template name='abc' callback={() => { }} /> 将会重复渲染*/}</div>)}
}

解决不重复渲染方式3 仅可以是纯函数使用 memo组件不重复执行当子组件接收值未变化则不重新渲染

import React, { Component, memo } from 'react'
const Template = memo(function Template(props) {console.log('是否重复执行')return <div>{props.name}</div>
})
export default class ComponentTemplate extends Component {state = {count: 0}callback = () => {}render() {return (<div><button onClick={() => {this.setState({ count: this.state.count + 1 })}}>按钮</button><Template name='abc' callback={this.callback()} /></div>)}
}

react 组件渲染控制相关推荐

安装inde.html使用babel,reactjs – 使用Babel Standalone进行单个React组件渲染,仅使用index.html和Component...
Noob与React在这里.我正在玩React.我有一个简单的组件在我的component.js中呈现.它包含在我的index.html文件中.我在头部包含了React,ReactDOM和babel的 ...
不挂载组件渲染_让你的 React 组件性能跑得再快一点「实践」
作者:天泽转发链接:https://www.zoo.team/article/react-render 性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配 ...
React组件——类组件
一.组件的概念使用组件的方式进行编程,可以提高开发效率,提高组件的复用性.提高代码的可维护性和可扩展性 React定义组件的方式有两种类组件:React16.8版本之前几乎React使用的都是类组 ...
react 组件连动效果_记一个缓动水柱React动画组件的初次尝试
写完意识到这是第一篇,算是前言吧... 以后在zhihu写点东西...就当是博客好了,个人观点和体会而已,不求高大上,但求回头看的时候能够让以后的自己瞧不起. 背景:写React也一年多了,从一开始的 ...
react学习笔记（二）编写第一个react组件
继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react'; //在此文件中引用React,以及reat的组件类 impo ...
react页面数据过多怎么办_性能！！让你的 React 组件跑得再快一点，收藏
性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新.大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常. ...
react避免子组件渲染_如何与React一起使用正确的方法来避免一些常见的陷阱
react避免子组件渲染 One thing I hear quite often is "Let's go for Redux" in our new React app. It ...
深入了解React组件重新渲染的条件和生命周期
React组件rerender的真正条件当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true,那么当前组件会rerender 组件的props中的任一 ...
React- jsx的使用可以渲染html标签或React组件
React 的 JSX 使用大.小写的约定来区分本地组件的类和 HTML 标签.既渲染html标签需要使用小写字母开头的标签名而渲染本地React组件需要使用大写字母开头的标签名注意: 由于 JSX ...

react 组件渲染控制

场景：子组件不进行任何操作，但父组件操作更新将会导致子组件也进行了重新更新

react 组件渲染控制相关推荐

最新文章

热门文章