忙碌了一上午，眼睛酸涩、脑子发懵？别急着刷短视频 “放空”，不如花几分钟和我一起 “品尝” 一道 React 面试题小甜点！就像在阳光洒满窗台的午后，泡一杯热茶，惬意又能悄悄涨知识，何乐而不为？最近，不少前端小伙伴都在为一个高频面试问题发愁：“React 中 props 和 state 到底怎么区分使用？” 这就像搞不清咖啡和奶茶该什么时候喝，别慌，咱们慢慢唠！

一、props：外界传递的 “礼物包裹”

props 全称 “properties”，它就像是别人送给你的包裹，只能接收，不能私自拆开修改。在 React 里，父组件通过 props 把数据传递给子组件，子组件拿到后只能查看、使用，不能直接改变它。比如我们做一个展示用户信息的子组件：

// 子组件UserInfo，接收props中的user数据
function UserInfo(props) {
return (
<div>
<p>用户名：{props.user.name}</p> {/* 展示props中的用户名 */}
<p>用户年龄：{props.user.age}</p> {/* 展示props中的用户年龄 */}
</div>
);
}
// 父组件中使用UserInfo子组件，并传递user数据
function ParentComponent() {
const user = {
name: "小明",
age: 25
};
return (
<div>
<UserInfo user={user} /> {/* 将user对象作为props传递给子组件 */}
</div>
);
}

props 最大的作用就是实现组件之间的数据传递，让子组件能根据不同的 “礼物包裹” 展示不同内容，就像不同口味的奶茶，带给你不一样的体验。

二、state：组件内部的 “小秘密”

state 就像是你藏在抽屉里的小秘密，只有自己能打开、修改。每个组件都可以有自己的 state，它用于存储组件自身会变化的数据，比如一个计数器的数值、一个开关的开闭状态。而且，当 state 发生变化时，组件会自动重新渲染，更新页面展示。看个简单的计数器例子：

import React, { useState } from'react';
function Counter() {
// 使用useState钩子创建count状态，初始值为0
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数：{count}</p> {/* 展示count状态的值 */}
<button onClick={() => setCount(count + 1)}>增加计数</button> {/* 点击按钮时，通过setCount更新count状态 */}
</div>
);
}

这里的count就是组件Counter的 state，它可以随时被修改，每次修改都会触发组件重新渲染，页面上的计数数字就会跟着变化。

三、什么时候用 props，什么时候用 state？

记住一个小口诀：“数据从外部来，就用 props；数据自己变，就用 state”。如果数据是由父组件或者其他地方传递过来，子组件只需要展示，不做修改，那就用 props；要是数据在组件内部产生、变化，影响组件自身的展示逻辑，那就用 state。

面试回答范本

当面试官问 “React 中 props 和 state 到底怎么区分使用？”，你可以这样回答：

“props 主要用于组件间的数据传递，就像传递包裹一样，子组件接收后只能使用，不能修改；而 state 是组件内部私有的数据，用来存储会变化的内容，比如计数器的值。当数据从外部传入，组件只负责展示时用 props；当数据在组件内部产生变化，影响组件自身渲染时就用 state。”

午休这短短几分钟，是不是感觉既放松又收获满满？要是觉得今天的小知识对你有帮助，动动手指点个赞，关注我，每天中午带你解锁更多有趣的 React 面试题！明天咱们继续相约，不见不散～