React官网-你可能不需要effect-文末挑战使用key重新渲染组件为什么不能直接写在内部标签上？-灵析社区

React官方文档中的一道挑战题： [https://zh-hans.react.dev/learn/you-might-not-need-an-effect#...](https://link.segmentfault.com/?enc=ONnJ2f3WaxKBs0Mgv6PIdw%3D%3D.x0ezPwzi9JRYkcwaaNmRNtchaubtOkj%2Bsyt4aG2sprK5v8P3Z5aE90SR4bDjI%2B%2FlY7%2BbEeegk2RWVhC9sj0jCArXFNovZzHUTHOw55RhqfVDj%2BiPmF3wfcV%2F%2FQSFzkj6) 官方答案是提取出一个`EditForm`组件，为其加上`key` import { useState, useEffect } from 'react'; export default function EditContact({ savedContact, onSave }) { return ( ) } function EditForm({ savedContact, onSave }) { const [name, setName] = useState(savedContact.name); const [email, setEmail] = useState(savedContact.email); return ( 姓名：{' '} setName(e.target.value)} /> 邮箱：{' '} setEmail(e.target.value)} /> { const updatedData = { id: savedContact.id, name: name, email: email }; onSave(updatedData); }}> 保存 { setName(savedContact.name); setEmail(savedContact.email); }}> 重置 ); } 我想知道，为什么不能直接在组件内的``上加`key`? import { useState, useEffect } from 'react'; export default function EditContact({ savedContact, onSave }) { const [name, setName] = useState(savedContact.name); const [email, setEmail] = useState(savedContact.email); return ( 姓名：{' '} setName(e.target.value)} /> 邮箱：{' '} setEmail(e.target.value)} /> { const updatedData = { id: savedContact.id, name: name, email: email }; onSave(updatedData); }}> 保存 { setName(savedContact.name); setEmail(savedContact.email); }}> 重置 ); } 我是新手，刚学React，我用过Vue。我无法理解这里的做法。