上一章ReactJS实战教程请查看:React组件生命周期详细解析
受控组件
受控组件绑定到一个值,其更改将通过使用基于事件的回调在代码中处理。这里,输入表单元素由react本身处理,而不是DOM。在这种情况下,可变状态保存在state属性中,只会使用setState()方法进行更新。
受控组件具有在每次发生onChange事件时控制传递给它们的数据的功能,然后将该数据保存为state并使用setState()方法进行更新,它使组件更好地控制表单元素和数据。
非受控组件
它类似于传统的HTML表单输入,这里,表单数据由DOM本身处理。它维护自己的状态,并在输入值更改时进行更新。要编写非受控组件,不需要为每个状态更新编写事件处理程序,你可以使用ref从DOM访问表单的值。
受控组件与非受控组件的区别
编号 | 受控组件 | 非受控组件 |
1. | 它不保持它的内部状态。 | 它保持它的内部状态。 |
2. | 这里数据由父组件控制。 | 这里数据由DOM本身控制。 |
3. | 它接受当前的价值作为支撑。 | 它对它们的当前值使用ref。 |
4. | 它允许验证控制。 | 它不允许验证控制。 |
5. | 它可以更好地控制表单元素和数据。 | 它对表单元素和数据的控制有限。 |
评论前必须登录!
注册