什么是组件

在前端 ，组件是视图的片段

• 包含
  • 视图标记
    • 如 Vue 的 Template，React 的 JSX
    • 不是真实的DOM的HTML。要经过一系列的转化，最终成为真实的 DOM
  • 事件
    • 绑定事件处理函数
  • 数据
    • 内部管理的
  • 逻辑
    • 通过一种方法，从一个东西变为另一个东西，从运算的角度来说产出需要结果的过程
  • 外部的配置

组件一般是
内部管理数据集合 ( state )
外部传入配置集合 ( props )

类组件

组件类 -> 类组件
点击查看【codepen】

函数组件

hooks 来做
点击查看【codepen】

组渲件染的过程

1. React 主动调用 Test 组件
2. 将属性集合转换对象 Props => { title:’This is a Function Component.’ }
3. 将对象作为 props 传入组件
   • 函数组件传入形参
   • 类组件传入其构造器并且 super 执行
4. 替换 JSX 中的 props 或者 state 中的变量

5. ReactDOM 将最终 React 元素通过一系列操作转换成真实的DOM进行渲染

   组件调用规范

6. 视图标记时 HTML 标签 <div></div>

7. 大驼峰写法作为一个React元素 <Test /> 组件 -> JSX -> React元素

   <Test title="This is a Class Component." />

8. 组件转换 React 元素

   React.createElement(Test, {
   title: 'This is a Class Component.'
   })

   组合组件 和 组件嵌套

   把多个组件拆分出来，然后组合为一个组件中（App）

属性 props 和 数据/状态 state 区别

1. state => 数据池
   • 对象 组件内部管理数据的容器
   • 组件内部可写可读
2. props => 属性池
   • 对象 外部调用组件时传入的属性集合
   • 组件内部可读不可写

组件外部的数据 -> 组件内部是不应该有权限修改

state 与 props 的结合

假如 props 中有值 content
content => props => outer => 外部配置
state => content => default => props.content

state 与 props 结合完成组件内部状态的改变

props 的只读性

函数组件注意

函数组件一定要是一个纯函数
纯函数能保证绝对的复用性

1. 相同的入参保证返回相同的结果
2. 纯函数不可以修改入参
   • 从设计上讲，在函数内部更改入参，其实是在组件运行时更改外部的配置。
   • 配置意义丧失
   • 该配置是使用组件者希望通过该配置达到对应的结果