为什么这个方法更新反应状态很慢？

Question

我有两个组成部分。父组件：Board和子组件Cell。我在 Board 组件中使用循环渲染 9 个单元格。

这是子组件(Cell.js):

function Cell(props) {
    return <button style={style} className='cells' id={props.id} onClick={(e) => { props.handleclick(e) }}>{props.text}</button>;
}

这是父组件(Board.js):

function Board() {
    let [board, setBoard] = useState(['', '', '', '', '', '', '', '', '']);
    const handleClick = (e) => {
        let newBoard = [...board];
        newBoard[2] = "0";
        setBoard(newBoard);
    }
    return <div style={style}>
        {board.map((item, i) => {
            return <><Cell handleclick={handleClick} text={item} key={i} /></>
        })
        }
    </div>
}

这非常有效，但我尝试了另一种方法，我在 handleClick 方法中做了一些更改。

const handleClick = (e) => {
        let newBoard = board;
        newBoard[2] = "0";
        setBoard(newBoard);
    }

更改状态需要花费太多时间。状态正在发生变化，我通过查看 React Dev 工具中的 React 组件确认了这一点。我无法理解为什么这种方法需要太多时间来更新状态？

Answer 1

let newBoard = board;
newBoard[2] = "0";
setBoard(newBoard);

你正在改变状态。当您在功能组件中设置状态时，React 在旧状态和新状态之间执行 ===。因为是同一个数组，react 认为什么都没有改变，所以组件不会重新渲染。它可能 永远不会 呈现，但在你的情况下它看起来像一些其他组件最终设置状态并导致重新呈现。

相反，始终创建一个新状态：

let newBoard = [...board];
newBoard[2] = "0";
setBoard(newBoard);

为什么这个方法更新反应状态很慢？

Why does this method updates react state very slowly?

javascript

reactjs

use-state

react-state