Reactjs不能忽略的key

前端之家收集整理的这篇文章主要介绍了Reactjs不能忽略的key前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

keyReact唯一一个用来分辨子元素的标识。如果我们动态创建子React元素,而且这些子元素的顺序或者数量不确定的时候,那么就需要使用key这个属性

Key的使用允许React来分辨哪些元素改变了,哪些是增加的,那些被删除了。在元素数组中,key应该被赋予给每个元素,从而每个元素都有一个稳定的身份证明。

不使用key,可能出现的错误

可能会造成渲染错误

我之前做了一个2048的小游戏,但是在移动的时候,总是会出现跳的现象:

可能会出现数据的错误

举个例子,目的是可以在最上方增加输入行:

  1. export default class List extends React.Component {
  2. index = 3
  3.  
  4. constructor(props) {
  5. super(props);
  6.  
  7. this.state = {
  8. list: [2,1]
  9. };
  10. }
  11.  
  12. insert = ()=>{
  13. let list = [this.index++,...this.state.list];
  14. this.setState({
  15. list
  16. });
  17. }
  18.  
  19. render(){
  20. return (
  21. <div>
  22. <ul>
  23. {
  24. this.state.list.map(value=>{
  25. return <Item value={value} />
  26. });
  27. }
  28. </ul>
  29. <button onClick={this.insert}>insert</button>
  30. </div>
  31. );
  32. }
  33. }
  34.  
  35. export default class Item extends React.Component {
  36. constructor(props) {
  37. super(props);
  38.  
  39. this.state = {
  40. input: ""
  41. };
  42. }
  43.  
  44. onChange = (e)=>{
  45. this.setState({
  46. input: e.target.value
  47. })
  48. }
  49.  
  50. render(){
  51. return (<li>Input {this.props.value} : <input type="text" onChange={this.onChange} value={this.state.input} /></li>);
  52. }
  53. }

看着似乎没有问题,但是由于缺少key值,会造成一个bug:

由上面的GIF中可以看到,原来在Input 2里面输入的值变成Input 3的值了,这是为什么?

由于没有使用key,造成React靠顺序来判断子元素,所以就造成了Input 2的元素,修改propsInput 3,而原本里面存着的state并没有发生变化,所以就显示的是Input 3的输入域里面显示着原本Input 2的值。
同理,Input 1变成了Input 2,然后又重新生成了一个Input 1.

而如果我们使用了key

  1. render(){
  2. return (
  3. <div>
  4. <ul>
  5. {
  6. this.state.list.map(value=>{
  7. return <Item key={value} value={value} />
  8. });
  9. }
  10. </ul>
  11. <button onClick={this.insert}>insert</button>
  12. </div>
  13. );
  14. }

那么React就会很容易的辨别子元素,会变成下面这个样子,就不会造成上面的错误了:

缺少key,会造成性能的浪费

就像之前的那个例子里所展示,不加Key可能会造成更多的渲染。

我们在Item里面加一个shouldComponentUpdate的判断:

  1. shouldComponentUpdate(nextProps,nextState){
  2. return nextProps.value != this.props.value || this.state.input !== nextState.input;
  3. }

这样子保证当valuestate不改变的时候,不会调用re-render
我们可以通过React Performance ToolPerf来看一下渲染次数的对比。

首先,我们增加几个功能reverse(调转),insert(插入到第一个)delete(删除第一个)

其次,我们规定的步骤是1. insert 2.insert 3.reverse 4.delete,来看一看渲染的次数

下面是打印的结果:
没有使用Key

使用Key

对比效果很明显,没有使用key的时候,render了14次。而使用key的时候,只render了2次(2次insert)。中间的差别很大,时间也差很多。

key的其他用法

看了这篇文章发现了一个很有趣的用法.

按照作者所说,如果同一个组件,如果要修改其中的一些props会造成很多数据重新计算,可能会写很多判断逻辑,有的时候还是不如直接重新全部删除重新计算。

有的时候你想要销毁和重建组件,触发componentDidMount方法,重置state。那么就可以使用key这个属性。当你要销毁、重建组件的时候,你就可以通过改变key值来达到这个目的。

详细的可以看看上面的文章链接

注意事项

  • key值并不是需要全局唯一,而只需要在相邻的兄弟元素中唯一就好。

  • 不要使用arrayindex来做为key值,因为如果array的顺序发生改变,那么key值也会发生改变。就会造成上面举的例子的那种问题。

排版有点乱。。。我会继续修改

以上

猜你在找的React相关文章