一、了解 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
。
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
触发视图的重新渲染。
核心思想流程:
- 声明一个
react
状态------useState
- 通过
value
属性绑定react
状态 - 绑定
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}/>
)
}
三、总结建议
- 优先使用受控组件:在大多数场景下,受控组件提供更可预测的状态管理和更好的交互体验。
- 谨慎使用非受控组件:仅在简单表单、文件上传或与第三方库集成时选择非受控模式。
- 混合使用:在复杂表单中,可以组合使用两种模式(如部分字段受控,部分非受控)。
- 性能优化 :对于受控组件,可使用
useCallback
和useMemo
减少不必要的渲染。