1. 前言
1.之前写过一篇粗浅的文章 hook初识 介绍hook
2.今天总结下常用的hook
3.整体分为2部分 一部分是 from
react的 hook4.一部分是
react-redux的hook5.脚手架项目自己新建准备好
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 方便统一管理
state1.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 一般都不实用
this2.数据来源清晰
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里面的hook2.其实这个
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所以我们才在第一步准备reducer4.核心代码
// ******************* 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.参数key
payload和reducer里面的 参数保持一致
5.4 useReducer 和 redux 的区别
1.
useReducer是 useState的代替方案，主要用于state 复杂变化的场景2.useReducer 是
单个组件状态管理，组件通讯还需要 props3.redux 是
全局状态管理，多组件共享数据
5.5 react的hook总结
1.了解
vue3的可以结合vue3的组合式API来理解2.useState 负责数据相关,来源清晰,方便复用
3.useReducer 数据的逻辑的统一处理
6.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>
7. hook from react-redux
7.1 准备工作
1.这个是
redux相关的hook,所以需要准备下redux的基本配置2.安装就不说了自己装
npm i react-redux -S3.目录结构 src/store
4.reducer和第五条的
useReduer讲解中的公用一个就行5.store/index.js 整合
reducer
7.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
8.useSelector
import { useSelector, useDispatch } from 'react-redux'
8.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里面配置的
8.2 数据显示
<div> redux-hook----{hookpageAge.count} </div> <h1>{hookpageAge.person.name}</h1>
大概的 reducer 参见上面 5.1 reducer 准备
let defaultState = { count: 66666, person: { name: 'yzs', city: '郑州' } }
9. useDispatch
//************************ useDispatch const dispatch= useDispatch()
1.注意名字不要重复了
2.使用
useReducer的时候解构出来的默认也叫叫dispatch3.我这个不在一个同一界面使用所以不会重复
9.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 />
9.2 基本类型修改
let add = (payload) => { dispatch({ type: 'increment', payload }) }
1.这个单独声明了箭头函数 ,绑定事件的时候需要使用箭头函数
2.没有绑定直接修改的也需要在 事件的箭头函数里填写,因为需要传参
9.3 引用类型
<h1>{hookpageAge.person.name}</h1> <h1>引用类型修改 <button onClick={ updateObj}>修改</button> </h1>
9.4 修改
let updateObj =()=>{ dispatch({ type:'PERSON_UPDATE', payload:{ name: '一蓑烟雨', age: 18 } }) }
10. 持久化
想结合持久化使用,看之前的文章就行redux持久化
