javascript - 新日期作为 react 关键 Prop ？

Question

我有这个 react 代码，我在某些输入组件上使用 new Date().getTime() 作为 react 键 Prop 。这可能是一种反模式，因为键需要稳定。但我想了解为什么这如此有问题。为什么 newDate().getTime() 作为键的行为比 Math.random() 作为键的表现更差。请检查这两个示例以了解我的意思:

• example with Math.random() as key
• example with new Date().getTime() as key

有问题的代码类型:

class TextInputs extends React.Component {
  state = {
    textArray: ['hi,','My','Name','is']
  };
  handleChange = ({value, index}) => {
    const {textArray} = this.state;
    textArray[index] = value;
    this.setState({textArray})
  };
  render(){
    console.log(this.state.textArray)
  return this.state.textArray.map((txt, i) => <Input onChange={this.handleChange} index={i} value={txt} key={new Date().getTime()}/>)               
  };
};

Answer 1

This is probably an antipattern because keys need to be stable.

确实如此。 :-)

But i want to understand why is this so buggy. And why newDate().getTime() as key behaves worse than Math.random() as key.

因为您可以在同一毫秒内渲染大量元素。毫秒对于人类来说是非常短的时间。对于计算机来说，没有那么多。因此，您最终会得到不唯一的键。

在您(或阅读本文的任何人)试图获取 performance.now() 之前相反，请记住，正如您所说， key 需要稳定，而且 performance.now() 的准确性为某些攻击打开了大门，因此实现已经退缩(它仍然非常精确，但是不精确到最初预期的 5 微秒)。

<小时/>

附注:此代码是错误的:

handleChange = ({value, index}) => {
  const {textArray} = this.state;
  textArray[index] = value;
  this.setState({textArray})
};

该代码有两个问题，均在 this page 中进行了描述。在文档中:

1. 在分配给数组条目时，您将直接修改状态。您必须复制数组并修改副本。

2. 您正在使用 setState 的非回调版本来根据现有状态设置状态。根据现有状态设置状态时，您必须使用setState的回调版本。

理想情况下，根本不要使用数组索引；在对象上使用唯一的 ID。但如果您使用索引，正确的代码将是:

handleChange = ({value, index}) => {
  // Remember the string we're supposed to remove
  const entry = this.state.textArray[index];
  this.setState(({textArray}) => { // <== Note destructuring
      // Find the first occurrence in the array as it is NOW (it may have changed)
      const index = textArray.indexOf(entry);
      // If the entry is still there...
      if (index != -1) {
          // ...create a copy of the array without it, return the state update
          return {textArray: textArray.filter((e, i) => i !== index)};
          // Or:
          // textArray = textArray.slice();
          // textArray.splice(index, 1);
          // return {textArray};
          // Or:
          // return {textArray: [...textArray.slice(0, index), ...textArray.slice(index + 1)]};
      }
  });
};