类组件和函数组件

• 类组件生命周期
• 函数组件与类组件的区别
• 函数组件定义响应式数据
• 函数组件合成事件

1.类组件生命周期

jsx语法 [循环判断] render 渲染函数 return 合成事件 event

组件生命周期 —个组件从诞生创建-----销毁整个阶段 每个小阶段创建一瞬间可以去做什么事情

生命周期的钩子函数在某个阶段去处理什么样的事情

vue 的生命周期：

​ 创建 beforCreate created

​ 挂载 beforMount Mounted

​ 更新 beforUpdate updated

​ 销毁/卸载 beforDestroy destroyed

react 的生命周期：（组件注册完成 组件卸载之前）

​ 组件注册完成:componentDidMount

​ 组件卸载之前:componentWillUnmount

react 重要的周期钩子函数：

componentDidMount： 1.获取到真实dom节点 2.请求接口数据 并重新渲染

componentWillUnmount : 1.清除全局事件（srcoll resize 定时器 延时器）

componentDidUpdate: 1.数据更新之后 获取最新数据

2.体验 挂载完成周期 echarts 画统计图

• 安装echarts

npm install  echarts 
或 
yarn  add echarts 

• 项目中导入ecarts

import * as echarts from 'echarts'

• 使用echarts 画图

准备一个 必须有宽高的容器 div

<div id="chart1"  style="width=300px;height:500px"> </div>

通过echarts .init （） 进行画图 --【因为要获取真实dom 只能放在挂载完成周期 或该周期之后】

option 需要在 示例中心 直接复制粘贴即可

let myChart = echarts.init(document.querySelector('#chart1'))

//画图所有的配置 与 数据
const option = {}

//完成画图
myChart.setOption(option)