ReactJS中的受控组件和非受控组件是什么?它们之间有什么不同?

推荐答案

这与有状态DOM组件(表单元素)有关,React文档解释了这一区别:

  • Controlled Component是通过props获取其当前值并通过回调(如onChange)通知更改的值.父组件通过处理回调、管理自己的状态并将新值作为props 传递给受控组件来"控制"它.你也可以称之为"哑组件".
  • Uncontrolled Component在内部存储自己的状态,需要时可以使用ref查询DOM以查找其当前值.这有点像传统的HTML.

大多数本机React表单组件支持受控和非受控使用:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

在大多数(或全部)情况下,you should use controlled components.

Reactjs相关问答推荐

无法覆盖MUI工具栏上的左右填充,除非使用!重要

从app.js导航,这是在BrowserRouter包装之外

react 副作用循环

Redux Provider Stuck甚至彻底遵循了文档

UseEffect和useSelector的奇怪问题导致无限循环

获取点击的国家/地区名称react 映射

有没有一种惯用的方式来接受特定的子元素?

在 React 中,为什么不将组件和钩子结合起来呢?

Next.js `getLayout` 函数没有被调用

Symfony ux-react:使用react_component()时React组件不会渲染

即使配置了 webpack.config.js,html-loader 也不起作用

如何初始化 redux 全局存储 preloadedState

损坏的图像 React useState

使用状态与复选框不同步

如何解决在 react.js 中找不到模块错误

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

哪个是创建 React 应用程序的更好方法?

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?

如何用实际的br标签替换axios响应中的br标签?

无法有条件地更新useEffect中的setState