Component与PureComponent对比解析
题外话
有啥不对的请多多指教，研究的不算很深，记录为了分享，也为了博采众长，完善知识。
官方文档
React.PureComponent 与 React.Component很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。
官方解释也很容易理解，React.PureComponent比React.Component中多实现了一个方法，就导致了在组件数据发生变化时，React.PureComponent会先进行和上一次的比较，如果相同，就不会再继续更新了。
口说无凭，还是得通过代码来体会。
对比
先看两者相同得地方 代码如下
class Box1 extends React.Component {
render() {
console.log('Box1 update');
return <div>Box1: {this.props.count}</div>;
}
}
class Box2 extends React.PureComponent {
render() {
console.log('Box2 update');
return <div>Box2: {this.props.count}</div>;
}
}
先制作2个对比的组件Box1与Box2， 然后制作一个父组件引入其中,并设置一个方法
export default () => {
const [count, setCount] = React.useState(1);
console.log('parent update');
return (
<div>
<Box1 count={count}/>
<Box2 count={count}/>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
此时，点击button按钮的时候，上述2个Box组件都会进行更新。
这也是最基础的组件更新。
取消外部数据引入
class Box1 extends React.Component {
render() {
console.log('Box1 update');
return <div>Box1</div>;
}
}
class Box2 extends React.PureComponent {
render() {
console.log('Box2 update');
return <div>Box2</div>;
}
}
export default () => {
const [count, setCount] = React.useState(1);
console.log('parent update');
return (
<div>
<Box1 />
<Box2 />
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
取消Box组件内对外部count的引入
此时页面更新为
此时会发现只有Box1重新刷新了一遍，而Box2未重新加载组件，也就是PureComponent内部做了浅比较相同的不会进行更新。
为什么被称为浅比较
浅比较是指对值类型进行比较，而稍微复杂一点的引用类型（Object）,就无法进行判断了，react内部的更新都是浅比较。
export default () => {
const [count, setCount] = React.useState({ num: 1 });
console.log('parent update');
const click = () => {
const newCount = count;
newCount.num = count.num + 1;
setCount(newCount);
console.log('update:', count)
};
return (
<div>
<Box1 />
<Box2 />
<button onClick={click}>+1</button>
</div>
);
};
此时，父组件内部的count为对象类型，此时进行更新时，页面不会触发任何更新，父组件也不会进行刷新（由于是引用类型，newCount发生数据变化时，count其实已经发生变化，但是页面并不会有任何的反应）。
由图可见，子组件和父组件并没有进行刷新，均未打印。
小知识点
const的不可变定义也是只对于值类型而言，对于引用类型，还是依然可变。上述代码云清并不会报错。
说明
上述的一切代码都是建立在父组件自身更新的基础上子组件才会刷新，如果我将setCount(count + 1)改为setCount(count + 0),那么，父组件本身不会进行刷新，子组件也就理所当然的不会有任何变化。
另类的不更新
这里的父组件刷新带动子组件刷新有一种例外的情况。代码如下
const Parent = ({ children }) => {
const [count, setCount] = React.useState(1);
console.log('parent update');
return (
<div>
{children}
<button onClick={() => setCount(count + 1)}>box2</button>
</div>
);
};
export default () => {
return (
<Parent>
<Box1 />
<Box2 />
</Parent>
);
};
将父组件抽离出来，子组件以children的形式引入。 此时页面点击发生的变化为
会发现不管怎么点击，只有Parent组件进行刷新，子组件全部都毫无反应。
这个原因我不得而知，可能是因为react生成dom的时候问题，这个等待深入学习后再来解答。
总结
PureComponent多用于抽取本地缓存制作的下拉框组件或者是根据数据字典生成的展示组件，这种固定的组件基本在用户使用时不会有任何的变化，只在登录和页面加载最开始生成。
以上就是Component与PureComponent解析的详细内容，更多关于Component PureComponent解析的资料请关注脚本之家其它相关文章！
相关文章
![详解react-webpack2-热模块替换[HMR]](//img.jbzj.com/images/xgimg/bcimg0.png)
这篇文章主要介绍了详解react-webpack2-热模块替换[HMR]， 小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
React+ResizeObserver实现自适应ECharts图表
ResizeObserver是JavaScript的一个API,用于监测元素的大小变化,本文主要为大家介绍了React如何利用ResizeObserver实现自适应ECharts图表,需要的可以参考下2024-01-01
在使用React搭建用户界面时,组件可以分为两类：受控组件和费受控组件这两种组件在数据处理方式上有着显著的差异,理解它们的区别对于构建高效和可控的React应用至关重要,本文将深入探讨这两种组件的定义、特点以及使用场景,并通过示例代码帮助你更加清晰地理解它们2025-01-01
要实现useState的背后原理,则需要深入了解状态是如何在函数组件的渲染周期中保持和更新的,本文将通过一段代码简单阐述useState钩子函数的实现思路,希望对大家有所帮助2023-12-12
条件渲染在React开发中非常重要的功能,它允许开发人员根据条件控制渲染的内容,在创建动态和交互式用户界面方面发挥着至关重要的作用,本文总结了常用的的条件渲染方法,需要的朋友可以参考下2024-01-01
React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧2024-04-04
这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
React Hooks是在React 16.8版本新增的特性，在我看了React官网和一些博客对React Hook的讲解后还是觉得没有get到本质。本篇博客通过手动实现useState()来了解Hook的原理和本质。阅读此篇博客的前提是你要知道一些 React Hooks的基本用法和使用规则，不然会看得云里雾里。2021-05-05
这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下2020-05-05
全栈轻量级搭配之Remix Prisma Sqlite使用分析
这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
![详解react-webpack2-热模块替换[HMR]](http://img.jbzj.com/images/xgimg/bcimg0.png)
最新评论