个人博客
求关注
写在前面的话
之所以写这个文章,是因为现在在维护react的旧项目,用的是类组件,所以不得不使用pureComponent,而现在开发都是用函数式组件,所以不建议用类组件开发。
优点
在React的官网中,明确地指出了pureComponent与component的区别
PureComponent 类似于 Component,但是当 props 和 state 与之前保持一致时会跳过重新渲染。
在实际开发中,很少出现state保持一致的情况,即使是与redux搭配使用时,通过setState来设置页面刷新的这种骚操作也会很少出现。所以我们更关注的是props的更新导致组件的刷新。
代码示例
接下来用一个例子,演示当传入组件内部的props与之前的props保持一致的时候时.pureComponent如何阻止页面的渲染。
下面的代码中,我们的a组件componentA是使用了pureComponent的,而b组件则是一个普通的component。当我们在父级组件中更新state时,观察两个组件时候是否会重新render。
首先构建一个父级的组件
import React, { useState } from "react";
import "./App.css";
import Acomponent from "./components/Acomponent";
import Bcomponent from "./components/Bcomponent";
function App() {
const [propsData, setPropsState] = useState({ name: "before" });
const updateProps = () => {
setPropsState({ name: "updated" });
};
return (
<div className="App">
<Acomponent />
<hr />
<Bcomponent />
<hr />
<button
onClick={() => {
updateProps();
}}
>
父组件的点击按钮,点击更新state
</button>
</div>
);
}
export default App;
其中,a组件使用的是pureComponent,而b组件使用的是component。
接下来,贴上组件a的代码
import { PureComponent } from "react";
class Acomponent extends PureComponent {
render() {
console.log("a组件更新了");
return <div>A 组件的内容</div>;
}
}
export default Acomponent;
以及只是使用普通的component的组件b
import { Component } from "react";
class Bcomponent extends Component {
render() {
console.log("b组件更新了");
return <div>B 组件的内容</div>;
}
}
export default Bcomponent;
而在父组件中,当我们点击父组件中的按钮时候。
所期待的一幕出现了,只有b组件被更新了,而a组件并不会被刷新页面,这也验证了所提及的,当props的值没有变化的时候,组件不会被重新渲染。
最后的废话
这个文章主要是让大家了解为啥我们项目里面,用PureComponent,而不用component,并不是推荐使用类组件,最好现在开始一直用函数式组件。