【React】04-关于React Props的实践

背景

React 组件相互传参时，除了用state，还会经常看到一个Props对象，关于它的面纱及两者区别，将在文本进行实践及分析。

分析

React 中的 props 是用于从父组件向子组件传递数据的一种机制。props 是一个包含了传递给组件的属性的对象。通过使用 props，可以使组件之间实现数据的传递和通信。

1. 传递数据： 父组件通过在子组件上使用属性的方式将数据传递给子组件。这样，子组件就能够访问和使用这些数据。

// 父组件
<ChildComponent name="John" age={25} />
  // 子组件
  const ChildComponent = (props) => {
    console.log(props.name); // 输出: John
    console.log(props.age);  // 输出: 25
    // ...
  };

2. 不可变性（Immutability）：props 是只读的，子组件不能直接修改传递给它们的 props。这有助于维护数据的单一来源，并且有助于追踪数据的变化。

3. 默认值（Default Values）： 可以为 props 指定默认值，以确保在未提供特定属性时组件仍能正常工作。

// 在子组件中指定默认值
const ChildComponent = (props) => {
  const { name = 'Guest', age = 0 } = props;
  // ...
};

5. 类型检查（Type Checking）： 使用 PropTypes 库等工具可以对 props 进行类型检查，以确保组件得到正确类型的数据。

import PropTypes from 'prop-types';

const ChildComponent = (props) => {
  // ...
};

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

5. 解构赋值（Destructuring）： 通过解构赋值，可以更方便地从 props 中提取需要的属性。

const ChildComponent = ({ name, age }) => {
  // 使用解构赋值从 props 中提取属性
  // ...
};

6. 传递函数： 除了传递数据外，还可以通过 props 将函数传递给子组件，以实现父子组件之间的交互。

// 父组件
const ParentComponent = () => {
  const handleClick = () => {
    // 处理点击事件的逻辑
  };

  return <ChildComponent onClick={handleClick} />;
};

// 子组件
const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
};

和state区别

props（属性）和state（状态）虽然它们可用于处理组件间的数据传递和组件内部的状态管理，但**props是只读的，**子组件不能直接修改传递给它们的 props，而state 是可变的，可以通过调用 setState 方法来更新组件的状态。