React 函数式组件性能优化指南，帮你解决90%的问题

return

{props.name}

}

export default React.memo(Child)

通过 React.memo 包裹的组件在 props 不变的情况下，这个被包裹的组件是不会重新渲染的，也就是说上面那个例子，在我点击改名字之后，仅仅是 title 会变，但是 Child 组件不会重新渲染（表现出来的效果就是 Child 里面的 log 不会在控制台打印出来），会直接复用最近一次渲染的结果。

这个效果基本跟类组件里面的 PureComponent效果极其类似，只是前者用于函数组件，后者用于类组件。

React.memo 高级用法

默认情况下其只会对 props 的复杂对象做浅层对比(浅层对比就是只会对比前后两次 props 对象引用是否相同，不会对比对象里面的内容是否相同)，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

function MyComponent(props) {

/* 使用 props 渲染 */

}

function areEqual(prevProps, nextProps) {

/*

如果把 nextProps 传入 render 方法的返回结果与

将 prevProps 传入 render 方法的返回结果一致则返回 true，

否则返回 false

*/

}

export default React.memo(MyComponent, areEqual);

此部分来自于 React 官网[1]。

如果你有在类组件里面使用过 `shouldComponentUpdate()`[2] 这个方法，你会对 React.memo 的第二个参数非常的熟悉，不过值得注意的是，如果 props 相等，areEqual会返回 true；如果 props 不相等，则返回 false。这与 shouldComponentUpdate方法的返回值相反。

useCallback

---

现在根据上面的例子，再改一下需求，在上面的需求上增加一个副标题，并且有一个修改副标题的 button，然后把修改标题的 button 放到 Child 组件里。

把修改标题的 button 放到 Child 组件的目的是，将修改 title 的事件通过 props 传递给 Child 组件，然后观察这个事件可能会引起性能问题。

首先看代码：

父组件 index.js

// index.js

import React, { useState } from “react”;

import ReactDOM from “react-dom”;

import Child from “./child”;

function App() {

const [title, setTitle] = useState(“这是一个 title”);

const [subtitle, setSubtitle] = useState(“我是一个副标题”);

const callback = () => {

setTitle(“标题改变了”);

};

return (

{title}

{subtitle}

<button onClick={() => setSubtitle(“副标题改变了”)}>改副标题

);

}

const rootElement =