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;

相关学习推荐:react视频教程

以上就是react自带组件有哪些的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏