面试官又问我受控组件和非受控组件?

在 React 里,受控组件非受控组件是处理表单元素的两种不同方式。一个一个来看看吧。

受控组件

在 React 中,受控组件指的是表单元素(如<input><textarea><select>等)的状态由 React 组件(state)掌控。表单元素的值通过value属性设置,通过调用onChange事件来更新其状态,从而更新页面UI。

这样的好处有:

  • 表单元素的值受 React 组件状态控制。每当用户输入时,React会更新state,并将新的state值传递给表单元素,保证React在控制表单元素的值。
  • 单一数据源: React组件中的state是数据的唯一来源,所有的表单元素的值都通过React的state来控制。这使得管理表单状态变得更为清晰,因为所有的数据都可以通过React的state来访问和修改。
  • 只能通过onChange改变:如果没有change方法,会发现这个组件无法操作了。

举个例子:

jsx 复制代码
import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交的值:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        />
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledInput;

在上述代码中,input元素的值由value属性设定,并且利用onChange事件来更新value状态。当用户输入内容时,handleChange函数会被调用,进而更新组件的状态。

这样就可以发现,数据的流动很清晰,维护起来更方便。

非受控组件

非受控组件指的是表单元素的状态由 DOM 本身掌控,而非 React 组件。

通常借助ref来获取表单元素的值。

特点

  • 表单元素的值由 DOM 自身管理:在非受控组件中,输入框的值存储在DOM中,而不是在React的state中,更像是传统HTML表单。
  • 通过Ref获取:在非受控组件中,开发者通常使用React.createRef()useRef()来创建引用,从而获取表单元素的当前值,而不是依赖state来管理。

举个例子:

jsx 复制代码
import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交的值:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={inputRef}
        />
      <button type="submit">提交</button>
    </form>
  );
}

export default UncontrolledInput;

在上面的这段代码中,通过useRef创建了一个ref对象inputRef,然后进行对input组件进行ref标记。当提交表单时,调用ref的方法,获取input元素的值。

使用场景

组件受控和非受控的场景其实说到底就是state 的使用。

例如在React中处理表单验证、条件渲染、动态控制、自动聚焦等场景时,受控组件是更合适的选择,能够让UI及时相应,方便地进行复杂的逻辑处理和数据操作。

如果这个表单足够简单,并且不需要过多的交互,非受控组件可以让你避免不必要的状态更新,减少复杂度,且性能更优(因为每次state的更新,组件都会重新渲染)。在一些不需要动态管理输入状态的场景中,非受控组件更加高效。

新手前端,如有不正确的地方,希望指正。

相关推荐
闲蛋小超人笑嘻嘻10 分钟前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull29 分钟前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron
闲蛋小超人笑嘻嘻1 小时前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
卷娄1 小时前
prism-react-renderer 扩展语言模块
react.js
rggrgerj2 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
matrixmind12 小时前
Nivo 用React打造精美数据可视化的开源利器
其他·react.js·信息可视化·开源
golang学习记3 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5203 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽3 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn3 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux