React组件模式的详细介绍（附示例）
2020-11-27
来源：小奈知识网
组件是 React 的核心，因此了解如何利用它们对于创建优秀的设计结构至关重要。
什么是组件
根据 React 官网的介绍，“组件让你可以将 UI 分割成独立的、可重用的部分，并独立管理每个部分。”
当你第一次安装 npm install react 时，会得到一件事:组件及其 API。与 JavaScript 函数类似，组件接受名为 “props” 的输入并返回 React 元素，该元素描述(声明)用户界面(UI)的外观。这就是为什么 React 被称为声明性 API，因为你告诉它你希望 UI 是什么样子的，而 React 负责其余的工作。
可以把声明式想像成当打的去一个目的
地时，只需要告诉司机去哪里，他就会开车把你送到那里。命令式编程正好相反—，你得自己驾车到那里。
组件的 API
当安装 React 后，便可以使用 React 提供的 API，基本可以分成 5 种。
render
state
props
context
lifecycle events
尽管一个组件可以使用上述所有 API，但一个组件通常用到只有少数几个 API，而其他组件则只使用其他 API。
可以对组件使用不同的 API 对组件进行划分，分为 有状态（stateful） 和 无状态（stateless） 两种组件。
有状态组件通常使用 API: render, state 和生命周期相关事件。
无状态组件通常使用 API: render, props 和 context。
显示全文