react修改props_React 函数式组件性能优化指南

前言

目的

本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。

面向读者

有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇文章会让你有种熟悉的感觉。

React 性能优化思路

我觉得 React 性能优化的理念的主要方向就是这两个：

1. 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。

2. 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。

在使用类组件的时候，使用的 React 优化 API 主要是：shouldComponentUpdate和 PureComponent，这两个 API 所提供的解决思路都是为了减少重新 render 的次数，主要是减少父组件更新而子组件也更新的情况，虽然也可以在 state 更新的时候阻止当前组件渲染，如果要这么做的话，证明你这个属性不适合作为 state，而应该作为静态属性或者放在 class 外面作为一个简单的变量 。

但是在函数式组件里面没有声明周期也没有类，那如何来做性能优化呢？

React.memo

首先要介绍的就是 React.memo，这个 API 可以说是对标类组件里面的 PureComponent，这是可以减少重新 render 的次数的。

可能产生性能问题的例子

举个 ?，首先我们看两段代码：

在根目录有一个 index.js，代码如下，实现的东西大概就是：上面一个 title，中间一个 button(点击 button 修改 title)，下面一个木偶组件，传递一个 name 进去。

// index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from './child'

function App() {
    
const [title, setTitle] = useState("这是一个 title")

return (
<div className="App"><h1>{ title }h1><button onClick={() => setTitle("title 已经改变")}>改名字button><Child name="桃桃">Child>div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在同级目录有一个 child.js

// child.js
import React from "react";

function Child(props) {
    
console.log(props.name)
return <h1>{props.name}h1>
}

export default Child

当首次渲染的时候的效果如下：

image-20191030221223045

并且控制台会打印"桃桃”，证明 Child 组件渲染了。

接下来点击改名字这个 button，页面会变成：

image-20191030222021717