React--类组件--关于props

话不多说，上例子！！！

我们从例子思考引入知识，可以看到下面这段代码

@connect((state) => {
  const { name } = state.global;
  const { id } = state.user;
  return {
    name,
    id,
  };
})
class MyComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      record: {},
      pageIndex: 0,
      total: 0,
      loading: false,
      dataSource: [],
      isShow: false,
      pageSize: 10,
    };
  }
}

首先解释代码：   

    @connect 是一个装饰器，接收一个函数作为参数，这个函数被称为 selector 函数。这个 selector 函数接收整个 Redux store 的 state 作为参数，并从中提取出 name 和 id，这两个值分别来自 state.global 和 state.user，它用于将 Redux store 的状态连接到 React 组件的 props 上，这个装饰器来自 react-redux 库。

    @connect 装饰器会将 selector 函数返回的对象合并到组件的 props 中。这意味着，在 MyComponent 组件内部，你可以通过 this.props.name 和 this.props.id 来访问这两个值。

    constructor 是一个特殊的构造方法，用于初始化一个由 class 创建的对象。在React组件中，当你使用 class 语法定义一个组件时，你通常会在这个组件内部定义一个 constructor。

    props 是传递给组件的属性的参数。在构造函数中，可以通过 props 参数访问这些属性。

         这里可以看到，super(props) 调用了父类（React.Component）的构造函数，并传递了 props 参数，以确保父类能够正确地设置组件的属性和状态。他与store传递并不冲突。

props的两个来源

    this.props是一个对象，它包含了传递给组件的所有属性，它是由两部分组成的：一部分是来自父组件直接传递的属性，另一部分是通过@connect从Redux store中映射过来的属性。

    @connect负责将Redux store中的状态映射到组件的props，而PureComponent则负责优化组件的渲染过程。同时使用它们，可以获得Redux状态管理和性能优化的好处。

关于PureComponent

        MyComponent组件继承自PureComponent，而不是Component。PureComponent是React.Component的一个子类，它实现了一个浅比较（shallow comparison）来优化组件的重新渲染。如果组件的props或state在浅比较中没有改变，PureComponent会阻止组件的重新渲染，这有助于提高性能。

最后，欢迎大家评论！！！