React-TypeScript：关键系统

Question

Warning: Each Child in a list should have a unique "Key" prop.

我相信我不是唯一一个对React的钥匙系统感到困惑的人。此问题主要关注添加键道具的包容性情况。

我所做的相关阅读包括：

>

肯特·多德理解反应的关键支柱

了解React.js数组子元素的唯一键

根据Adhiti Ravichandran的说法，迭代中的键有助于识别哪些项已更改（添加/删除/重新排序）

考虑以下电影组件：

class Movie extends React.Component<any, any> {
    render():JSX.Element{
        let styles:React.CSSProperties = {
            width: "300px",
            height: "120px",
            display: "flex",
            justifyContent: "space-around",
            alignItems: "center",
            borderRadius: "20px",
            filter: "drop-shadow(0px 1px 3px #6d6d6d)",
            WebkitFilter: "drop-shadow(3px 3px 3px #6d6d6d)",
            backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
            fontSize: '2.5rem',
            margin: '20px',
            color: '#fff',
        }

        return (
            <>
                {/* add key to this div tag? */}
                <div style={styles}>
                    {this.props.title}
                </div>
            </>
        )
    }
}

function test():JSX.Element{
    return (
        <>
            {
                ['The Avengers', 'Ip Man', 'Now You See Me'].map(
                    // or add key to this Movie tag?
                    title=>(<Movie title={title} />)
                )
            }
        </>
    );
}

class Singleton {
    private static _instance:Singleton = new Singleton();
    public _ind:number = 0;
    public _ids:Array<string> = ['r0'];
    public _memory:boolean = false;
    public _remember:Array<string|boolean|number> = [];

    constructor(){
        if(Singleton._instance){
            return Singleton._instance;
        }
        Singleton._instance = this;
    }

    public new():string{
        this._ind += 1;
        this._ids.push(`r${this._ind}`);
        let tar = this._ids[this._ids.length-2];
        if(this._memory){this._remember.push(tar)}
        return tar;
    }

    public placeholder(cos:string|boolean|number):void{
        if(this._memory){this._remember.push(cos)}
    }

    public last():string{
        return this._ids[this._ids.length-2];
    }

    public start_memorize():void{
        this._memory = true;
    }

    public end_memorize():void{
        this._memory = false;
    }

    public dump_memory():Array<string|boolean|number>{
        let tar = this._remember.concat();
        this._remember = [];
        return tar;
    }

    public redeem(num:number){
        for(let i=0; i<num; i++){
            this._ids.pop();
            this._ind -= 1;
        }
    }
}

export default Singleton;

而Singleton.new（）被调用来解析一个新的键，以下面为例：

class Card extends React.Component<any, any>{
    props:React.ComponentProps<any>;
    singleton:Singleton;
    
    constructor(props:any) {
        super(props);
        this.singleton = new Singleton();
    }
    
    render(){
        return (
            <>
                <div key={this.singleton.new()}>
                </div>
            </>
        )
    }
}

Answer 1

从概念上讲，React分两个阶段工作：

1. 渲染阶段决定了需要对DOM进行哪些更改。在此阶段，React调用渲染，然后将结果与之前的渲染进行比较。
2. 提交阶段是React应用任何更改的时候。（在React DOM的情况下，这是React插入、更新和删除DOM节点的时候。）在这个阶段，React还会调用生命周期，如组件滴滴安装和组件滴滴更新。阶段

在渲染阶段，为了将当前结果（React组件/元素树）与上一个渲染结果（React组件/元素树）进行比较，React使用协调算法。

在此比较过程中，React使用键将当前结果中的组件/元素与上一个渲染结果中的组件/元素相匹配。

如果键相同，只需更新组件/元件即可。

>

组件

组件实例保持不变，以便在渲染过程中保持状态。组件实例调用componentWillReceiveProps（）、componentWillUpdate（）和componentDidUpdate（）。

对于元素

React保留相同的基础DOM节点，只更新更改的属性。

如果键不相同，React将创建新的组件/元素

>

组件

组件实例被初始化。组件实例先调用组件WillMount（），然后调用组件DDMount（）。

对于元素，新的DOM节点被插入到DOM中。

如果带有键的组件/元素出现在先前的结果中，但不在当前结果中，那么React将删除它们。

>

组件

组件实例调用componentWillUnmount（）。与旧实例关联的任何状态都将丢失。组件实例被销毁。

对于元素，旧的DOM节点被销毁。

回答你的问题

对于组件生产，是否应该在迭代或组件渲染方法中添加关键点？

应该在迭代中添加键，以唯一地标识列表中呈现的子组件/元素。

 <Movie title={title} key={title} /> 

如果将键添加到div，则警告不会消失。但上述对账规则将适用于div元素。

使用单例id解析器生成密钥是否合适？

如果单例id解析器生成不稳定的键，比如Math。随机的就没有用了。密钥应该是稳定的、可预测的和唯一的。

这种说法正确吗？"键道具仅对超文本标记语言原始标记有用，如div、span、按钮，但对React无效。组件如果this.props.key未使用。

在您和文档中，键有助于识别哪些项目已更改、已添加或已删除。因此，在我的透视图中，项目同时指组件和元素。因此，键适用于组件和元素。我在两者中都使用它。