React 三个重要概念Ref、Props、State 详解在 React 中props、state和ref都非常重要。可以简单理解为名称作用修改后是否重新渲染props父组件传递给子组件的数据通常会state组件内部管理的数据会ref获取 DOM 或保存可变数据不会一、props组件之间传递数据props是父组件传递给子组件的数据。1. 基本使用function Parent() { return Child name小明 age{18} / } function Child(props) { return ( div 姓名{props.name} br / 年龄{props.age} /div ) }也可以直接解构function Child({ name, age }) { return ( div 姓名{name} br / 年龄{age} /div ) }2. 传递不同类型的数据function Parent() { const user { name: 小明, age: 18 } return ( Child name小明 age{18} isStudent{true} user{user} / ) }注意name小明传递的是字符串。age{18} isStudent{true} user{user}花括号中可以传递数字、布尔值、变量、对象、数组或函数。3. props 是只读的子组件不应该直接修改propsfunction Child(props) { // 不推荐这样做 props.name 小红 return div{props.name}/div }props应该由父组件负责修改。如果子组件想通知父组件可以通过回调函数import { useState } from react function Parent() { const [message, setMessage] useState() return ( div p{message}/p Child onSend{setMessage} / /div ) } function Child({ onSend }) { return ( button onClick{() onSend(子组件传来的消息)} 发送消息 /button ) }4.children属性组件标签中嵌套的内容会通过children属性传递function App() { return ( Card p这是卡片内容/p /Card ) } function Card({ children }) { return div classNamecard{children}/div }二、state组件内部的数据state是组件内部自己管理的数据。当state发生变化时React 会重新渲染组件。1. 基本使用import { useState } from react function Counter() { const [count, setCount] useState(0) function handleClick() { setCount(count 1) } return ( button onClick{handleClick} 点击次数{count} /button ) }这段代码中const [count, setCount] useState(0)表示count当前状态值setCount修改状态的方法0状态初始值2. 不要直接修改 state错误写法count count 1正确写法setCount(count 1)修改对象或数组时也要创建新的对象或数组const [user, setUser] useState({ name: 小明, age: 18 }) setUser({ ...user, age: 19 })修改数组const [list, setList] useState([]) setList([ ...list, 新数据 ])3. 根据旧值修改 state如果新状态依赖旧状态推荐使用函数形式setCount(prevCount prevCount 1)例如function handleClick() { setCount(prev prev 1) setCount(prev prev 1) }这样可以确保状态基于最新值进行更新。4. state 的特点state通常用于保存输入框的内容计数器的数字是否显示弹窗当前选中的菜单商品数量加载状态列表数据只要数据变化后需要更新页面就应该考虑使用state。三、ref获取 DOM 或保存可变数据ref主要有两个用途获取 DOM 元素保存一个变化后不需要重新渲染页面的数据1. 获取 DOM 元素import { useRef } from react function App() { const inputRef useRef(null) function handleFocus() { inputRef.current.focus() } return ( div input ref{inputRef} / button onClick{handleFocus} 聚焦输入框 /button /div ) }执行过程useRef(null)创建一个 ref 对象。ref{inputRef}绑定到输入框。输入框 DOM 元素会保存到inputRef.current。调用inputRef.current.focus()让输入框获得焦点。2. ref 保存可变数据import { useRef } from react function App() { const countRef useRef(0) function handleClick() { countRef.current 1 console.log(countRef.current) } return button onClick{handleClick}点击/button }修改countRef.current不会触发组件重新渲染。3. State 和 Ref 的区别如果数据变化后需要显示到页面上使用stateconst [count, setCount] useState(0)如果数据变化后不需要更新页面使用refconst countRef useRef(0)例如页面上的计数器使用state保存定时器 ID使用ref输入框自动聚焦使用ref保存上一次的值可以使用ref四、props、state 和 ref 的区别PropsChild name小明 /特点来自父组件子组件只能读取不能直接修改用于组件之间传递数据Stateconst [count, setCount] useState(0)特点由组件自己管理使用 setter 修改修改后会触发重新渲染用于保存页面需要显示的数据Refconst inputRef useRef(null)特点可以获取 DOM 元素可以保存可变数据修改.current不会触发重新渲染适合操作 DOM、保存定时器等数据五、实际开发中如何选择可以按照下面的方式判断父组件传给子组件的数据 使用 props 组件内部需要显示的数据 使用 state 需要操作 DOM 元素 使用 ref 数据变化但不需要刷新页面 使用 ref例如function App() { const inputRef useRef(null) const [text, setText] useState() return ( div input ref{inputRef} value{text} onChange{event setText(event.target.value)} / p输入内容{text}/p button onClick{() inputRef.current.focus()} 聚焦输入框 /button /div ) }这段代码中text是state因为它需要显示在页面上。inputRef是ref因为它用于操作输入框 DOM。如果把数据传给子组件就会使用props。六、总结React 中的三个重要概念可以这样记忆props父组件传给我的数据 state我自己管理并且会影响页面的数据 ref我想直接操作 DOM 或保存数据但不想触发重新渲染最简单的判断方法是页面要不要随着数据变化而更新如果需要使用state如果不需要可以考虑使用ref。