1. 前言
1.之前写过一篇粗浅的文章 hook初识 介绍hook
2.今天总结下常用的hook
3.整体分为2部分 一部分是 fromreact的 hook
4.一部分是react-redux的hook
5.脚手架项目自己新建准备好
2. hook from 'react'
import { useState, useEffect, useReducer } from 'react'
3. useState
顾名思义 主要是用于
state,或者说用于state的封装,拆分模块
3.1 语法
const [state, setstate] = useState(initialState)
设置初始值
返回 数组 解构出 state和修改函数
state和修改函数名字可以自己改
3.2 使用
let [num, setNum] = useState(0)
布局
使用修改
<h1>{num} </h1>
<button onClick={() => { setNum(num+ 1) }}>+修改 num</button>
<button onClick={() => { setNum(num- 1) }}>-修改 num</button>
非常简单 的计数器 demo
3.3 使用单独的 state模块
0.单独的state 方便统一管理
state
1.state.js 内容
const user = {
test:'测试',
userInfo:{
name:'yzs',
job:'web'
}
}
export default user
2.使用引入
import myState from './state.js'
- 具体的使用
const [state, setState] = useState(myState)
let { userInfo, test } = state
配合解构赋值 用起来更丝滑
3.4 render
<h1> hook练习</h1>
<h1>{userInfo.job}--{test}</h1>
<div><button onClick={updateState}>修改 </button></div>
<hr />
3.5 修改函数的实现
let updateState = () => {
setState({
...state,
test: '改了',
userInfo: {
...state.userInfo,
job: '前端从业者',
age: 31
}
})
}
1.整体上 hook 一般都不实用
this
2.数据来源清晰
3.便于复用
4.注意引用类型的变量的修改方式
4. useEffect
这个我们一般理解成 生命周期的替代方案
// ****************DidMount+DidUpdate
useEffect(()=>{
console.log("初始化或者 更新的时候调用")
})
//****************DidMount
useEffect(() => {
console.log(' ----------初始化')
return () => {
//*****************WillUnMount
console.log("cleanup")
}
}, [])
//*******************DidUpdate
useEffect(() => {
console.log("初始化 或者 监听的对象改变的时候")
}, [num])
5. useReducer
1.这个并不是
react-redux里面的hook
2.其实这个reducer代表一种思想,修改函数的封装,独立成模块
3.所以并不是说非得是redux里面的reducer,当然redux的reducer也能用
5.1 reducer 准备
1.既然名字叫
reducer先准备个
2.还是简单的计数器为引子,开展
3.这个也可以单独起个模块/文件
let defaultState = {
count: 66666,
person: {
name: 'yzs',
city: '郑州'
}
}
//***********这块 action直接解构 并且赋初值
const reducer = (state, { type, payload=10 }) => {
switch (type) {
case 'increment':
return {
...state,
count: state.count + payload
}
case 'decrement':
return {
...state,
count: state.count - payload
}
case 'PERSON_UPDATE': {
console.log('对象修改:', payload)
return {
...state,
person: {
...state.person,
...payload
}
}
}
default:
return state
}
}
1.参数
state的初始值 也可以单独来个变量,或者再来个初始化模块
2.第二个参数是载荷,我这里直接解构了,赋初值,这个只是为了讲解 基本类型和引用类型的修改方式,所以放一起了,不然初值其实应该单独处理的
3.state的修改方式,不能直接修改
5.2 使用
1.导入
reducer模块
2.插一下useReducer这个语法
const [state, dispatch] = useReducer(reducer, initialState, init)
3.参数需要
reducer所以我们才在第一步准备reducer
4.核心代码
// ******************* useReducer
const [pageState, dispatch] = useReducer(reducer, defaultState)
let { count, person } = pageState
1.这里的第二个参数是初始值,可选参数
2.会覆盖掉reducer里面的state参数 初始值
3.我是直接把结果state直接给解构出来了
5.3 state和 dispatch的使用
<hr />
<h1>useReducer</h1>
<h1>
<button onClick={() => {dispatch({type:'increment'}) }}>+修改 </button>
{count}
<button onClick={() => { dispatch({type:'decrement',payload:100}) }}>-修改</button>
</h1>
<h1>{person.city}
<button onClick={updateObj }>-修改</button> </h1>
1.这个和
vuex辅助函数 用法类似
2.type值和reducer保持一致
3.参数keypayload和reducer里面的 参数保持一致
5.4 useReducer 和 redux 的区别
1.
useReducer是 useState的代替方案，主要用于state 复杂变化的场景
2.useReducer 是单个组件状态管理，组件通讯还需要 props
3.redux 是全局状态管理，多组件共享数据
5.5 react的hook总结
1.了解
vue3的可以结合vue3的组合式API来理解
2.useState 负责数据相关,来源清晰,方便复用
3.useReducer 数据的逻辑的统一处理
useRef
获取 DOM 的
使用
let { useState, useRef,useEffect } = React
const myref1 = useRef("yzs")
const myref2 = useRef("yzs")
钩子
let testR = null
// ********didMount didUpdate
useEffect(() => {
testR.style.color = "red"
console.log("DOM:", testR.innerHTML);
myref1.current.style = "color: orange";
console.log(myref1,myref2);
})
布局
<h1 ref={el =>testR=el}>测试</h1>
<p ref={myref1}>演示useRef</p>
<div ref={myref2}>我是一个div</div>
6. hook from react-redux
6.1 准备工作
1.这个是
redux相关的hook,所以需要准备下redux的基本配置
2.安装就不说了自己装npm i react-redux -S
3.目录结构 src/store
4.reducer和第五条的useReduer讲解中的公用一个就行
5.store/index.js 整合reducer
6.2 store
唯一的 store
import reducer from '../pages/search/store'
// 不拆分的写法
// 导入
import {createStore,combineReducers} from 'redux'
// 创建 store
const rootReducer = combineReducers({
hookPageYzs:reducer,
})
let store = createStore(rootReducer)
export default store
1.注意这里的根
reducer配置 有个hookPageYzs
7.useSelector
import { useSelector, useDispatch } from 'react-redux'
7.1 useSelector 逻辑
这个hook是用来使用 react-redux中的 state的
const hookpageAge = useSelector((state) => {
console.log("hook------------------state", state)
return state.hookPageYzs
})
console.log("useSelector----------HookPage", hookpageAge)
1.搞不懂的,打印或者断点看逻辑
2.hookPageYzs是在根store里面配置的
7.2 数据显示
<div> redux-hook----{hookpageAge.count} </div>
<h1>{hookpageAge.person.name}</h1>
大概的 reducer 参见上面 5.1 reducer 准备
let defaultState = {
count: 66666,
person: {
name: 'yzs',
city: '郑州'
}
}
8. useDispatch
//************************ useDispatch
const dispatch= useDispatch()
1.注意名字不要重复了
2.使用useReducer的时候解构出来的默认也叫叫dispatch
3.我这个不在一个同一界面使用所以不会重复
8.1 基本类型
<hr />
<h1> react-redux -hook</h1>
<div> redux-hook----{hookpageAge.count} </div>
<h1>
<button onClick={() => { add(10000) }}> +增加</button>
<button onClick={() => {
dispatch({
type: 'decrement'
})
}}>-减少</button> </h1>
<hr />
8.2 基本类型修改
let add = (payload) => {
dispatch({
type: 'increment',
payload
})
}
1.这个单独声明了箭头函数 ,绑定事件的时候需要使用箭头函数
2.没有绑定直接修改的也需要在 事件的箭头函数里填写,因为需要传参
8.3 引用类型
<h1>{hookpageAge.person.name}</h1>
<h1>引用类型修改
<button onClick={ updateObj}>修改</button>
</h1>
8.4 修改
let updateObj =()=>{
dispatch({
type:'PERSON_UPDATE',
payload:{ name: '一蓑烟雨', age: 18 }
})
}
9. 持久化
想结合持久化使用,看之前的文章就行redux持久化
