如何使用 React.memo 優化性能

Question

我使用 React 前端制作了一個國際象棋游戲。 最初，任何移動似乎都是即時實現的，但是在添加了額外的功能（例如更改標題的背景以反映輪到誰（白色或黑色背景，取決於其白色的移動）和其他類似功能之后，我的應用程序明顯變慢了。 我懷疑是這些類型的 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")
    }

這是負責任的，因為打印道具的 console.log 將在每次移動時打印其語句 8 次（最初是兩次）

我使用的是功能組件而不是類，我對優化的研究使我找到了以下解決方案-

React Hooks - 如何實現 shouldComponentUpdate？

如果我不需要任何道具，我應該用 React.memo() 包裝我的所有組件嗎？

如何在 React Hooks 中使用 shouldComponentUpdate？

都指向React.memo簡單案例，但我顯然遺漏了一些東西，因為當我嘗試實現它時，我得到的只是過多的“道具”未定義錯誤（每次我使用道具時都會出現一個） .

詳情.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;

由於此組件中的道具僅在轉彎更改時才會更改（props.status.white），我認為這是嘗試減少不必要的重新渲染的好地方，但我看到的所有解決方案都非常簡單。 當像這樣的 props 被廣泛使用時，是否不能使用 React.memo？

如何在保持對道具的訪問的同時優化性能？

Answer 1

首先，您必須牢記有關在前端測試性能的一般情況。

在檢查性能時，您永遠不會打開 devtools，進入 devtools 的活動會大大降低您的應用程序的性能。

其次，如果您沒有進行詳盡的渲染，那么useMemo和useCallback都不會給您任何性能改進，可能的渲染道具是在之前渲染的，最重要的是，如果您沒有在您的自定義組件中渲染其他自定義組件，您可能不會也不需要使用那些鈎子。

那么，我們應該在哪種情況下使用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創建的相同引用。

所以現在，考慮到這一點，讓我們回到關於這些鈎子在哪些情況下提高 React 應用程序性能的問題。

為了幫助 React 比較引用值，例如 Function、Array 和 Object 類型，我們使用useCallback或useMemo將這些引用封裝到一個新類型中，React 可以比較並決定引用的值是否已更改。

因此，如果您只渲染層次結構的最低級別，那么這些鈎子可能無法幫助您解決性能問題。

但是，如果您在應用程序中處理引用類型的部分使用它，並且經常渲染它。 這是一個很好的機會來使用它並幫助 React 了解這些引用是否已更改或不渲染其余部分或層次結構。

在 resume 中， useMemo和useCallback用於幫助 React 找出某些引用類型是否已更改其值以呈現組件。