React 生命周期

react 生命周期是组件实例从创建运行到销毁的一系列过程
componentDidMount (挂载时)

componentDidUpdate （更新时）

componentWillUnmount （卸载时）

Hooks

Hook 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数,Hook 不能在class 组件中使用，常用Hook: useState()、useEffect()、useRef()、useContext()……

Hook 的特点

• 在组件之间复用状态逻辑，无需修改组件结构
• 将组件中互相关联的部分拆分成更小的函数，而并非强制按照生命周期划分
• 不编写 class 的清苦那个下使用 state 以及其他的 React 特性
  useState() 返回一对值，当前状态、更改状态方法
  导入

import React,{useState} from 'react'

定义状态 (msg: 当前状态 setMsg: 更改状态方法)

 const [msg,setMsg] = useState('初始值')

Effect Hook

Effect Hook：可以让你在函数组件中执行副作用操作

副作用：函数组件主要作用是通过数据渲染 UI 界面，处理这个之外的就是副作用

• ajax 请求
• 手动修改dom
• localstorsge 操作

小结：useEffect 是在函数组件中添加 副作用 操作的 hooks 钩子函数

执行时机

• 默认状态 - 首次执行 + 每次组件更新
• 添加空[] 首次执行
• 添加特定依赖项[count] - 首次执行 + 依赖项变化

① 默认情况，没有第二参数

初始执行，每次状态数据更新执行
class 类组件中，componentDidUpdate 生命周期函数

② 依赖行为[]

只在初始化执行
class 类组件中 componentDidMount

③ 依赖项目为状态数据可以是多个[msg,steMsg]

初始化执行，状态数据变化执行

④ 清理副作用

卸载时：componentWillUnmount

useEffect(()=>{
	return()=>{
		//清理副作用
	}
})

自定义 hooks

同步保存数据到 localStorage
(https://zhuanlan.zhihu.com/p/129789689)