这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
上篇 主要拓展了 JSX 表达式的使用示例
本篇主要内容为 React 组件化基础，组件化基础共三篇，预告如下：
- 组件类型介绍和参数传递
- 组件插槽 slot 和组件状态
- 组件生命周期函数和上下文
React - 组件介绍
组件化是前端页面快速搭建的核心，是现代前端领域必要掌握的基础技术
简要来说就是把页面某块区域进行代码剥离（模板、样式、行为逻辑）
该区域代码集中写在一个地方进行管理，这个动作即是：组件封装
如此也使得该块区域代码与整个页面代码没什么代码交杂糅合 即减轻甚至解除了该块代码和页面代码的耦合度，即：组件化实现了解耦 组件化相关内容不做过多介绍
React - 组件类型介绍
React 是基于组件的方式进行用户界面开发的，在 React 中存在两种类型的组件：
- 类组件
类组件在编写时，需要使用 class 定义一个类实现
且该类需使用 extends 继承自 React 中的 Component 类
类组件 class 内部主要需实现 render 方法，该方法的返回值便是该组件需要被渲染的内容
import React, { Component } from 'react'
class App extends Component {
render () {
return <div>醒途</div>
}
}
- 函数组件
函数组件相对类组件来讲，实现方式就简单许多
只需定义一个函数，该函数返回值即是需要渲染到页面上的组件内容
import React from 'react'
const App = () => {
return <div>醒途</div>
}
组件名称为大驼峰命名方式，首字母必须大写，以和普通标签进行区分
两种实现方式的代码中都没有使用 React，为什么要引入 React？
因为 JSX 语法在实际运行前会被编译转换，转换后的代码实际会使用 React.createElement 方法创建页面元素
因此就需要先引入 React，否则编译后的代码在运行时使用 React.createElement 时找不到 React 是会报错的
通常来讲，在一些 IDE 里使用 React 时，会在 IDE 上就会显示没有引入 React 的化 JSX 语法就会提前报错
React - 组件传参和收参
传参
和 Vue 传参相同，即以标签属性的书写方式那样，像组件内传递参数
收参
在组件中可以通过 props 对象获取到外部传递进来的所有参数
使用函数组件方式来个示例，如下：
// 父组件
// 定义一个 user 变量，把 user name 传递到子组件中
// 传递的参数名称为 userName，书写方式和属性书写方式一样，可使用表达式
const App = () => {
const user = { name: "醒途" }
return (
<div>
<User userName={user.name} />
</div>
)
}
// 子组件
// 通过 props 接收父组件传入的所有参数
// 获取到 userName 并显示
const User = props => {
const { userName } = props
return <div>{userName}</div>
}
本篇为 React 系列第 3 篇
vx👦:mmm7nnn
公号🐓：醒途
邮箱📧：suanzao@wacai.com（欢迎找我内推）
如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力
