如何使用 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 找出某些引用类型是否已更改其值以呈现组件。