Javascript 键之间的差异={`note${note.id}`}>；React JSX中的key={note.id}？

我正在学习React教程，作者的代码如下：

<li key={`note${note.id}`}>
        <Note task={note.task} />
      </li>

但是，如果您只需执行以下操作，同样的代码也可以工作：

  <li className="note" key={note.id}>
                <Note task={note.task}/>
            </li>

---

在第一个例子中，实际note.id之前的note$的用途是什么？这两种方法都有效，只是好奇为什么会出现这种情况

这两个示例设置了不同的键

假设note对象的id为1

顶部示例

key={'notes${note.id}}>

将key属性设置为等于'note1'

下面的示例

key={note.id}

将键设置为“1”

它们都可以工作，因为key属性仅用于唯一标识组件的子级。top one key=“note1”可能更好，因为它更具描述性、具体性和可读性。您可以想象一个React组件具有多种类型的子级，如果它们都被赋予简单的数字键，则它们的键可能会发生冲突

这个

---

syntax是新的ES6JavaScript字符串格式语法，类似于python或ruby中的字符串插值。见文件

相当于

在React中，

键

属性用于协调渲染之间的元素。DOM组件的所有子元素都必须具有唯一的键。看

将值

note.id

分配给

元素的

键
属性可确保所有元素都具有不同且唯一的键。在它前面加上
“note”
可以确保如果父元素还包含其他元素，则不会有重叠

下面是一个必须在键前加前缀的示例，因为可以在注释和草稿之间共享ID

var注释=[
{id:0，消息：'foo'}，
{id:1，消息：'bar'}，
];
var草稿=[
{id:0，消息：'foo'}，
{id:1，消息：'bar'}，
];
var children=notes.map（函数（注释）{
return
；
}).concat（drafts.map）（函数（草稿）{
return
；
}));
返回
{children}
那么它是否与note+note.id相同？我认为这更具可读性，为什么不使用它呢？注意：这种语法的官方术语是“es6模板字符串”@user3839821。这是es6中的一个新功能，尚未在所有浏览器中出现。我相信JSX背后的人正在努力推广模板语法，所以最终的计划可能是使用新的语法syntax@user3839821在这个简单的例子中，是的，您可以执行'note'+note.id，这样就足够可读了。如果您正在做比这更复杂的事情，或者将多个字符串连接在一起，那么使用模板字符串语法可以看起来更简洁。另一个原因是开发人员的偏好：模板字符串对Javascript来说是新的，但是来自其他语言的开发人员将使用它们。作为参考：“es6模板字符串”是`语法'的官方术语
`${variableName}`