前言
- 组件可以将UI切分成一些独立的,可复用的组件,这样你就只需专注于构建每一个单独的部件
- 组件从概念上类似于Javascript函数。它接收任意的入参(props属性),并返回用于描述页面展示内容的React元素
函数组件
- 函数组件接收一个单一的props对象并返回了一个React元素
- 组件名称必须以大写字母开头
- 组件必须在使用的时候定义或引用它
- 组件的返回值只能有一个根元素
- React元素不但可以是DOM标签,还可以是用户自定义的组件
- 当React元素为用户自定义组件时,它会将JSX所接收的属性转换为单个对象传递给组件,这个对象被称为props
函数组件示例
- 函数组件接收的参数会转为单个对象传给组件,props拿到的对象就是整合后的参数对象
- 函数组件就是一个接收props属性对象,返回React元素的一个函数
- 它的名称必须是大小字母开头,在React里面,是通过首字母大小来区分原生组件和内置组件的
- 必须先定义再使用
- 返回值只能有一个根元素
- React元素的类型可以是一个字符串,也可以是一个函数组件类型
函数组件实现原理
- 在react-dom.js中的createDOM中判断type类型如果是一个function,那么就调用mountFunctionComponent方法处理
mountFunctionComponent方法
- babel已将参数合并为props对象,我们拿到函数返回的虚拟dom后调用createDOM生成真实dom就可以了
函数组件儿子会被babel整合到函数组件的参数props的children字段里
类组件
- 在react中,类组件必须继承React.Component
- 类组件中有render方法,它会返回一个react元素
类组件实现原理
创建Component.js文件
- 用isReactComponent属性来标识是否是类组件
react.js引入并导出
react-dom中判断是类组件还是函数组件
- 如果是类组件,则调用mountClassComponent来处理
mountClassComponent方法
- 拿到类组件,创建实例,并传入props
- 调用render拿到类组件render返回的react元素
- 调用createDOM生成真实的dom,然后返回
处理事件
- 在react-dom.js里更新属性的方法uodateProps中加一层判断
- 如果属性符合正则以on开头,加一个大写字母,后面任意。则绑一个事件
- 把事件挂载到真实的dom上
- 这里我们先简单实现