useState
作用：函数组件添加状态
// 引入
improt React, { useState } from 'react'
function StateFunction(){
// 接收一个参数作为初始值，返回一个数组
// 第一个为状态，第二个为改变状态的函数
const [name, setName] = useState('函数')
return <div onClick=( () => { setName('改变函数')})>
点击改变
<div/>
}
export default StateFunction
useEffect
作用：给没有生命周期的组件，添加结束渲染的信号,render之后延迟执行
// 引入
improt React, { useState, useEffect } from 'react'
function StateFunction(){
const [num, setNum] = useState('函数')
// 入参： 第一个为结束渲染回调函数，第二个为依赖列表（只有依赖列表更新才会执行回调函数）
// @return {Function} 限制性返回函数
useEffect(() => {
console.log('函数组件结束渲染')
return () =>{
console.log('销毁')
}
}, [])
return <div onClick=( () => { setNum(num => num++)})>
点击改变
<div/>
}
export default StateFunction
useLayoutEffect
作用：给没有生命周期的组件，添加结束渲染的信号，在dom更新之后同步执行,比useEffect前执行，用法与useEffect一致
useMemo
作用: 让组件中的函数跟随状态更新,
如下代码，如果不使用
useMemo，每当改变age的值，getDoubleNum都会执行一次。
// 引入
improt React, { useState, useMemo } from 'react'
function StateFunction(){
const [num, setNum] = useState(1)
const [age, setAge] = useState(18)
// 第一个参数接收一个函数，第二个参数为依赖列表数组
// 返回一个值
const getDoubleNum = useMemo(() => {
console.log('获取双倍的num')
return num * 2
}, [num])
return <div onClick=( () => { setAge(age => age++)})>
点击改变 , {getDoubleNum}
<div/>
}
export default StateFunction
useCallback
作用： 跟随状态改变更新执行，useMemo(()=>fn, deps) 相当于 useCallback(fn, deps')；
与useMemo差异：useMemo返回的是一个值，useCallback返回的是一个函数
useRef
作用：长久保存数据
// 引入
improt React, { useState, useEffect, useRef } from 'react'
function StateFunction(){
const [num, setNum] = useState(1)
// 保存一个值在整个生命周期维持不变
// 重新赋值ref.current不会触发重新渲染
const ref = useRef()
useEffect(()=>{
ref.current = setInterval(() => {
setNum(num => num++)
}, 500)
}, [])
useEffect(()=>{
if(num > 10){
console.log('超过10', ref.current)
clearInterval(ref.current)
}
}, [])
return <div >
这是一个函数组件 , {num}
<div/>
}
export default StateFunction
useContext
作用：带着子组件去流量
注意：上层数据发现变化，肯定会触发重新渲染
// 引入
improt React, { useState, useContext, createContext } from 'react'
// 1. 通过createContext创建一个context句柄
// 2. 通过Context.Provider确定共享范围
// 3. 通过value来分发内容
// 4. 在子组件中，通过useContext（context句柄）来获取数据
const Context = createContext(null)
function StateFunction(){
const [num, setNum] = useState(1)
return <div >
这是一个函数组件 , {num}
// 所有Context.Provider的子组件都能共享到父组件的值
<Context.Provider value={num}>
<Item1 num={num} />
<Item2 num={num} />
</Context.Provider>
<div/>
}
function Item1 () {
const num = useContext(Context)
return <div> 子组件1 - {num} <div/>
}
function Item2 () {
const num = useContext(Context)
return <div> 子组件2 - {num} <div/>
}
export default StateFunction
useReducer
作用：复杂逻辑简单化
// 引入
improt React, { useState, useReducer } from 'react'
const store = {
num: 1
}
const reducer = (state, action) => {
switch(action.type){
case "changeNum":
return {
...state,
num: action.num
}
default:
return {
...state
}
}
}
function StateFunction(){
const [state, dispatch] = useReducer(reducer, store)
return <div onClik=()=>{
dispatch({
type: 'changeNum',
num: 100
})
}>
这是一个函数组件 , {state.num}
<div/>
}
export default StateFunction
