React为啥要用PureComponent代替Component

个人博客

公众号-React中的purecomponent

求关注

写在前面的话

之所以写这个文章，是因为现在在维护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，并不是推荐使用类组件，最好现在开始一直用函数式组件。​​