Props 与 State 区别、props 只读原则

一、Props 是什么Propsproperties是父组件传递给子组件的数据。特点外部传入子组件只能使用不能修改用于组件之间通信示例function Child(props) { return h1{props.name}/h1; } function App() { return Child name张三 /; }这里name张三就是父组件传给子组件的 props。子组件通过props.name接收。二、State 是什么State是组件自己内部维护的数据。特点组件内部管理可以修改数据变化会触发重新渲染用于组件自身状态管理示例import { useState } from react; function Counter() { const [count, setCount] useState(0); return ( button onClick{() setCount(count 1)} {count} /button ); }这里count就是 state。setCount用于修改 state。三、Props 与 State 的区别对比项PropsState数据来源父组件传入组件内部是否可修改❌ 只读✅ 可修改谁管理父组件当前组件作用组件通信状态管理数据变化是否刷新页面会会四、Props 只读原则非常重要React 有一个核心原则Props 是只读的Read Only意思props.xxx 新值是不允许的。❌ 错误示例function Child(props) { props.name 李四; // 错误 return h1{props.name}/h1; }为什么不允许因为props 是父组件的数据子组件不能随便改父组件数据会导致数据流混乱React 的数据流是父组件 → 子组件叫单向数据流One Way Data Flow五、如果子组件想修改数据怎么办正确做法父组件传函数给子组件。示例function Child({ count, setCount }) { return ( button onClick{() setCount(count 1)} 1 /button ); } function App() { const [count, setCount] useState(0); return ( Child count{count} setCount{setCount} / ); }这里数据在父组件子组件通过调用函数修改符合 React 单向数据流六、一个非常经典的理解你可以这样记Props像函数参数例如function add(a, b) {}Reactfunction Child(props) {}State像组件自己的变量但它是响应式的更新后会重新渲染页面七、实际开发中的使用场景Props 适合父子传值组件复用配置组件例如Button typeprimary / Card title文章标题 /State 适合输入框内容开关状态登录状态loading表格数据计数器八、React 官方思想很重要React 推崇UI f(state)即UI 是 state 的映射。state 改变→ UI 自动更新。九、面试高频总结建议记住Props父组件传递的数据只读不能修改用于组件通信State组件内部状态可修改修改后触发重新渲染用于动态数据管理React 数据流单向数据流 父 → 子子组件修改父组件数据父组件传函数 子组件调用函数