当前位置：首页> 正文

react自带组件有哪些

1、Component

这是 React 中最常见与最通用的组件创建方式：

class Container extends React.Component {
  construcor (props) {
    super(props);
    this.state = {};
  }
  render () {
    return (
      <div className="container">{ this.props.children }</div>
    );
  }
}

2、Smart 组件

Smart 组件又称为容器组件，它负责处理应用的数据以及业务逻辑，同时将状态数据与操作函数作为属性传递给子组件；

一般而言它仅维护很少的 DOM，其所有的 DOM 也仅是作为布局等作用。

3、Dumb 组件

Dumb 组件又称为木偶组件，它负责展示作用以及响应用户交互，它一般是无状态的（在如 Modal 等类组件中可能会维护少量自身状态）；

一般而言 Dumb 组件会拆分为一个个可复用、功能单一的组件；

因此 Dumb 组件使用函数式组件定义，当其需要对重渲染进行优化时则可以使用 PureComponent。

所以 Smart 组件更多关注与数据以及业务逻辑，而 Dumb 组件与数据和业务解耦，主要复杂 UI 层面的展示与交互。

4、PureComponent

首先我们来理解下 React 组件执行重渲染（re-render）更新的时机，一般当一个组件的 props （属性）或者 state （状态）发生改变的时候，也就是父组件传递进来的 props 发生变化或者使用 this.setState函数时，组件会进行重新渲染（re-render）；

而在接受到新的 props 或者 state 到组件更新之间会执行其生命周期中的一个函数 shouldComponentUpdate，当该函数返回 true 时才会进行重渲染，如果返回false 则不会进行重渲染，在这里 shouldComponentUpdate 默认返回 true；

因此当组件遇到性能瓶颈的时候可以在 shouldComponentUpdate 中进行逻辑判断，来自定义组件是否需要重渲染。

PureComponent 是在 react v15.3.0 中新加的一个组件，从 React 源码中可以看到它是继承了 Component 组件：

/**
 * Base class helpers for the updating state of a component.
 */
function ReactPureComponent(props, context, updater) {
  // Duplicated from ReactComponent.
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}
function ComponentDummy() {}
ComponentDummy.prototype = ReactComponent.prototype;
var pureComponentPrototype = (ReactPureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = ReactPureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(pureComponentPrototype, ReactComponent.prototype);
pureComponentPrototype.isPureReactComponent = true;