目录
一、生命周期(类组件才有生命周期)
概念：react组件实例从创建运行到销毁经历的一系列过程
钩子函数：
挂载时：
constructor：创建组件时，最先执行，初始化时只执行一次。可初始化state，创建Ref
render：每次组件渲染都会触发
componentDidMount：组价挂载完成DOM渲染后执行，初始化时执行一次。可以发送网络请求和DOM操作
更新时：
render：每次组件渲染都会触发
componentDidUpdate：组件更新后，DOM渲染完成。可以获取更新后的DOM内容
卸载时：
componentWillUnmount：组件卸载，从页面消失。可执行清理工作
二、Hooks
1、概念：
是一些可以让你在函数组件里“钩入”react state及生命周期等特性的函数
2、特点：
组件之间复用状态逻辑，不需要修改组件的结构
可将组件中互相关联的部分拆分成更小的函数
在不编写class的情况下使用state以及其他的react特性
3、函数作用
函数主要作用，通过数据渲染ui界面
除主要作用之外的操作为副作用
如：操作DOM节点
Ajax网络请求
4、Hooks
1、State Hook使用：
1、导出
import {useState} from "react"
2、定义状态
const [num,setNum] = useState(0)
3、使用值
<p>{num}</p>
num:值，每次更新后的值
setNum:更改值
箭头函数内的语句每次执行都会将整个程序从头到尾的执行一次
2、Effect Hook
1、作用：在函数组件中添加副作用操作的hooks钩子函数
2、使用：
1、导入useEffect
2、useEffect(()=>副作用)
3、执行时机：
1、默认：无参数，初始执行，每次状态数据更新就会执行一次
类似class类组件中的componentDidUpdate生命周期函数
2、依耐项为[]：只在初始化执行页面进入时执行一次，网络请求时可使用
3、依耐项为状态数据，可以为多个[num,msg]，初始化执行，状态数据变化时执行
4、类似于vue中的计数器和侦听器
4、清理副作用
useEffect(()=>{
return ()={
//清理副作用的代码
}
})
3、Context Hook
1、利用跨组件通讯的方式，需要定义一个公共的React.createContext()
2、在传参的部分使用React.createContext(参数)
import React from "react";
export const MessageContext = React.createContext()
3、在传参的组件中使用.Provider定义value的方法传值，将需要接收的子组件包裹在.Provider中
state={
content: '这是ComA组件数据',
}
<MessageContext.Provider value={this.state.content}>
<ComA />
</MessageContext.Provider>
4、在接收的组件中利用useContext方法将定义的createContext中传送的参数传输进来
const message = useContext(MessageContext)
5、在需要此参数的地方直接使用{message}
注：需要应用参数的组件都要导入同一个React.createContext()，使用useContext方法需要导入
4、Hook 规则
不能在除了函数组件之外的地方使用，比如：分支语句，循环语句，内部函数中执行
5、自定义Hook
1、新建文件在文件中定义函数组件，函数组件中封装方法
2、在需要使用的地方利用import导入并使用
三、其他
1、日期时间转字符串：toLocaleTimeString()
2、获取接口的方法fetch类似于Ajax技术，返回一个promise对象，无拦截器
语法:
fetch('接口地址')
.then(response=>response.json()) //返回一个promise对象
.then(data = > console.log(data)) //返回真正的数据
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
