React 函数式组件优化

1. React 性能优化思路

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

• 在使用类组件（class）的时候，使用的 React 优化 API 主要是：shouldComponentUpdate 和 PureComponent，都是为了减少重新 render 的次数，主要是减少父组件更新而子组件也更新的情况。

2. 函数组件优化方法

2.1 React.memo （减少 render 的次数）

可以减少重新 render 的次数，对标类组件里面的 PureComponent。

举个简单的🌰 ：

• 修改父组件 title 的时候同时传递给子组件一个 name 值。

// 父组件
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Child from './child'

function Father() {
  const [title, setTitle] = useState("父组件的title");

  return (
    <div className="Father">
      <h1>{ title }</h1>
      <button onClick={() => setTitle("父组件的title改变了")}>修改父组件的title</button>
      <Child name="父组件传递给子组件的值"></Child>
    </div>
  );
}

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

// 子组件
import React from "react";

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

export default Child;

• 首次渲染的效果如下：