• 【React Hooks&Redux--学习小结】


    一、React Hooks

    1、useState: 可以在函数组件中使用state

    2、useRef:看成是createRef的Hook版。

    使用方法:

    (1)先将ref存入变量

    let el = useRef()

    (2)再将变量与DOM节点进行绑定,通过ref的current属性来获取DOM节点

    web开发



    el.current

    useRef的作用:

    (1)可以绑定DOM组件

    (2)可以获取组件渲染之前的数据

    3、useEffect

    useEffect:在类组件中副作用通常在componentDidMount、componentDidUpdate、componentWillUnMount 生命周期函数中进行处理。
    在函数组件中useEffect相当于以上三个钩子函数的集合体。
    包含两个参数:第一参数是执行时的回调函数、第二个参数是依赖参数;并且回调函数,还有一个返回函数。

    (1)依赖参数:是一个数组,数组中存放的是要依赖的数据,当这些数据更新时就会执行回调函数

    (2)执行过程:

    组件挂载–>执行副作用(回调函数)–>组件更新–>执行清理函数(返回函数)–>执行副作用(回调函数)–>组件准备卸载–>执行清理函数(返回函数) -->组件卸载

    4、Hooks的使用规则

    (1)只能在函数组件和自定义的Hooks中调用Hooks。类组件和普通函数不能使用Hooks

    (2)只能在函数的第一层中调用Hooks。在函数中若使用了流程控制语句(if、for、while),在流程控制语句不能使用Hooks;若函数中定义了子函数,子函数中也不能使用Hooks

    5、自定义Hooks:在应用中可以将一些需要重复使用的逻辑自定义成Hook

    示例:自定义一个Hook,返回一个和滚动条位置实时同步的state

    二、Redux

    Redux:是一个状态管理的库。不是React内置的,是独立的JavaScript的状态容器,提供可预测的状态管理,在React中使用Redux,可以把所有的state集中到组件的顶部,能够灵活地将所有的state分发给所有组件。方便了开发者管理React中的状态,也方便了不同组件间的通信

    1、三大核心:

    (1)store:是一个数据容器,用来管理和保存整个项目的state。整个项目中只能有一个store

    (2)state:是一个对象,在state中存储相应的数据,当开发者需要使用数据时,可以通过store提供的方法来获取state

    (3)action:是一个通知命令,用于对state进行修改。通过store提供的方法可以发起action完成对state的修改

    2、Redex的函数:

    (1)action:本质是JavaScript对象,在action中包含一个字符串类型的type属性,作用是指定要对state进行何种操作。action会通过store将要进行的操作传给reducer函数,由reducer 函数完成对state的修改

    action({type:‘add’,data:‘’})

    (2)reducer:是一个纯函数。有两个参数state和action。该函数一定有一个返回值,是修改后的state

    纯函数:

    a、纯函数在执行过程中没有任何副作用。如定时器、网络请求

    b、如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部状态或 数据的变化。

    function reducer(state={ count:1},action){

    switch(action.type){

    case ‘ADD’:

    return {count: state.count+1 }

    case ‘SUB’:

    return {count: state.count-1 }

    }

    return state;

    }

    (3)createStore:用于创建store,参数必须是reducer,reducer函数名可以自定义

    3、store对象提供的方法:

    (1)getState:用来获取state

    (2)dispatch(action):派发action给reducer

    (3)subscribe(listener):会注册一个监听器来监听state的变化。会返回一个注销监听器的方法

    Redux的工作模式:发布-订阅模式

  • 相关阅读:
    英语单词12大前缀3大词性后缀
    工业智能仓储货架|HEGERLS供应电动移动式货架Electric mobile shelf自动立体化仓库货架
    多人音视频实时通讯架构
    机器学习:集成学习(Python)
    2022年音视频面试题 C/C++/Linux/FFmpeg/webRTC/rtmp/hls/rtsp/ffplay/srs
    使用pip安装模块时,提示MemoryError
    Java多线程并发编程核心知识
    探索DrissionPage:结合浏览器自动化与数据包操控的先进工具
    expressDemo不能使用import
    无限连接:前端跨页面通信的实现与应用
  • 原文地址:https://blog.csdn.net/m0_46839072/article/details/126655541