React函数式组件的优化

使用React做开发的时候，当组件数目多的时候，不可避免的就需要多组件做出优化，以提高性能。对于类式组件，非常简单，只需要继承PureComponent就可以了，剩余的事情React就会帮你做好。那么，自从有了Hooks之后，在开发中更为常用的函数式组件该怎样做优化呢？

Source: Pixabay

为了把问题说清楚，先通过一个简单的例子演示一下为什么需要优化。

首先，实现了一个如下图所示的函数式组件，其中包含了父子两个组件：

其源代码很简单：

import React from 'react'
import './index.css'

export default function Parent() {

    const [name, changeName] = React.useState("Jack")

    const change = () => {
        changeName('Luke')
    }

    console.log('render parent')

    return (
        <div className="parent">
            <h4>Parent component</h4>
            <h4>My name is: {name}</h4>
            <button onClick={change}>Change name</button>
            <hr/>
            <Child/>
        </div>
    )
}

const Child = () => {

    console.log('render child')

    return (
        <div className="child">
            <h4>Child component</h4>
        </div>
    )
}

接下来，当我们单击”Change name”这个按钮的时候，会更新父组件的状态，因此会导致父组件的重新渲染。而子组件中没有任何更新，因此是不需要进行重新渲染的。

可实际情况确是：当我们单击按钮的时候，子组件也会被重新渲染：

当页面中组件数目较多时，可以想象这对效率的影响。那么，怎样才能对React的函数式组件进行优化呢？答案是使用memo。其实它最早的名字不叫memo，而是叫做pure，只不过这很容易和函数式编程中的概念混淆，因此最终被改成了memo。

首先是要引入memo：
import React,{memo} from 'react'

然后用memo把组件包裹起来，说白了就是一个高阶函数：

export default memo(function Parent() {

...

})

const Child = memo(() => {

...

})

再单击”Change name”按钮，可以看到，子组件不会再被重新渲染了。

我想之所以叫做memo，就是把函数式组件的返回值给记住了，如果下次和这次的返回值一样，就不用渲染了。

参考资料：https://blog.logrocket.com/react-pure-components-functional/