我可以在不触发重新渲染的情况下更改祖父母内联CSS吗？

我试图通过单击组件的10000个孙子中的一个来更改组件的内联CSS

World

将回调函数传递给其子

Terrain

。此组件将创建一个由100×100个子组件组成的网格

平铺
。每个控件都有一个position属性，可以传递给回调函数，通知
World
更改其CSS，以便将单击的
平铺
移动到屏幕中央

下面的代码可以工作，但速度非常慢。显然地因为我的
World
有10000个
Tile
孙辈，所以在屏幕上移动
World
的响应很慢

我已经确认了延迟是由元素的数量造成的，因为创建一个只有4个子元素的
地形
，使得点击响应非常快速

既然
setState
触发了重新渲染，我还可以如何更改
World
的内联CSS，根据该CSS单击
Tile

class World extends Component {
    // this function is passed down to Terrain
    changePosition( newPosition ) {
        this.setState({
            position : newPosition
        });
    }

    convertPosition( position ) {
        let x = ( this.tileSize / 2 ) + ( position.x * this.tileSize );
        let y = ( this.tileSize / 2 ) + ( position.y * this.tileSize );
        let translate = 'translate( ' + -x + 'px, ' + -y + 'px )';
        return translate;
    }

    render() {
        let terrainSize = {
            x : 100,
            y : 100
        };
        let style = {
            transform : this.convertPosition( this.state.position ),
            width     : terrainSize.x * this.tileSize,
            height    : terrainSize.y * this.tileSize
        };
        return (
            <div className="world" style={ style }>
                <Terrain
                    size={ terrainSize }
                    tileSize={ this.tileSize }
                    onTileClick={ this.changePosition.bind( this ) }
                />
            </div>
        );
    }
}
class Terrain extends Component {
    tileClicked( position ) {
        this.props.onTileClick( position );
    }

    render() {
        let tiles = [];
        // create 100 * 100 Tiles
        for( let x = 0; x < this.props.size.x; ++x ) {
            for( let y = 0; y < this.props.size.y; ++y ) {
                let position = {
                    x : x,
                    y : y
                };
                tiles.push(
                    <Tile
                        key={ x + ',' + y }
                        position={ position }
                        size={ this.props.tileSize }
                        onClick={ () => this.tileClicked( position ) }
                    />
                );
            }
        }
        return (
            <div className="terrain">
                { tiles }
            </div>
        );
    }
}
class Tile extends Component {
    render() {
        let style = {
            position : 'absolute',
            top      : this.props.position.y * this.props.size,
            left     : this.props.position.x * this.props.size,
            width    : this.props.size,
            height   : this.props.size
        };
        return (
            <div className="tile" onClick={ this.props.onClick } style={ style }></div>
        );
    }
}

类世界扩展组件{
//此功能将传递给地形
更改位置（新位置）{
这是我的国家({
职位：新职位
});
}
变换器位置（位置）{
设x=（this.tileSize/2）+（position.x*this.tileSize）；
设y=（this.tileSize/2）+（position.y*this.tileSize）；
让translate='translate（'+-x+'px'，+-y+'px'）；
返回翻译；
}
render（）{
让地球化={
x:100，
y:100
};
让样式={
变换：this.convertPosition（this.state.position），
宽度：terrainSize.x*this.tileSize，
高度：terrainSize.y*this.tileSize
};
返回(
);
}
}
类地形扩展组件{
斜接（位置）{
此.props.onTileClick（位置）；
}
render（）{
让瓷砖=[]；
//创建100*100瓷砖
for（设x=0；x
);
}
}
返回(
{tiles}
);
}
}
类扩展组件{
render（）{
让样式={
位置：'绝对'，
顶部：this.props.position.y*this.props.size，
左：this.props.position.x*this.props.size，
宽度：这个.props.size，
身高：这个
};
返回(
);
}
}
您可以在您的孙辈中实现shouldComponentUpdate（），以防止他们在不受影响的情况下重新渲染。将该函数应用于
地形
组件似乎可以显著加快响应速度。你愿意完整地回答这个问题并解释一下为什么会这样吗？最后，我还需要更新并重新渲染
地形。如何区分
平铺
单击（而不是重新渲染）和其他一切？React不知道（或关心）组件真正依赖的状态/道具。您必须自己实现shouldComponentUpdate（）方法来实现这一点。否则，您的代码不会得到优化。还有一个提醒您实现该功能的工具。：）我认为React做了一些智能扩散，并且发现只有我的
世界
内联CSS发生了变化，所有的子元素都保持不变。@MarcDingena要进行智能扩散，它必须仍然将完整的新树渲染到虚拟DOM中，这本身可能很耗时。
shouldComponentUpdate
函数允许React跳过组件的虚拟渲染和实际渲染，使整个过程更快。您可以在孙子辈中实现shouldComponentUpdate（），以防止他们重新渲染，当它们不受影响时。将该功能应用于
地形
组件似乎可以显著加快响应速度。你愿意完整地回答这个问题并解释一下为什么会这样吗？最后，我还需要更新并重新渲染
地形。如何区分
平铺
单击（而不是重新渲染）和其他一切？React不知道（或关心）组件真正依赖的状态/道具。您必须自己实现shouldComponentUpdate（）方法来实现这一点。否则，您的代码不会得到优化。还有一个提醒您实现该功能的工具。：）我认为React做了一些智能扩散，并且发现只有我的
世界
内联CSS发生了变化，所有的子元素都保持不变。@MarcDingena要进行智能扩散，它必须仍然将完整的新树渲染到虚拟DOM中，这本身可能很耗时。
shouldComponentUpdate
函数允许React跳过组件的虚拟渲染和实际渲染，使整个过程更快。