React组件更新混乱

最新推荐文章于 2022-09-13 16:59:28 发布

原创最新推荐文章于 2022-09-13 16:59:28 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React

React 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在React中正确设置组件KEY值的方法及其重要性。通过案例分析，说明了使用唯一ID作为KEY值能有效避免数据更新时的渲染混乱问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因：组件key值的设置不规范导致。
解决办法：给数据项设置唯一的ID。使用ID给组件设置KEY值，而不要使用，随机的，或者按顺序设定key值。

问题情况：

{
    data : [
        {数据项1},
        {数据项2},
        {数据项3},
        .
        .
        .
    ]
}

/** 渲染组件 
* data 当期数据
* i 当期下标
* delete 删除选框开启
* SetDelete 设置删除函数
*/
that.state.data.map(function(data,i){
    return <Tip
        key={'Tip_'+i} 
        data={data}
        delete = {deleteStyle} 
        SetDelete = {that.SetDelete}
    />
})

//批量删除
Delete : function(){

    for(var i=0; i<this.state.data.length; i++){
        if(this.state.data[i].delete){
            this.state.data.splice(i,1);
            this.setState({});
            i--;
        }

}

由于在渲染的时候按顺序给子组件设置KEY值。
导致在操作数组后，渲染混乱。

//使用ID,得到预期结果
key = {'Tip_'+data.id}

拓展：React的渲染机制
首先，React渲染时，并不是将所有组件都重新渲染一边。
其次，React渲染时，有一定的优化机制。

React在渲染下一个状态时，先生成一棵虚拟的DOM树，和当前的状态的DOM树进行对比，更新不一致的地方。

在渲染的时候，非常重要的一个属性就是KEY值，React通过比较KEY值相同的节点，来判断其前后状态的一致性，以及是否需要更新。

在我遇到的问题中，我就是因为按照顺序设置KEY值。所以如果删除{数据项2}。在设置key值得时候，仍然会按顺序设置key值，0,1,2,3…

React在比较时，虽然{数据项2}被删除了，但是{数据项2}内部的数据并没有改变。所以当KEY值没有变化时。React认为{数据项2}没有变化。则不会对其进行更新，反而由于，数组的长度变化，导致data.map()渲染时，会总是抛弃最后一个数据项。（个人理解，有不对的地方，希望大家指正。）

所以在设置KEY值得时候，尽量设置有意义的ID，能跟随数据状态变化而变化的值。来避免出现意料不到的错误。