×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 25 – Solving 列出按键 Issue In 反应

    课程清单
    [解决列表密钥在React中解决,解决列表密钥在React中]

    We already put some work into lists and we improved them by for example taking advantage of the index of the element to run some code which takes into account on which element it runs.
    我们仍然可以通过例如解决之前遇到的错误(例如,缺少关键道具)来改善这一点。

    列出按键

    关键要素是渲染数据列表时应添加的重要属性,这就是为什么react告诉我们这样做的原因。
    Till now we haven’t specified a key property in person. It’s a 默认 property 反应expects to find on an element no matter if it is a custom component or a 默认 HTML element which you render through a list.
    因此基本上是通过将数组映射到JSX元素中。的 property helps 反应update the list efficiently.

    考虑上一课中从列表中删除元素的情况。当然,它是可行的,但是在幕后,React需要找出它在整个DOM中需要进行调整的内容,并将在本课程的特定部分中深入研究React在做什么,在此我将向您简要介绍一下现场。
    因此,基本上它的作用是,它具有一个称为虚拟DOM的东西,它可以比较现在将要调用的render方法或实际是否使用render方法的结果将真实DOM调整为先前的DOM。呈现它的DOM基本上对过去进行了对未来的压缩。
    当然,对于列表,它需要找出哪些元素会发生变化并做出反应,而不是人为因素,因此我们并没有看到我们呈现了三个具有不同名称的不同元素。
    因此,默认情况下,它将重新呈现整个列表,而对于长列表,这是非常低效的。
    这就是为什么我们应该分配一个Key属性,以使其能够响应以跟踪各个元素,从而使其具有明确的属性,从而可以在不同元素之间进行比较,以找出哪些元素发生了更改,哪些没有发生更改。

    现在让我们分配一个密钥:

    src / App.js
    
    ...
    if (this.state.showPersons) {
    	persons = (
    		<div>
    			{this.state.persons.map((person, index) => {
    				return (
    					<Person
    						click={() => this.deletePersonHandler(index)}
    						name={person.name}
    						age={person.age}
    						key={index}
    					/>
    				);
    			})}
    		</div>
    	);
    }
    ...
    

    所以我们要做的是分配一个密钥,而在内部分配的密钥则是唯一的。通常你大概有一些 ID 如果您从数据库或类似的东西上获取它们,则将它们放在元素上。您的机会很高 ID 或任何其他唯一标识符。
    所以我们可以做的是使用索引,因为在所有索引更改之后,数组中每个元素的位置 对!.
    没错,但是如果列表更改,索引也将成为列表本身的一部分,每个元素将在更改后的至少每个元素上收到一个新索引。
    因此,索引最终也不是一个好的关键,它并不会真正帮助做出反应,因此我们应该真正尝试使用唯一的标识符。
    因此,在我们的人员内部,虚拟数据可能存在,并且值名为id…

    src / App.js
    
    ...
    state = {
    	persons: [{ ID : 's65fsdf6', name: 'Lucy', age: 23 }, { ID : 'ecvs1f3223', name: 'Max', age: 12 }, { ID : 'dsf76sd87f6', name: 'Mike', age: 34 }],
    	showPersons: false,
    };
    ...
    

    now with that We can use that in render() method.

    src / App.js
    
    ...
    if (this.state.showPersons) {
    	persons = (
    		<div>
    			{this.state.persons.map((person, index) => {
    				return (
    					<Person
    						click={() => this.deletePersonHandler(index)}
    						name={person.name}
    						age={person.age}
    						key={person.id}
    					/>
    				);
    			})}
    		</div>
    	);
    }
    ...
    

    确保每个元素都具有可以用来将未来的元素与过去的元素进行比较的react的唯一键,并且可以在需要更新的DOM位置进行更新。
    现在,当我们运行应用程序并切换按钮时,您将看到按键警告消息不见了。
    您可以看到行为是相同的,但是在幕后,它现在能够以更有效的方式做到这一点,这当然是非常重要的。

    反应introduction
    反应Component
    解决列表键在React中发布
  • 启用通知    不用了,谢谢