组件

本节目标：理解“组件”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。大应用会有很多功能，所以会有很多页面；为了

方便快速找到需要的功能；
也为了不早一次性渲染所有页面，减少不必要的渲染，加快需要页面的渲染

所有的应用都会安使用的便利进行分类，具体表现为：

菜单
导航
Tab标签最终会将大应用切分成小应用，有利于复用、维护；
可以将UI切分成一些独立的、可复用的组件，这样你就只需专注于构建每一个单独的部件；
组件从概念上类似于 JavaScript 函数。它接受任意的入参(props属性)，并返回用于描述页面展示内容的 React 元素；

函数(定义的)组件

函数组件接收一个单一的props对象并返回了一个React元素
组件名称必须以大写字母开头；
组件必须在使用的时候定义或引用它;
组件的返回值只能有一个根元素；
React元素不但可以是DOM标签，还可以是用户自定义的组件
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为props；

即：

function mountFunctionComponent(vdom) {
  let { type, props } = vdom;
  let renderVdom = type(props);
  vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
}

Jsx==描述了：==

==一个函数或类组件，这个函数或类最终返回描述====dom== ==结构的对象；也称虚拟dom====，他可以是最终会生成原生====dom 的函数或类====，也可以直接就是原生====dom ；==
==原生====dom==

注：先创建dom，再更新dom属性；

类(定义的)组件

也可以通过类定义组件
类组件的渲染是根据属性创建类的实例，并调用实例的render方法返回一个React元素

组件 ​

组件