23. React key 的用途

用途

• key 是一个建立阵列(array)时，必须使用的字串 属性(string attribute)
• React 会用 key 来分辨阵列里元素(element)，辨别元素的改变或增减。

component instance 是基於它们的 key 来决定是否更新以及重复使用。

示例

这里示范一个数字的list:

const App = () => {
	const numbers = [1, 2, 3, 4, 5];
	const listItems = numbers.map((number) =><li>{number}</li>);
	return(
	  <div>
			<ul>{listItems}</ul>
  	</div>
	)
};

ReactDOM.render(<App/>, document.getElementById("root"));

虽然成功渲染画面了，但会跳出像这样的错误讯息:

"Warning: Each child in a list should have a unique 'key' prop.

这是因为React需要藉由key来辨别项目，所以必须指定key给阵列里的元素:

const id = [11, 22, 33, 44, 55];  // 指定一个id阵列

const App = () => {
	const numbers = [1, 2, 3, 4, 5];
	const listItems = numbers.map((number) =>
		<li key={id.toString()}>
				{number}
		</li>
	);
	return(
	  <div>
			<ul>{listItems}</ul>
  	</div>
	)
};

ReactDOM.render(<App/>, document.getElementById("root"));

不建议使用索引作为key值

如果阵列的项目没有被分配 key，React 预设将会使用索引作为 key。
但在项目顺序可能改变的情况下，官方并不建议使用索引作为 key。

原因是，

1. 会影响效能。(diff变慢，这跟React预测元件更新的diffing演算法有关，可以参阅官方文件)
2. 因为key是基於索引值，因此如果更动顺序，也会修改当前的key，可能会导致不合预期的结果。

错误的情况可以参考重新了解React中的key (Part 1)，文章里面的举例很清楚!

当使用 array 索引值作为 key 的 component 进行重新排序时，component state 可能会遇到一些问题。由於 component instance 是基於它们的 key 来决定是否更新以及重复使用，如果 key 是一个索引值，那麽修改顺序时会修改目前的 key，导致 component 的 state（例如不受控制输入框）可能相互篡改导致无法预期的变动。

两个不同的 array ，可以使用相同的 key

在同一个阵列里，每个被指定的 key 都必须是唯一值，这样React才可以辨别他们的身分。

但不同的阵列，也可以套用相同的key值。

const id = [11, 22, 33, 44, 55];

const App = () => {
	const numbers = [1, 2, 3, 4, 5];
	const people = ["Winnie", "Mary", "Tina"];
	
	const listItems = numbers.map((number) => 
		<li key={id.toString()}>    // 指定id为key
				{number}
		</li>
	);
																
	const nameList = people.map((name) =>
		<li key={id.toString()}>    // 指定id为key
				{name}
		</li>
	);
	
	return(
	  <div>
			<ul>{listItems}</ul>
			<ul>{nameList}</ul>
  	</div>
	)
};

ReactDOM.render(<App/>, document.getElementById("root"));

由此可知，因为key是给阵列里的元素辨别用，因此两个阵列可以指定相同的key值。

component 不能读取 props 里的 key

Key 的功能是提示 React，但它们不会被传递到元件里。

所以如果希望key值被传进元件，可以尝试这样的做法:

const content = example.map((post) =>
  <Example
    key={post.id}
    id={post.id}
  />
);

虽然component不能读取 props.key，但因为props.id还是会被传进元件，就可以沿用props的特性重复使用key值。

【如内文有误还请不吝指教>< 并感谢阅览至此的各位:D 】

参考资料 :
-列表与 Key – React
-Reconciliation
-React Lists | Keys - React 教学 Tutorial

---正文结束---