nodejs 020: React语法规则 props和state

props和state

在 React 中，props 和 state 是管理数据流的两种核心机制。理解它们之间的区别和用途是构建 React 应用程序的基础。

一、props 和 state的区别

特性	props	state
定义方式	由父组件传递给子组件的数据	组件内部管理的本地数据
是否可修改	不可变（只读）	可变（可以使用 setState 或 useState 修改）
数据流向	单向（从父组件流向子组件）	组件自身内部使用
用途	用于在组件之间传递数据	用于存储和管理组件内部的动态数据
是否触发重新渲染	变更会触发子组件重新渲染	更新状态会触发组件重新渲染

---

二、props（属性）

1. props 是什么？

• props 是父组件传递给子组件的数据。
• 它们是只读的，子组件不能直接修改 props。

2. props 的示例

// 子组件
import React from 'react';

function Child(props) {
   
   
  return <h1>{
   
   props.message}</h1>;
}

export default Child;

// 父组件
import React from 'react';
import Child from './Child';

function Parent() {
   
   
  return <Child message="Hello, React!" />;