reactjs - 如何使用 React.memo 优化性能

Question

我使用 React 前端制作了一个国际象棋游戏。最初，任何 Action 似乎都是瞬间实现的，但是在添加了额外的功能之后，比如改变标题的背景以反射(reflect)轮到谁了(白色或黑色背景取决于它的白色 Action )和其他类似的功能，我的应用程序明显变慢了。我怀疑是这些类型的 if 语句-

const Details = props => {
    console.log(props.status);
    let [backGround, setBackGround] = useState("w details")
    const history = useHistory();

    if (props.status.white && backGround === "bl details"){
        setBackGround("w details")
    } else if (!props.status.white && backGround === "w details"){
        setBackGround("bl details")
    }

这是负责任的，因为打印 Prop 的 console.log 每次移动都会打印其语句 8 次(最初是两次)
我使用的是功能组件而不是类，我对优化的研究使我找到了以下解决方案-
React Hooks - How do I implement shouldComponentUpdate?
Should I wrap all my components with React.memo() if it is not expecting any props?
How to use shouldComponentUpdate with React Hooks?
都指向 React.memo的简单案例但我显然遗漏了一些东西，因为当我尝试实现它时，我得到的只是过多的“ Prop ”未定义错误(每次我使用 Prop 时都会出现很多错误)。
详细信息.jsx

import React, { useState } from 'react';
import "../App.css"
import DataService from '../service/DataService';
import { useHistory } from 'react-router-dom';

let [backGround, setBackGround] = useState("w details")
const Details = React.memo(props => {if (props.status.white){setBackGround("w details")} else {setBackGround("bl details")}}, (prevProps, props) => prevProps.white === props.white);  {
    console.log(props.status);
    
    const history = useHistory();

    const undo = () => {
        DataService.undo()
        .then(res => {
            console.log(res);
            props.setTheBoard(res.data);
            props.changeTurn();
        })
        .catch(err => {
            console.log(err);
            window.alert(err.response.data.errMessage)
        })
    }
    
    const restart = () => {
        DataService.restartGame()
        .then(res => {
            console.log(res);
            props.setTheBoard(res.data);
            props.changeTurn(true);
        })
        .catch(err => {
            console.log(err);
            window.alert(err.response.data.errMessage)
        })
    }

    const newGame = () => {
        history.push('/');
    }

    return ( 
        <div className={backGround} >  
            {props.status.active ? <h2>It is {props.status.playerName}'s turn</h2> :
            <div>           
                <h1 className="check">Game Over!</h1>
                <button className="tooltip" onClick={restart}>RESTART<span className="tooltiptext">Play another game vs the same opponent</span></button>
                <button className="tooltip" onClick={newGame}>NEW GAME<span className="tooltiptext">Play a game vs a different opponent</span></button>
            </div>}                          
                       
                           
            {props.status.active &&
            <div>                
                {props.isMove ? <button className="detailButtons" onClick={props.specialMove}>Special Move</button> : <button className="detailButtons" onClick={() => props.endTheGame(true)}>Forfeit</button> }
                {props.isMove ? <button className="detailButtons" onClick={props.unselect}>Unselect Piece</button> : <button className="detailButtons" onClick={() => props.endTheGame(false)}>Draw</button> } 
                {props.isMove ? <button className="detailButtons">Toggle Sidebar</button> : props.undo && <button className="detailButtons" onClick={() => undo()}>Undo</button> }                
                {props.status.check && <h1 className="check">You must move out of check!</h1>}                
            </div> }
            
        </div>
     );
}
 
export default Details;

由于此组件中的 Prop 仅在转弯更改时更改(props.status.white)，我认为这是尝试减少不必要的重新渲染的好地方，但我看到的所有解决方案都非常简单。当这样的 props 被广泛使用时，是不是就不能使用 React.memo 了？
如何在保持对 Prop 的访问的同时优化性能？

Answer 1

首先，您必须牢记在前端测试性能的一般情况。
你 从不在您检查性能时让开发工具保持打开状态，将事件放入开发工具中，这会大大降低您的应用程序的性能。
二、两者useMemo和 useCallback如果您没有详尽地渲染，不会给您任何性能改进，渲染之前可能渲染的 Prop ，最重要的是，如果您没有在自定义组件中渲染其他自定义组件，您可能不需要使用那些钩子(Hook)也。
那么，我们应该使用哪种情况useCallback和 useMemo ，提高性能？
在回答这个问题之前，您应该知道值类型和引用类型之间的区别。
值类型是不可变的，因此您可以安全地分配、修改和使用它，而不必担心所有权和垃圾收集器。
原语 文字 JS 中的类型是值类型:

let a = "Hello"
let b = a
// from here, b doesn't own a reference, because a is a value type

let c = new String("Hello")
let d = c
// now d owns c reference because c was initialized as an instance of String class

这是一个非常简单的示例，说明我们如何使用两种不同的方法创建相同的字符串。
第一个是使用文字字符串创建一个字符串。
其次使用 String 类的实例。
如果我们这样做:

a === b // true

===比较 值 的 a反对 值 在 b .
但是，当我们这样做时，会发生一些不同的事情:

c === d // true

这也返回 true但是 ===这里的工作方式不同，它不是比较值，而是比较 c 的引用严格等于 d 的引用.我们无法比较 c 的值。严格等于 d 的值只使用 ===运算符，因为两者都是 String 的引用类型，我们应该像这样比较两者:

// toString() in this case works as well but valueOf is more semantic in this case
c.valueOf() === d.valueOf()

想想 a和 b不指向内存中的引用，而是 d引用 相同引用创建于 c .
所以现在，考虑到这一点，让我们回到这些钩子(Hook)在哪种情况下提高了 React 应用程序的性能的问题。
帮助 React 比较 引用 值，例如 Function、Array 和 Object 类型，我们使用 useCallback或 useMemo至 封装将这些引用转换为 React 可以比较并决定 的新类型。引用值被改变了。
因此，如果您只渲染层次结构的最低级别，那么这些钩子(Hook)可能无法帮助您解决性能问题。
但是，如果您在处理引用类型的应用程序的一部分中使用它并且您经常呈现它。这是一个使用它的好机会，它可以帮助 React 了解这些引用是否已更改或未渲染或其余部分或层次结构。
在简历中， useMemo和 useCallback用于帮助 React 找出是否有一些 引用类型 已更改其值以呈现组件。