跳到主要内容

第5章：Props与State

5.1 简要说明​

Props（属性）和State（状态）是React组件中的两个核心概念，它们共同决定了组件的行为和表现。掌握Props与State的使用方式及其区别，是理解React组件化开发模式的重要一步。

  • Props：用于组件间的数据传递，是组件的外部输入，由父组件传递给子组件。
  • State：用于管理组件内部的数据状态，是组件的"记忆"能力，用于响应用户操作或数据变化。

本章将深入探讨Props与State的作用、使用场景及其区别，帮助读者掌握如何在React组件中合理使用这些概念。

5.2 关键知识点​

5.2.1 Props的作用与传递方式​

5.2.1.1 什么是Props？​

Props（Properties）是组件的属性，用于从父组件向子组件传递数据或配置信息。Props是只读的，意味着子组件无法直接修改Props的值。

5.2.1.2 Props的传递方式​

Props可以通过以下方式传递：

  1. 基本类型：传递字符串、数字、布尔值、数组、对象等基本数据类型。
  2. 函数：也可以作为Props传递，用于实现组件间的交互逻辑。
  3. 对象：通过对象形式传递多个Props。

5.2.1.3 示例​

// 父组件Parent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const greeting = "Hello from Parent!";
  
  return (
    <div>
      <ChildComponent 
        name="World"
        age={25}
        greet={greeting}
        interests={['Reading', 'Sports']}
        onClick={() => alert('Button Clicked!')}
      />
    </div>
  );
}

export default ParentComponent;
// 子组件ChildComponent.js
import React from 'react';

function ChildComponent({ name, age, greet, interests, onClick }) {
  return (
    <div>
      <h1>Hello {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Greeting: {greet}</p>
      <p>Interests: {interests.join(', ')}</p>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

export default ChildComponent;

5.2.2 State的作用与更新机制​

5.2.2.1 什么是State？​

State用于管理组件的内部数据状态，是组件的"记忆"能力。State是动态变化的，可以根据用户操作或外部数据变化进行更新。

5.2.2.2 State的更新机制​

React中的State是通过useState钩子函数进行管理的（在函数组件中）或this.state（在类组件中）。State的更新是异步的，且React会根据State的变化重新渲染组件。

5.2.2.3 示例​

// 使用useState的组件
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

5.2.3 Props与State的区别​

属性PropsState
作用从父组件向子组件传递数据管理组件内部的状态
可变性不可变（只读）可变（可以通过函数更新）
更新来源由父组件传递由组件内部逻辑或用户操作触发
生命周期在组件销毁时消失在组件销毁时消失
使用场景配置子组件的行为或传递初始数据处理组件的动态数据和交互逻辑

示例：Props与State的结合使用​

import React, { useState } from 'react';

// 父组件
function Parent() {
  const initialCount = 0;
  
  return (
    <Counter initialCount={initialCount} />
  );
}

// 子组件
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <h2>Current Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Parent;

5.3 小结​

  • Props用于组件间的数据传递，是只读的外部输入。
  • State用于管理组件内部的状态，是动态变化的。
  • 理解Props与State的区别有助于合理地设计组件的逻辑和数据流。

通过本章的学习，读者应该能够掌握如何在React组件中使用Props传递数据，如何管理State以及Props与State的区别。这些能力是构建React组件化应用的重要基础。

思考题：

  1. 为什么Props是只读的？如何保证 Props 的安全性和稳定性？
  2. State的更新机制是异步的，这有什么好处？如何处理复杂的State更新？
  3. 在实际开发中，如何判断该使用Props还是State？

接下来可以继续学习第6章：事件处理，了解React中如何响应用户交互事件。