react hook用法看这一篇就够了

作者: 云高风轻 | 来源:发表于2021-09-25 09:59 被阅读0次

1. 前言

1.之前写过一篇粗浅的文章 hook初识介绍hook
2.今天总结下常用的hook
3.整体分为2部分一部分是 from react的 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.参数key payload 和 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持久化

参考资料

react-hook
hook初识
 redux持久化

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;

共勉

网友评论

react

本文标题：react hook用法看这一篇就够了

本文链接：https://www.haomeiwen.com/subject/vzatnltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

react hook用法看这一篇就够了

1. 前言

2. hook from 'react'

3. useState

3.1 语法

3.2 使用

3.3 使用单独的 state模块

3.4 render

3.5 修改函数的实现

4. useEffect

5. useReducer

5.1 reducer 准备

5.2 使用

5.3 state和 dispatch的使用

5.4 useReducer 和 redux 的区别

5.5 react的hook总结

useRef

使用

钩子

布局

6. hook from react-redux

6.1 准备工作

6.2 store

7.useSelector

7.1 useSelector 逻辑

7.2 数据显示

大概的 reducer 参见上面 5.1 reducer 准备

8. useDispatch

8.1 基本类型

8.2 基本类型修改

8.3 引用类型

8.4 修改

9. 持久化

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

react

5.5 `react`的hook总结

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;