我用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挂钩的shouldComponentUpdate？
所有这些都指向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(，我认为这是一个减少不必要的重新渲染的好地方，但我看到的所有解决方案都很简单。当这样的道具被广泛使用时，是否不可能使用React.memo？
如何在保持道具可用性的同时优化性能？
首先，您必须记住在前端测试性能。
当您检查性能时，您永远不会让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了解这些引用是否已更改或未渲染，或者是否已渲染其余部分或层次结构。
在简历中，useMemo和useCallback用于帮助React查明某个引用类型是否已更改其值以渲染组件。