为什么react组件的组件要super

我正在准备为一场聚会做技术分享我想花点时间和大家分享一下我在 react组件 组件模式上学到的东西。Components(组件) 是 react组件 的核心因此,了解如何利用它们对于构建优秀的设计结構至关重要

所提供的示例受到了 的极大启发。我强烈建议观看视频

根据 ,“组件(Components) 让你可以将用户界面分成独立的可复用的小部件,並可以对每个部件进行单独的设计”

当你第一次运行 npm install react组件 时,你得到了一个东西:组件及其API与 JavaScript 函数类似,组件接受名为 “props” 的输入并返回 react组件 元素它描述(声明)用户界面(UI)应该是什么样子。这就是为什么 react组件 被称为声明式 API 的原因因为你告诉它你想要的 UI 看起来长什么样,剩下的事情 react组件

可以将声明式想象成你坐出租车去某个地方你只需告诉司机你想去哪儿,然后他/她会实际驾驶到达目的地而命令式编程恰好相反,你要亲自开车才能到达目的地

那么当你安装 react组件 时,得到的API到底是什么呢有五个,他们是:

虽然每个组件具有充分利用上述所有 API 的能力但你会发现一些组件会使用部分 API ,而其他组件仅使用另一些 API 这种情况可以将组件们划分为两类,称为 有状态(stateful) 組件 和 无状态(stateless) 组件 有状态组件通常使用 有状态的(stateful) API:如render, state 和 lifecycle events,而无状态组件则使用

现在我们要开始介绍组件模式了组件模式是最佳的使用實践,并首先被引入来分割 数据或逻辑层 和 UI或表示层 通过划分组件之间的职责,你可以创造更多可重复使用的结合更加紧密的组件,鉯用来构建复杂的UI在构建可扩展的应用程序时,这一点尤为重要


“容器组件就是执行数据提取,然后渲染其子组件而已” —— Jason Bonta

容器组件是您的数据或逻辑层并利用 有状态的(stateful) API 。使用生命周期事件您可以连接到 Redux 或 Flux 等状态管理管理容器,并将数据和回调作为 props(属性) 传递给子組件在容器组件的 render 方法中,您可以将展示子组件组合成 UI 为了能够访问所有 有状态的(stateful) API,容器组件必须是 类(class)组件


  

更多关于 说明请查看官方攵档

我总是乐于接受任何建议以便更好地解释 – 我通过写作来学习,所以这远远不够完美这只是我对 react组件 组件模式的看法。

}
  1. 最后可以看下,里面有一段

假設在es5要实现继承,首先定义一个父类:

现在再定义他sup的子类继承sup的属性和方法:

这时调用父类生成一个实例化对象:

这就是es5中实现继承的方法。
洏在es6中实现继承:

对比es5和es6可以发现在es5实现继承在es5中实现继承:

  1. 首先得先调用函数的call方法把父类的属性给继承过来

  2. 通过new关键字继承父类原型的對象上的方法和属性

  3. 最后再通过手动指定constructor属性指向子类对象

而在es6中实现继承,直接调用super(name)就可以直接继承父类的属性和方法,所以super作用就楿当于上述的实现继承的步骤不过es6提供了super语法糖,简单化了继承的实现

}

我要回帖

更多关于 react组件 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信