一、核心概念解析
1.1 什么是 props
在 React 中, props (properties 的缩写) 是组件的配置项。props 是由父组件传递给子组件的，从外部传入。对于接收 props 的子组件来说，props 是只读的，子组件不能修改自身的 props。props 的主要作用是让组件之间可以相互通信，实现数据的单向流动。
1.2 什么是 state
state 是组件内部维护的数据状态。与 props 不同，state 是组件自己创建、管理和销毁的。当组件需要响应用户交互 (如点击事件、表单输入) 或处理异步操作时，通常需要使用 state 来保存这些动态数据。state 的变化会触发组件的重新渲染。
二、state 与 props 的核心区别
2.1 数据的可变性
props 对于子组件来说是只读的，不能在子组件内部直接修改。如果需要修改 props，只能由父组件修改后再传递下来。而 state 是可变的，组件可以通过调用 setState (类组件) 或 useState 提供的更新函数 (函数组件) 来更新 state 的值。
2.2 数据的归属与流向
props 的归属权在于父组件，数据流向是自上而下的。state 的归属权在于组件自身，数据在组件内部流转。如果某个数据需要被多个组件共享，通常需要将这个数据提升到它们共同的父组件中，作为父组件的 state，然后通过 props 分发给各个子组件。
2.3 更新机制与视图渲染
当 props 发生变化时，通常是由父组件的 state 变化引起的，这会导致子组件的重新渲染。当组件自身的 state 发生变化时，组件本身会重新渲染。两者都会触发 React 的协调过程，最终更新 DOM。下面通过一个 Mermaid 流程图来直观展示 state 与 props 在组件数据流中的关系与区别：
#publish-mermaid-1785600709860-0{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#publish-mermaid-1785600709860-0 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#publish-mermaid-1785600709860-0 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#publish-mermaid-1785600709860-0 .error-icon{fill:#552222;}#publish-mermaid-1785600709860-0 .error-text{fill:#552222;stroke:#552222;}#publish-mermaid-1785600709860-0 .edge-thickness-normal{stroke-width:1px;}#publish-mermaid-1785600709860-0 .edge-thickness-thick{stroke-width:3.5px;}#publish-mermaid-1785600709860-0 .edge-pattern-solid{stroke-dasharray:0;}#publish-mermaid-1785600709860-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#publish-mermaid-1785600709860-0 .edge-pattern-dashed{stroke-dasharray:3;}#publish-mermaid-1785600709860-0 .edge-pattern-dotted{stroke-dasharray:2;}#publish-mermaid-1785600709860-0 .marker{fill:#333333;stroke:#333333;}#publish-mermaid-1785600709860-0 .marker.cross{stroke:#333333;}#publish-mermaid-1785600709860-0 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#publish-mermaid-1785600709860-0 p{margin:0;}#publish-mermaid-1785600709860-0 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#publish-mermaid-1785600709860-0 .cluster-label text{fill:#333;}#publish-mermaid-1785600709860-0 .cluster-label span{color:#333;}#publish-mermaid-1785600709860-0 .cluster-label span p{background-color:transparent;}#publish-mermaid-1785600709860-0 .label text,#publish-mermaid-1785600709860-0 span{fill:#333;color:#333;}#publish-mermaid-1785600709860-0 .node rect,#publish-mermaid-1785600709860-0 .node circle,#publish-mermaid-1785600709860-0 .node ellipse,#publish-mermaid-1785600709860-0 .node polygon,#publish-mermaid-1785600709860-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785600709860-0 .rough-node .label text,#publish-mermaid-1785600709860-0 .node .label text,#publish-mermaid-1785600709860-0 .image-shape .label,#publish-mermaid-1785600709860-0 .icon-shape .label{text-anchor:middle;}#publish-mermaid-1785600709860-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#publish-mermaid-1785600709860-0 .rough-node .label,#publish-mermaid-1785600709860-0 .node .label,#publish-mermaid-1785600709860-0 .image-shape .label,#publish-mermaid-1785600709860-0 .icon-shape .label{text-align:center;}#publish-mermaid-1785600709860-0 .node.clickable{cursor:pointer;}#publish-mermaid-1785600709860-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#publish-mermaid-1785600709860-0 .arrowheadPath{fill:#333333;}#publish-mermaid-1785600709860-0 .edgePath .path{stroke:#333333;stroke-width:1px;}#publish-mermaid-1785600709860-0 .flowchart-link{stroke:#333333;fill:none;}#publish-mermaid-1785600709860-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785600709860-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#publish-mermaid-1785600709860-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785600709860-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#publish-mermaid-1785600709860-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#publish-mermaid-1785600709860-0 .cluster text{fill:#333;}#publish-mermaid-1785600709860-0 .cluster span{color:#333;}#publish-mermaid-1785600709860-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#publish-mermaid-1785600709860-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#publish-mermaid-1785600709860-0 rect.text{fill:none;stroke-width:0;}#publish-mermaid-1785600709860-0 .icon-shape,#publish-mermaid-1785600709860-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#publish-mermaid-1785600709860-0 .icon-shape p,#publish-mermaid-1785600709860-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#publish-mermaid-1785600709860-0 .icon-shape .label rect,#publish-mermaid-1785600709860-0 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#publish-mermaid-1785600709860-0 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#publish-mermaid-1785600709860-0 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#publish-mermaid-1785600709860-0 .node .neo-node{stroke:#9370DB;}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node rect,#publish-mermaid-1785600709860-0 [data-look=\”neo\”].cluster rect,#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].swimlane.cluster rect{filter:none;}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node path{stroke:#9370DB;stroke-width:1px;}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node .neo-line path{stroke:#9370DB;filter:none;}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].node circle .state-start{fill:#000000;}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785600709860-0 [data-look=\”neo\”].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#publish-mermaid-1785600709860-0 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}传递 props触发事件回调state 变化引发重渲染state 变化引发重渲染外部传入内部维护只读不可变可变可更新
父组件 Parent
子组件 Child
数据来源判断
作为 props 接收
作为 state 管理
用于组件间通信
用于响应用户交互
三、实战应用与代码示例
3.1 props 的传递与使用
父组件通过属性的形式将数据传递给子组件，子组件通过参数接收。
// 父组件
function ParentComponent() {
return <ChildComponent name="React" />;
}
// 子组件
function ChildComponent(props) {
return <h1>Hello, {props.name}</h1>;
}
3.2 state 的初始化与更新
在函数组件中，我们通常使用 useState Hook 来管理 state。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
3.3 state 与 props 的协同工作
在实际开发中，state 和 props 经常协同工作。父组件管理状态并通过 props 传递给子组件，子组件通过触发 props 中的回调函数来请求父组件更新状态。
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLogin = () => {
setIsLoggedIn(true);
};
return (
<div>
<Header isLoggedIn={isLoggedIn} onLogin={handleLogin} />
</div>
);
}
function Header(props) {
return (
<div>
{props.isLoggedIn ? <h1>欢迎回来</h1> : <button onClick={props.onLogin}>登录</button>}
</div>
);
}
四、总结与最佳实践
4.1 状态提升与单向数据流
React 遵循单向数据流的原则。当多个组件需要共享同一个状态时，应该将这个状态提升到它们的最近共同父组件中进行管理，然后通过 props 向下传递。这种方式被称为状态提升。
4.2 常见误区与避坑指南
不要直接修改 state，必须使用提供的方法更新。Props 是只读的，不要在子组件中尝试修改 props。如果一个数据可以通过 props 计算得出，就不要将它存为 state，保持 state 的最小化。
