大家好，我是那个曾经把所有依赖都装在dependencies里，结果打包后的项目像个"超级大胖子"的前端开发。今天，我要和大家聊一聊React世界里的两个重要话题：依赖管理和表单的受控vs非受控模式。
依赖管理：谁该留在最终的"派对"里？
在前端项目中，package.json就像是一个"派对名单"，而dependencies和devDependencies则决定了谁能参加最终的"正式派对"。
dependencies：正式派对的VIP嘉宾
dependencies里的依赖就像是派对的VIP嘉宾——项目开发完成后，打包时，他们的源代码会被一起打包进来。这些依赖是项目运行所必需的，就像派对上不能缺少的主角和音响设备。
比如React、Vue这样的框架，或者lodash、axios这样的工具库，它们都应该坐在dependencies这个VIP区域。
devDependencies：幕后的工作人员
devDependencies里的依赖则像是派对的幕后工作人员——只在开发过程中有意义，不会被打包到最终的项目代码中。他们负责布置场地、调试设备，但当派对正式开始时，他们就悄悄退场了。
比如webpack、babel、eslint这些构建工具和代码检查工具，还有Jest这样的测试框架，都应该待在devDependencies这个幕后区域。
小技巧：使用
npm install --save或yarn add安装生产依赖，使用npm install --save-dev或yarn add --dev安装开发依赖。
React表单的"控制权之争"：谁说了算？
在React世界里，表单组件的"控制权"是一个永恒的话题。到底是让用户直接控制输入值，还是让代码来"把关"？这就像是一场"控制权之争"。
非受控模式：给用户最大的自由
非受控模式就像是给了用户一张"无限额度的信用卡"——你能用代码设置表单的初始值，但是一旦用户开始输入，你就再也无法通过代码修改value了。能修改value的，只有用户自己。
想象一下：你在表单里设置了一个默认的用户名，但用户可以随意修改它，而你只能在旁边看着，无能为力。
// 非受控组件的简单示例
function UncontrolledInput() {
const inputRef = useRef(null);
// 只能获取值，不能直接设置值
const getValue = () => {
console.log(inputRef.current.value);
};
return (
<>
<input ref={inputRef} defaultValue="默认用户名" />
<button onClick={getValue}>获取值</button>
</>
);
}
受控模式：代码来做"把关人"
受控模式则像是在用户和表单之间加了一个"把关人"——表单的值完全由React的state控制，用户的输入会触发onChange事件，更新state，然后state再驱动表单显示新的值。
这就像是：用户想修改一个值，必须先告诉把关人，把关人检查没问题后，才会帮用户更新表单的值。
// 受控组件的简单示例
function ControlledInput() {
const [value, setValue] = useState("默认用户名");
// 可以随时通过代码修改值
const changeValue = () => {
setValue("新的用户名");
};
return (
<>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button onClick={changeValue}>修改值</button>
</>
);
}
受控vs非受控：谁是"最佳选择"？
有趣的是，文档里提到"通常情况下，不推荐使用受控模式"。但在实际开发中，这个观点可能需要辩证地看待。
- 如果你需要对用户输入进行实时验证、格式化，或者需要在多个表单字段之间同步数据，受控模式会是更好的选择。
- 如果你只是需要一个简单的输入框，不需要太多的干预，非受控模式可能会更简单直接。
就像是：如果你开的是一家高级餐厅，可能需要服务员（受控模式）来引导顾客；但如果你开的是一家自助餐厅，让顾客自由选择（非受控模式）可能会更高效。
写在最后
依赖管理和表单控制模式，看似是React开发中的小问题，但实际上反映了前端开发中的一个重要思想：合理的架构和设计，可以让你的代码更高效、更易维护。
下次你再安装依赖时，不妨多想一想：这个依赖是需要陪我走到最后的"VIP"，还是只是来帮我搭个台子的"临时工"？
当你设计表单时，也可以多问自己：这个表单需要严格的"把关人"，还是可以给用户更多的自由？
希望这篇文章能帮助你更好地理解React中的这两个概念。如果你有不同的看法，欢迎在评论区留言讨论哦～
小贴士：在大型项目中，合理使用受控组件和状态管理库（如Redux、MobX等），可以让你的表单逻辑更加清晰、易于维护。而正确地区分生产依赖和开发依赖，则可以让你的项目体积更小，加载更快！
