Clever Geek Handbook

您是否了解React键？

哈Ha！



我不时进行采访，当问题是关于React键时，我通常会看到一个困惑的表情，暗示：“是，没什么可问的？”。如果您觉得React键清晰明了，那么让我们进行一次迷你访谈（本文是视频的文字记录）



热身问题



问题的提法



假设我们有三个用户。用户结构尽可能原始，只有2个字段，即ID（唯一标识符）和第二个字段名称（实际用户名）。



const users = [{
  id: 1,
  name: 'Alexander',
}, {
  id: 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}];


让我们尝试渲染这些用户，为此，我们使用以下代码：



const Users = ({ users }) => {
  return users.map((user) => {
    return (
      <User
        key={user.id}
        name={user.name}
      />
    );
  }
}


让我们看一下User组件是什么。



class User extends PureComponent {
  componentDidMount() {
    console.log("DID MOUNT  ", this.props.name);
  }
  componentDidUpdate(prevProps) {
    console.log("DID UPDATE  ", prevProps.name, " -> ", this.props.name);
  }
  componentWillUnmount() {
    console.log("WILL UNMOUNT  ", this.props.name);
  }
  render() {
    return (
      <span>{this.props.name}</span>
    );
  }
}


我在类中编写了此组件，以更好地了解生命周期。我想提请您注意的另一点是PureComponent。这意味着仅在更改属性（属性）时才更新组件。



结果，在浏览器中，我们将看到以下图片：







我们看到三个名称的列表，在控制台中，我们看到三个条目，即每个用户的DID MOUNT。到目前为止，一切都是合乎逻辑且可预测的。



阴谋任务和问题



. , id, .



const users = [{
  id: 1,
  name: 'Maxim', // 'Alexander',
}, {
  id: 4, // 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}];


!

?







, ...















!



, . :







, Alexander Maxim, Dmitriy Anton, . :



  1. WILL UNMOUNT Dmitriy
  2. DID UPDATE Alexander Maxim
  3. Dmitriy .


, ? ,





,



Anton, key name , key name , User PureComponent. .







Alexander name Maxim, props , componentDidUpdate. , .







Dmitriy, User PureComponent name, - . Dmitriy Dmitriy . WILL UNMOUN DID MOUNT.







React key. , key , key , , key, . , key , key , . , Dmitriy , ,





, !





React . index . , eslint , index key. .



, , React :







, .





, 5 .



const users = [{
  id: 1,
  name: 'Alexander',
}, {
  id: 2,
  name: 'Dmitriy',
}, {
  id: 3,
  name: 'Anton',
}, {
  id: 4,
  name: 'Artem',
}, {
  id: 5,
  name: 'Andrey',
}];


key id — index



const Users = ({ users }) => {
  return users.map((user) => {
    return (
      <User
        key={index}
        name={user.name}
      />
    );
  }
}


User .



5 DID MOUNT . , Dmitriy .



const users = [{
  id: 1,
  name: 'Alexander',
}/*, {
  id: 2,
  name: 'Dmitriy',
}*/, {
  id: 3,
  name: 'Anton',
}, {
  id: 4,
  name: 'Artem',
}, {
  id: 5,
  name: 'Andrey',
}];




, ?





.













!









WILL UNMOUNT Andrey, , Dmitriy, Andrey. 3 , . DID UPDATE .





, . 5 . , .. Dmitriy. , , .







, React. 5 , key. 4 . key. react, key, , .







.







, . , Dmitriy, props name Anton. DID UPDATE. , 3 DID UPDATE. key 5, , WILL UNMOUNT Andrey, WILL UNMOUNT Dmitriy.





id, index key. , Dmitriy, . React . , , , drag and drop, .





, :



const users = [{
  id: 1,
  name: 'Alexander',
  role: 'user',
}, {
  id: 2,
  name: 'Dmitriy',
  role: 'admin',
}, {
  id: 3,
  name: 'Anton',
  role: 'user',
}, {
  id: 4,
  name: 'Artem',
  role: 'admin',
}, {
  id: 5,
  name: 'Andrey',
  role: 'user',
}];


并且根据角色，如果是普通用户，则绘制User组件，如果是管理员，则绘制Admin组件。对于键，我们仍然使用index。



const Users = ({ users }) => {
  return users.map((user) => {
    const Component = user.role === 'admin' ? Admin : User;

    return (
      <Component
        key={index}
        name={user.name}
      />
    );
  }
}


用户Dmitriy再次被删除。



在这种情况下，您如何看待控制台中的日志？



我不会透露答案，我会留作独立研究...



结论



本文没有特别的摘要。我希望您对完成我的任务感兴趣并且好奇，也许您为自己发现了一些新东西，如果您非常喜欢它，并且想要更多，请点击链接



More articles:


All Articles