React函数组件和类组件实现原理

430 阅读2分钟

前言

  • 组件可以将UI切分成一些独立的,可复用的组件,这样你就只需专注于构建每一个单独的部件
  • 组件从概念上类似于Javascript函数。它接收任意的入参(props属性),并返回用于描述页面展示内容的React元素

函数组件

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

函数组件示例

image.png

  • 函数组件接收的参数会转为单个对象传给组件,props拿到的对象就是整合后的参数对象
  • 函数组件就是一个接收props属性对象,返回React元素的一个函数
  • 它的名称必须是大小字母开头,在React里面,是通过首字母大小来区分原生组件和内置组件的
  • 必须先定义再使用
  • 返回值只能有一个根元素
  • React元素的类型可以是一个字符串,也可以是一个函数组件类型

函数组件实现原理

image.png

  • 在react-dom.js中的createDOM中判断type类型如果是一个function,那么就调用mountFunctionComponent方法处理

mountFunctionComponent方法

image.png

  • babel已将参数合并为props对象,我们拿到函数返回的虚拟dom后调用createDOM生成真实dom就可以了

函数组件儿子会被babel整合到函数组件的参数props的children字段里

image.png

类组件

image.png

  • 在react中,类组件必须继承React.Component
  • 类组件中有render方法,它会返回一个react元素

类组件实现原理

创建Component.js文件

image.png

  • 用isReactComponent属性来标识是否是类组件

react.js引入并导出

image.png

image.png

react-dom中判断是类组件还是函数组件

image.png

  • 如果是类组件,则调用mountClassComponent来处理

mountClassComponent方法

image.png

  • 拿到类组件,创建实例,并传入props
  • 调用render拿到类组件render返回的react元素
  • 调用createDOM生成真实的dom,然后返回

处理事件

image.png

  • 在react-dom.js里更新属性的方法uodateProps中加一层判断
  • 如果属性符合正则以on开头,加一个大写字母,后面任意。则绑一个事件
  • 把事件挂载到真实的dom上
  • 这里我们先简单实现