React:List and key

在React中，可以通过数组方法返回一组组件元素，并将该数组作为render()的js插值。

 function NumberList(props) {

   const numbers = props.numbers;

   const listItems = numbers.map((number) =>

     <li>{number}</li>

   );

   return (

     <ul>{listItems}</ul>

   );

 }

 const numbers = [1, 2, 3, 4, 5];

 ReactDOM.render(

   <NumberList numbers={numbers} />,

   document.getElementById('root')

 );

当我们创建列表时，要记得在列表元素中（不单指li，一组div或其他以数组形式渲染的标签也一样）添加key特性。key的值是一个字符串，它表示在列表中该元素的标志（或者说id）。key的作用主要是让DOM在重新渲染前能比较出列表中的哪些元素不必重新渲染，降低了开销。“When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.”-- in-depth explanation about why keys are necessary

   const listItems = numbers.map((number) =>

     <li key={number.toString()}>

       {number}

     </li>

   );

生成组件数组时，如果元素本身有id，我们将id作为数组元素的key即可；如果没有的话，我们往往会使用index索引替代。但文档不推荐，因为当生成的列表在以后的行为中发生动态增删/重新排序的话，索引就没意义了，此时重新渲染的效率依然不高。

为什么呢？因为React使用key，是为了标识组件。key相同的时候，React只会更新组件的已变化属性，key不同时，才会销毁重新创建。

举例，用数组['Alan','Mar','Kat']生成一组li，以索引为key，得到：

(key0)Alan，input1

(key1)Mar ，input2

(key2)Kat ，input3

对数组进行排序后，['Kat','Alan','Mar']，此时再以索引为key生成列表，得到：

(key0)Kat ，input1

(key1)Alan ，input2

(key2)Mar ，input3

发现名字后面对应的原先的input并未发现更新。因为对React来说，key相同的组件被React认定是同一个组件，哪怕名字在排序后改变，并在重新渲染后体现，但原先的key0和现在的key0仍被看作同一个组件，其底下的input不会发生更改。

*key应该放在数组所在上下文的（自定义）元素的特性上。

   const listItems = numbers.map((number) =>

     // Correct! Key should be specified inside the array.

     <ListItem key={number.toString()}

               value={number} />

   );

   return (

     <ul>

       {listItems}

     </ul>

   );

由于往往用数组方法如map生成组件数组，因此在map方法中给元素加key就好了。

在render函数return的JSX中：

       {numbers.map((number) =>

         <ListItem key={number.toString()}

                   value={number} />

       )}

 等价于

 const listItems = numbers.map((number) =>

     <ListItem key={number.toString()}

               value={number} />

   );

     //...

     <ul>

       {listItems}

     </ul>

刚看到一篇关于react的所谓学习路线：react入门、react router、redux 然后是 react native

这让我想起vue、vue router、vuex.......

真的吼相似.......

巴特西

React:List and key

最新文章

热门文章