如何使用 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")
    }

这是有责任的，因为打印 props 的 console.log 每次移动都会打印它的语句 8 次（最初是两次）

我使用功能组件而不是类，我对优化的研究使我得出了以下解决方案-

React Hooks - 如何实现 shouldComponentUpdate？

如果不需要任何道具，我应该用 React.memo() 包装所有组件吗？

如何将 shouldComponentUpdate 与 React Hooks 一起使用？

所有这些都指向简单的情况，React.memo但我显然错过了一些东西，因为当我尝试实现它时，我得到的只是大量的“props”未定义错误（每次我使用很多 props 时都会出现一个错误）。

详情.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

首先，关于测试前端性能，您必须记住一些事情。

在检查开发工具的性能、活动时，永远不要让开发工具保持打开状态，这会大大降低应用程序的性能。

其次，如果您没有详尽地渲染，则两者都不会给您带来任何性能改进，渲染可能在渲染之前渲染的道具，最重要的是，如果您没有在自定义组件中渲染其他自定义组件，您可能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

将的值与中的值===进行比较。ab

然而，当我们这样做时，会发生不同的情况：

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 比较引用值，例如函数、数组和对象类型，我们使用useCallback或useMemo将这些引用封装到一个新类型中，React 可以比较并决定引用的值是否已更改。

因此，如果您仅渲染层次结构的最低级别，那么这些挂钩可能无法帮助您解决性能问题。

但是，如果您在应用程序中处理引用类型的部分中使用它，并且您经常渲染它。这是一个很好的机会来使用它，并帮助 React 了解这些引用是否已更改或不渲染其余部分或层次结构。

在简历中，useMemo和useCallback用于帮助 React 查明某些引用类型是否已更改其值以呈现组件。