Javascript <；表格>；React中的元素并不像我期望的那样工作

我试图创建一个表单元素，用户可以在其中输入信息。 如果我直接插入表单元素，那么在键入字母时一切都正常。 如果我通过

AddForm

组件插入表单元素，我只能键入一个字母，必须再次单击该字段才能输入下一个字母

为什么呢

import ReactDOM from 'react-dom';
import React, { useState } from 'react'

const App = () => {

    const [newName, setName] = useState("")
    const [newNumber, setNumber] = useState("")

    const handleName = (event) => {
        setName(event.target.value)
    }

    //doesn't work the way I expect it to
    const AddForm = () => {
        return (
            <form>
                name: <input value={newName} onChange={e => setName(e.target.value)} />
                <div><button type="submit">add</button></div>
            </form>

        )
    }

    return (
        <div>
            <AddForm />
            //does work
            <form>
                name: <input value={newName} onChange={handleName} />
                <div><button type="submit">add</button></div>
            </form>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'));

从“react dom”导入ReactDOM；
从“React”导入React，{useState}
常量应用=（）=>{
const[newName，setName]=useState（“”）
常量[newNumber，setNumber]=useState（“”）
const handleName=（事件）=>{
setName（event.target.value）
}
//不是我期望的那样
常量AddForm=（）=>{
返回(
名称：setName（e.target.value）}/>
添加
)
}
返回(
//行得通
姓名：
添加
)
}
ReactDOM.render（，document.getElementById（'root'））；

AddForm

函数是在每次渲染时创建的，因此从

React

透视图

AddForm

是一个不同的组件，导致重新创建相关的DOM元素，这使其看起来像是输入元素失去了焦点

将

AddForm

移动到

App

之外（并通过道具将所需数据传递给它）

---

为什么AddForm在应用程序外部时不重新渲染，为什么元素直接在应用程序内部时不重新渲染

React以一种有效的方式更新DOM，只改变不同但并不完美的东西。它将组件与

==

进行比较，如果它们不匹配，则删除整个树

由于您在每次渲染时都重新创建了

AddForm

，因此当前的

AddFrom

不等于先前的

AddFrom

。这将使React删除与

AddForm

关联的

表单

，并在其位置创建另一个表单

---

当您将

AddForm

放在外部时，当前

AddForm

等于上一个

AddForm

，因此React只需比较上一个和当前

AddForm

的返回值，并更新与

AddForm

关联的DOM（即，只需在输入字段中添加另一个字符）

谢谢。我按照你写的方式对它进行了重组，并且成功了。但我还是不完全理解两件事渲染何时发生？（每次我键入内容？）-为什么AddForm在应用程序外部时不重新渲染，为什么元素直接在应用程序内部时不重新渲染？为什么只有当元素位于AddForm内部且AddForm位于App内部时，才会重新呈现它？@dasLicht我已经对我的答案做了进一步的解释。