{ console.log("Rendered:", title); return

{title}

; }); export default function App() { const [count, setCount] = useState(0); const normalStyle = { backgroundColor: "teal", color: "white", }; const memoizedStyle = useMemo(() => { return { backgroundColor: "red", color: "white", }; }, []); return ( <> ); } ```">
极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 当多次重复点击按钮时,以下三个 Heading 是如何渲染的

更多描述

import React, { memo, useMemo, useState } from "react";

const Heading = memo(({ style, title }) => {
 console.log("Rendered:", title);

 return <h1 style={style}>{title}</h1>;
});

export default function App() {
 const [count, setCount] = useState(0);

 const normalStyle = {
   backgroundColor: "teal",
   color: "white",
 };

 const memoizedStyle = useMemo(() => {
   return {
     backgroundColor: "red",
     color: "white",
   };
 }, []);

 return (
   <>
     <button
       onClick={() => {
         setCount(count + 1);
       }}
     >
       Increment {count}
     </button>
     <Heading style={memoizedStyle} title="Memoized" />
     <Heading style={normalStyle} title="Normal" />
     <Heading title="React.memo Normal" />
   </>
 );
}

Issue

欢迎在 Issue 中交流与讨论: Issue 512 (opens new window)

"Memoized"只在第一次渲染时打印一次,后续点击不刷新。 "Normal"会在每次渲染时打印。 "React.memo Normal”只会在第一次渲染时打印一次。

使用useMemo时,依赖数组为null,这意味着只会在首次渲染时,对memoizedStyle进行一次计算,后续不再计算。 在渲染`组件时,React.memo会先判断前后状态

memoizedStyle === memoizedStyle  //true

由于状态始终是一个对象,自身始终是与自身相等的,所以不会导致重新渲染。

没有使用useMemo时,每次点击,对<Heading />组件传入属性,React.memo判断

 {
    backgroundColor: "teal",
    color: "white",
  } ===  {
    backgroundColor: "teal",
    color: "white",
  }  // false

每次都会传入一个新的对象,由于React.memo对prop进行浅比较,两个对象总是不相等的。 如果需要进行深比较,可以对React.memo传入一个深比较函数作为第二个参数。

"React.memo Normal”的参数是字符串,相比对象的比较简单了很多,所以不会导致重新渲染。

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 5/14/2021, 1:48:53 PM