PureComponent: setState未触发render渲染

之前一般都是使用Component的比较多，所以对PureComponent了解比较少。最近在使用PureComponent的时候遇到一些问题，就是setState未触发render渲染的问题；

两者的区别：

它们的区别就是对于状态更新渲染DOM，判断状态是否变化的条件不同，

Component: 使用setState改变状态都会引起dom渲染，而且shouldComponentUpdate默认返回true,就算state和props没有改变也会重新渲染，降低渲染效率；

PureComponent: react优化了shouldComponentUpdate,提高了性能，就是当props或者state改变时,会引起dom重新渲染,当state为数组，对象等引用类型的时候，如果引用没有发生改变，它会认为state是没有发生改变的，也就不会重新渲染。当引用发生变化Component和PureComponent都会引起重新渲染。

import React, { PureComponent, Fragment，Component } from 'react';export default class UpsertForm extends PureComponent {
state = {arr : []
}
onClick = (val) => {const { arr } = this.state;arr.push(val);//push操作或其他操作;此时的arr已经为[true],所以setState不起作用；this.setState({ arr }); console.log(arr);//此时的arr是修改后的内容，但是没有触发render渲染
}
render(){
return(
<Fragment>
   <input onChange = {}/>
   <Button onClick = this.onClick(true)>Edit</Button>
</Fragment>
)
}
}
修改为下面：
this.setState({ arr ：[...arr] });

React15.3中心增加的PureComponent类，意思为纯组件，减少render操作的次数，可以减少shouldComponent函数使用；

原理：当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较shallowCompare：

if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps)
|| !shallowEqual(inst.state, nextState);
}

因此：易变数据不能使用一个引用；const { items } = this.state;

下面数据不会导致重新渲染：这些例子都是在原对象上进行修改，由于浅比较是比较指针的异同，所以会认为不需要进行重绘

options.push(new Option())
options.splice(idnex, 1);
options[i].age = 23;

其他陷阱可以参考：https://www.jianshu.com/p/33cda0dc316a

转载于:https://www.cnblogs.com/naniandongzhi/p/10500332.html

PureComponent: setState未触发render渲染相关推荐

Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
performActionForShortcutItem方法未触发
performActionForShortcutItem方法未触发在iOS13之前我们使用3DTouch的时候不论是通过info.plist或者代码添加快捷方式都会在用户使用时调用 - (void) ...
一个列用render渲染的时候，如果列宽度不够，内容多出的部分会被隐藏，无法显示。这时需要一个鼠标滑过提示全部内容的tip功能。...
一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示.这时需要一个鼠标滑过提示全部内容的tip功能. 渲染的函数写成如下: function renderHallName( ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函数经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
sql 触发器未触发_学习SQL：SQL触发器
sql 触发器未触发 SQL Triggers are another powerful database object we have at our disposal. In previous ar ...
sql 触发器未触发_SQL触发器–综合指南
sql 触发器未触发 Hey, folks! In this article, we will be focusing on SQL Triggers in detail. 嘿伙计! 在本文中,我们将 ...
自己封装的element-ui的table插件，实现render渲染，插槽等功能
前言: 再通过使用element-ui和iview这两种框架的table时的对比发现,iview比ele有个优点就是,他中间支持render渲染,但是iview的事件又是明显少于ele的,比如我们需要 ...

PureComponent: setState未触发render渲染

PureComponent: setState未触发render渲染相关推荐

最新文章

热门文章