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 Hooks常用场景的使用，根据使用场景分别进行举例说明，帮助你认识理解并可以熟练运用 React Hooks 大部分特性，感兴趣的可以了解一下2021-04-04
这篇文章主要为大家介绍了React18从0实现dispatch update流程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了原生实现一个react-redux的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
基于Webpack5 Module Federation的业务解耦实践示例
这篇文章主要为大家介绍了基于Webpack5 Module Federation的业务解耦实践示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
本文主要介绍了React+Node实现大文件分片上传、断点续传秒传思路，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
组件的生命周期就是React的工作过程，就好比人有生老病死，自然界有日月更替，每个组件在网页中也会有被创建、更新和删除，如同有生命的机体一样2022-12-12
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop2022-11-11
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.这篇文章主要介绍了ReactJs快速入门教程(精华版)的相关资料,需要的朋友可以参考下2016-11-11
在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例2023-06-06
这篇文章主要介绍了React+Electron快速创建并打包成桌面应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
最新评论