React 组件通信利器：props 和生命周期

2023-12-13 12:08:27

React 组件通信：揭开组件间数据传递的奥秘

在 React 应用中，组件之间的通信至关重要。本文将深入探讨 React 中组件通信的机制，涵盖 Props、生命周期以及 State 更新等关键概念。

Props：组件通信的桥梁

Props（属性）是 React 组件通信的核心。通过 Props，父组件可以向子组件传递数据。在子组件中，可以通过 this.props 访问父组件传递的数据。Props 就像一座桥梁，连接着父组件和子组件，使它们能够有效地交换信息。

特殊 Props.children 属性

props.children 是一种特殊属性，允许父组件向子组件传递任意数量的子组件。这在构建复杂的 UI 时非常有用。例如：

// 父组件
<ParentComponent>
  <ChildComponent1 />
  <ChildComponent2 />
</ParentComponent>

// 子组件 1
class ChildComponent1 extends React.Component {
  render() {
    return <div>子组件 1</div>;
  }
}

// 子组件 2
class ChildComponent2 extends React.Component {
  render() {
    return <div>子组件 2</div>;
  }
}

在父组件中，我们可以使用 props.children 来渲染子组件。这允许我们在构建 UI 时拥有更大的灵活性。

Props 的校验和默认值

为了确保组件接收的数据类型正确，React 提供了 prop-types 库进行 Props 校验。我们可以使用 static propTypes 属性来定义 Props 的类型。例如：

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
  };

  render() {
    return <div>
      <h1>{this.props.name}</h1>
      <p>年龄：{this.props.age}</p>
    </div>;
  }
}

如果传入 Props 的数据类型不符合 propTypes 的要求，React 将抛出一个错误。

此外，我们还可以为 Props 设置默认值。这在 Props 可能为 undefined 的情况下非常有用。使用 static defaultProps 属性即可设置默认值。例如：

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
  };

  static defaultProps = {
    name: '张三',
    age: 18,
  };

  render() {
    return <div>
      <h1>{this.props.name}</h1>
      <p>年龄：{this.props.age}</p>
    </div>;
  }
}

生命周期：组件的生命历程

生命周期是 React 组件的一个重要概念。它了组件从创建到销毁的整个过程。React 中有三个主要的生命周期阶段：

挂载阶段 ：组件被创建并插入到 DOM 中。
更新阶段 ：组件收到新的 Props 或 State，并重新渲染。
卸载阶段 ：组件从 DOM 中移除。

生命周期钩子函数

生命周期钩子函数是一系列由 React 提供的函数，允许我们在组件的生命周期特定阶段执行操作。这些钩子函数包括：

componentDidMount ：在挂载阶段执行，用于执行与 DOM 相关的操作，例如获取数据或设置定时器。
componentDidUpdate ：在更新阶段执行，用于响应 Props 或 State 的更改。
componentWillUnmount ：在卸载阶段执行，用于清理组件留下的资源，例如移除定时器或取消网络请求。

SetState 更新数据时会发生什么？

当使用 setState 方法更新组件 State 时，React 会执行以下步骤：

计划更新 ：setState 会将更新添加到组件的 State 队列中。
批量更新 ：React 会在合适的时间一次性执行所有排队的更新，以优化渲染效率。
调用 shouldComponentUpdate ：在批量更新之前，React 会调用 shouldComponentUpdate 方法。如果返回 false，则不会执行更新。
调用 render ：如果 shouldComponentUpdate 返回 true，则 React 会调用 render 方法重新渲染组件。
更新 DOM ：React 会根据新的渲染结果更新 DOM。