理解 react 中的受控组件和非受控组件

一、了解 dependencies 和 devDependencies

dependencies

生产依赖:项目开发完成后,打包时,dependencies 中的第三方源代码也就被打包进来。
dependencies是项目运行时所依赖的模块。这些模块是项目正常运行所必需的,也就是说,如果没有这些模块,项目将无法正常启动或运行。这些依赖会被安装在生产环境中,也会被安装在开发环境中。

devDependencies

开发依赖:只在开发过程中有意义,不被打包到最终的项目代码中。
devDependencies是开发过程中所依赖的模块,主要用于开发、测试、构建等开发相关的工作。这些模块在生产环境中是不需要的。这些依赖通常只在开发环境中使用,不会被安装在生产环境中。

在使用包管理工具时,可以通过不同的命令来安装这些依赖。例如,在 npm 中:

  • npm install <package-name>npm install <package-name> --save:会将包安装到dependencies
  • npm install <package-name> --save-dev:会将包安装到devDependencies

二、受控模式 vs 非受控模式

非受控模式

代码设置表单的初始值defaultValue,但是能修改value的只有用户,代码可通过文本输入框监听onChange或者ref读取value

  1. onChange事件监听
js 复制代码
function App() {
  function onChange(event) {
    console.log(event.target.value); // 读取用户输入
  }
  return (
    <input type="text" defaultValue={"hello"} onChange={onChange}></input>
  )
}

2. ref通过dom读取

  • useRef :用于创建一个可变的引用ref,该引用可以在组件的整个生命周期内保持不变。提供一个 .current 属性,用于访问或修改存储的值。
  • useEffect:在组件的首次渲染时执行,执行异步操作。
js 复制代码
import { useRef, useEffect } from 'react'
function App() {
  const inputRef = useRef(null)
  useEffect(() => {
    setTimeout(() => {
      console.log(inputRef.current.value);
    }, 2000)
  }, [])
  return (
    <input type="text" defaultValue={"hello"} ref={inputRef}></input>
  )
}

受控模式

用代码来控制value,用户输入触发onChange事件,更新React状态,进而更新输入框的值。通过onChange事件拿到用户输入,调用setValue触发视图的重新渲染。

核心思想流程:

  1. 声明一个react状态------useState
  2. 通过value属性绑定react状态
  3. 绑定onChange事件,通过事件参数拿到输入框最新的值,反向修改react状态。
js 复制代码
import { useState } from "react"

function App() {
    const [value, setValue] = useState('hello')

    function onChange(event){
        console.log(event.target.value);
        setValue(event.target.value.toUpperCase()) // 受代码控制
    }
    return(
        <input type="text" value={value} onChange={onChange}/>
    )
}

三、总结建议

  1. 优先使用受控组件:在大多数场景下,受控组件提供更可预测的状态管理和更好的交互体验。
  2. 谨慎使用非受控组件:仅在简单表单、文件上传或与第三方库集成时选择非受控模式。
  3. 混合使用:在复杂表单中,可以组合使用两种模式(如部分字段受控,部分非受控)。
  4. 性能优化 :对于受控组件,可使用useCallbackuseMemo减少不必要的渲染。
相关推荐
燕山石头6 分钟前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_12 分钟前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js
YGY_Webgis糕手之路13 分钟前
Cesium 快速入门(三)Viewer:三维场景的“外壳”
前端·gis·cesium
丘色果24 分钟前
NPM打包时,报reason: getaddrinfo ENOTFOUND registry.nlark.com
前端·npm·node.js
姜太小白31 分钟前
【前端】CSS Flexbox布局示例介绍
前端·css
我命由我123451 小时前
Spring Boot 项目问题:Web server failed to start. Port 5566 was already in use.
java·前端·jvm·spring boot·后端·spring·java-ee
南囝coding1 小时前
最近Vibe Coding的经验总结
前端·后端·程序员
前端小咸鱼一条1 小时前
React组件化的封装
前端·javascript·react.js
随便起的名字也被占用2 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet
南方kenny2 小时前
TypeScript + React:让前端开发更可靠的黄金组合
前端·react.js·typescript