小编Pir*_*han的帖子

过去几天我一直在学习 hooks in react，我尝试创建一个场景，我需要在屏幕上渲染一个大网格，并根据我想要采取的操作更新节点的背景颜色。有两个动作会改变节点的背景颜色，这两个动作必须共存。

• 单击时光标悬停在节点上。
  
• Grid组件内部存在一种算法，可以改变某些节点的背景。
  
  

在我看来，有多种方法可以实现这一点，但是我在使用钩子的方式方面遇到了一些麻烦。我将首先向您介绍如何从我所学到的知识中实现这一点的思考过程，然后向您展示我尝试过的实现。我试图保留代码的重要部分，以便可以清楚地理解。如果我遗漏了什么或完全误解了一个概念，请告诉我。

1. 孩子们可以保持自己的状态，知道如何更新自己。父级可以保存对列表中每个子级的引用，并在需要时从子级的引用中调用必要的函数以更新子级。

   • 适用于要采取的第一个和第二个操作。这个解决方案不会导致性能问题，因为孩子管理他们自己的状态，如果父母通过引用更新孩子状态，唯一要重新渲染的孩子将是被调用的孩子。
     
   • 从我读到的内容来看，这个解决方案被视为一种反模式。
     
     

    const Grid = () => {
        // grid array contains references to the GridNode's

        function handleMouseDown() {
            setIsMouseDown(true);
        }

        function handleMouseUp() {
            setIsMouseDown(false);
        }

        function startAlgorithm() {
            // call grid[row][column].current.markAsVisited(); for some of the children in grid.
        }

        return (
            <table>
                <tbody>
                {
                    grid.map((row, rowIndex) => {
                            return (
                                <tr key={`R${rowIndex}`}>
                                    {
                                        row.map((node, columnIndex) => {
                                            return (
                                                <GridNode
                                                    key={`R${rowIndex}C${columnIndex}`}
                                                    row={rowIndex}
                                                    column={columnIndex}
                                                    ref={grid[rowIndex][nodeIndex]}
                                                    onMouseDown={handleMouseDown}
                                                    onMouseUp={handleMouseUp}
                                                />
                                            );
                                        })
                                    } …