组件的状态与属性（props & state）

在React中，**状态（state）和属性（props）**是组件中管理数据和行为的核心概念。理解它们的使用方式以及它们之间的区别，对于构建动态和交互式的React应用至关重要。

本章节将详细介绍React组件的属性（props）和状态（state），并通过示例演示如何在React中使用它们。

1. 属性（props）

props是组件的输入数据，它是由父组件传递给子组件的。组件通过props获取外部传递的值，并根据这些值来渲染UI。props是只读的，这意味着子组件不能修改props。

1.1 定义和传递props

父组件通过向子组件传递props来共享数据。子组件可以通过props访问父组件传递的值。

示例：父组件传递props给子组件

function Parent() {
  return <Child name="John" age={30} />;
}

function Child(props) {
  return <p>My name is {props.name} and I am {props.age} years old.</p>;
}

在上面的例子中，Parent组件将name和age作为props传递给了Child组件。Child组件通过props访问这些值并进行渲染。

1.2 使用解构简化props的访问

为了简化代码，可以在函数组件中使用解构赋值直接访问props中的值。

function Child({ name, age }) {
  return <p>My name is {name} and I am {age} years old.</p>;
}

1.3 props是只读的

props是不可修改的。如果在子组件中尝试修改props，React会发出警告。所有修改props的操作都应该在父组件中完成。

// 错误的做法
function Child(props) {
  props.name = "Jane";  // 不可修改props
  return <p>{props.name}</p>;
}

2. 状态（state）

state是组件的数据存储。与props不同，state是组件内部的私有数据，通常由组件本身管理。组件的状态可以通过用户交互、定时器、网络请求等方式发生变化。当state改变时，React会重新渲染组件，更新UI。

2.1 定义和更新状态

在类组件中，state通过构造函数中的this.state进行定义，并通过this.setState()方法进行更新。而在函数组件中，使用React Hooks（如useState）来定义和更新状态。

示例：类组件中定义和更新状态

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

示例：函数组件中定义和更新状态

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

2.2 状态的特点

状态是组件内部的私有数据：与props不同，state只能在组件内部使用和修改。它的作用是存储和跟踪组件内部的数据变化。 状态可以触发组件的重新渲染：当state发生变化时，React会重新渲染该组件及其子组件，从而更新UI。 通过setState()更新状态：更新状态时，React会合并新的状态与旧的状态，并触发重新渲染。

2.3 使用useState管理状态

React提供了useState Hook，允许在函数组件中管理状态。

import React, { useState } from 'react';

function ToggleButton() {
  const [isToggled, setIsToggled] = useState(false);

  const toggle = () => setIsToggled(!isToggled);

  return (
    <div>
      <button onClick={toggle}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

2.4 组件的状态和性能

局部状态更新：只有依赖于状态变化的组件才会重新渲染，因此可以通过拆分状态来优化性能。 状态提升：当多个组件需要共享相同的状态时，可以将该状态提升到它们的共同父组件，并通过props传递下去。

3. props与state的区别

特性propsstate
定义方式由父组件传递给子组件组件内部定义和管理
可变性不可修改，只读可修改，通过setState（类组件）或useState（函数组件）更新
触发渲染props变化会导致子组件重新渲染state变化会导致组件重新渲染
数据流向从父组件传递到子组件在组件内部流动，通常由用户交互或其他事件触发更新
生命周期在组件生命周期内保持不变可以在生命周期的任何阶段更新

4. 状态提升（Lifting State Up）

状态提升是React中的一种技术，用于将多个子组件共享的状态提升到它们的共同父组件中。通过这种方式，父组件可以控制这些子组件的状态并将其作为props传递给子组件。

示例：状态提升

function Parent() {
    const [selectedItem, setSelectedItem] = useState(null);

    return (
        <div>
            <ChildA selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
            <ChildB selectedItem={selectedItem} />
        </div>
    );
}

function ChildA({ selectedItem, setSelectedItem }) {
    return (
        <div>
            <button onClick={() => setSelectedItem('Item A')}>Select Item A</button>
            <p>Selected Item: {selectedItem}</p>
        </div>
    );
}

function ChildB({ selectedItem }) {
    return <p>Item {selectedItem} is selected in ChildB.</p>;
}

在上面的例子中，selectedItem的状态被提升到Parent组件中，并通过props传递给ChildA和ChildB。当ChildA组件的按钮被点击时，父组件更新selectedItem的状态，并将其传递给其他子组件。

5. 小结

  • props：由父组件传递给子组件的只读数据，用于控制子组件的外部表现。子组件不能修改props。
  • state：由组件自身管理的数据，通常用于管理组件内部的状态，如用户输入、UI状态等。state可以在组件内修改并触发重新渲染。
  • 状态提升：当多个组件需要共享相同的状态时，可以将该状态提升到父组件进行管理，并通过props传递给子组件。

掌握props和state的使用是构建React应用的基础，它们决定了组件之间的数据流动和交互方式。

Last Updated::