我正在准备为一场聚会做技术分享我想花点时间和大家分享一下我在 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组件 组件模式的看法。