Question

我听说双向绑定并不是免费的。由此我理解，如果我们添加一个输入字段并在其中输入一些文本，则不应反映按下的键。但是具有hooks（App1.js）或不具有hooks（App2.js）输入字段的行为相同，它反映了键入的文本。有人可以告诉我以下代码（App1.js和App2.js）之间的区别。

index.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
    <div id="root"></div>
    <script src="App1.js"></script>

    <div id="root2"></div>
    <script src="App2.js"></script>
</body>
</html>

App1.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App1 = ()=>{

    console.log("nnn")
    const [name,setName] = useState("hello")
    return (
    <div>
            <label htmlFor="name">
            </label>
            <input 
            id = "name"
            value = {name}
            onChange = {(e)=>(setName(e.target.value))}>
            </input>
    </div>
    )

}

render(<App1/>, document.getElementById("root"))

App2.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App = ()=>{
    return (
        <div>
            <label htmlFor="name">
            </label>
            <input 
            id = "name">
            </input>
    </div>
    )
}

render(<App/>, document.getElementById("root2"))

在这种情况下为什么需要钩子？当App2中的输入反映键盘输入的文字时。

我是新来的人，如果我很愚蠢，请忽略我的愚蠢。

Answer 1

那里没有发生2向数据绑定。在您的App2.js上，您使用的是Uncontrolled Component，它不绑定到React而是绑定到普通DOM。

反应中发生两种方式绑定？

1 个答案: