开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12天，点击查看活动详情

我们都知道要React的props和state改变会导致子组件的更新,因此我们需要使用一些技术手段将子组件进行缓存.而官方就提供了对组件缓存的三种方式.

剑客React.memo

提到组件缓存就不得不提到React.memo了.它的用法就是将我们的函数式组件包裹起来,它会返回给我们一个组件.用途就是如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

例如:

import React from 'react'

export default React.memo(()=>{

console.log("没有使用Memo的情况下")

return <></>

})


import "./styles.css";

import Memo from "./Memo";

import React, { useState } from "react";

export default function App() {

const [name, setName] = useState("张三");

return (

<div className="App">

<Memo />

{name}

<button onClick={() => setName(() => "李四")}>按钮</button>

</div>

);

}

我们在没有使用React.memo的时候点击按钮之后会打印四次(在非严格模式下会打印两次),

在我严格模式下用React.memo包裹起来之后,只会打印初始两次.

React.memo只会检查props的变化,默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

那我们如果在所有组件外面都套一层React.memo会用么? 想象会美好,现实很骨感. 这样做可能会加重React的负担,因为缓存的工作还是得依靠React来做.

三剑客之一=>React.memo

剑客React.memo