专栏首页小丞前端库React核心 -- React-Hooks

React核心 -- React-Hooks

📢 大家好,我是小丞同学,一名大二的前端爱好者 📢 这篇文章是学习 React-Redux 数据共享 的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 愿你忠于自己,热爱生活

hooks 存在的意义

  1. hooks 之间的状态是独立的,有自己独立的上下文,不会出现混淆状态的情况
  2. 让函数有了状态管理
  3. 解决了 组件树不直观、类组件难维护、逻辑不易复用的问题
  4. 避免函数重复执行的副作用

应用场景

  1. 利用 hooks 取代生命周期函数
  2. 让组件有了状态
  3. 组件辅助函数
  4. 处理发送请求
  5. 存取数据
  6. 做好性能优化

hooks API

react 中引入

1. useState

给函数组件添加状态

  • 初始化以及更新组件状态
const [count, setCount] = React.useState(0)

接收一个参数作为初始值,返回一个数组:第一个是状态变量,第二个是修改变量的函数

2. useEffect

副作用 hooks

  • 给没有生命周期的组件,添加结束渲染的信号

注意:

  • render 之后执行的 hooks

第一个参数接收一个函数,在组件更新的时候执行

第二个参数接收一个数组,用来表示需要追踪的变量,依赖列表,只有依赖更新的时候才会更新内容

第一个参数的返回值,返回一个函数,在 useEffect 执行之前,都会先执行里面返回的函数

一般用于添加销毁事件,这样就能保证只添加一个

React.useEffect(() => {
    console.log('被调用了');
    return () => {
        console.log('我要被卸载了');
    }
}, [count])

打印

3. useLayoutEffect

useEffect 很类似

它的作用是:在 DOM 更新完成之后执行某个操作

注意:

  • 有 DOM 操作的副作用 hooks
  • 在 DOM 更新之后执行

执行时机在 useEffect 之前,其他都和 useEffect 都相同

useEffect 执行时机在 render 之后

useLayoutEffect 执行时机在 DOM 更新之后

4. useMemo

作用:让组件中的函数跟随状态更新

注意:优化函数组件中的功能函数

为了避免由于其他状态更新导致的当前函数的被迫执行

第一个参数接收一个函数,第二个参数为数组的依赖列表,返回一个值

const getDoubleNum = useMemo(() => {
    console.log('ddd')
    return 2 * num
}, [num])

5. useCallback

作用:跟随状态更新执行

注意:

  • 只有依赖项改变时才执行
  • useMemo( () => fn, deps) 相当于 useCallback(fn, deps)

不同点:

  1. useCallback 返回的是一个函数,不再是值
  2. useCallback 缓存的是一个函数,useMemo 缓存的是一个值,如果依赖不更新,返回的永远是缓存的那个函数
  3. 给子组件中传递 props 的时候,如果当前组件不更新,不会触发子组件的重新渲染

6. useRef

作用:长久保存数据

注意事项:

  • 返回一个子元素索引,这个索引在整个生命周期中保持不变
  • 对象发生改变时,不通知,属性变更不重新渲染
  1. 保存一个值,在整个生命周期中维持不变
  2. 重新赋值 ref.current 不会触发重新渲染
  3. 相当于创建一个额外的容器来存储数据,我们可以在外部拿到这个值

当我们通过正常的方式去获取计时器的 id 是无法获取的,需要通过 ref

useEffect(() => {
    ref.current = setInterval(() => {
        setNum(num => num + 1)
    }, 400)
}, [])
useEffect(() => {
    if (num > 10) {
        console.log('到十了');
        clearInterval(ref.current)
    }
}, [num])

7. useContext

作用:带着子组件渲染

注意:

  • 上层数据发生改变,肯定会触发重新渲染
  1. 我们需要引入 useContextcreateContext 两个内容
  2. 通过 createContext 创建一个 Context 句柄
  3. 通过 Provider 确定数据共享范围
  4. 通过 value 来分发数据
  5. 在子组件中,通过 useContext 来获取数据
import React, { useContext, createContext } from 'react'
const Context = createContext(null)
export default function Hook() {
    const [num, setNum] = React.useState(1)

    return (
        <h1>
            这是一个函数组件 - {num}
        // 确定范围
            <Context.Provider value={num}>
                <Item1 num={num} />
                <Item2 num={num} />
            </Context.Provider>
        </h1>
    )
}
function Item1() {
    const num = useContext(Context)
    return <div>子组件1  {num}</div>
}
function Item2() {
    const num = useContext(Context)
    return <div>子组件2 {num}</div>
}

8. useReducer

作用:去其他地方借资源

注意:函数组件的 Redux 的操作

  1. 创建数据仓库 store 和管理者 reducer
  2. 通过 useReducer(store,dispatch) 来获取 statedispatch
const store = {
    num: 10
}
const reducer = (state, action) => {
    switch (action.type) {
        case "":
            return
        default:
            return
    }
}
    const [state, dispatch] = useReducer(reducer, store)

通过 dispatch 去派发 action

9. 自定义 hooks

放在 utils 文件夹中,以 use 开头命名

例如:模拟数据请求的 Hooks

import React, { useState, useEffect } from "react";
function useLoadData() {
  const [num, setNum] = useState(1);
  useEffect(() => {
    setTimeout(() => {
      setNum(2);
    }, 1000);
  }, []);
  return [num, setNum];
}
export default useLoadData;

减少代码耦合

我们希望 reducer 能让每个组件来使用,我们自己写一个 hooks

自定义一个自己的 LocalReducer

import React, { useReducer } from "react";
const store = { num: 1210 };
const reducer = (state, action) => {
  switch (action.type) {
    case "num":
      return { ...state, num: action.num };
    default:
      return { ...state };
  }
};
function useLocalReducer() {
  const [state, dispatch] = useReducer(reducer, store);
  return [state, dispatch];
}
export default useLocalReducer;
  1. 引入 react 和自己需要的 hook
  2. 创建自己的hook函数
  3. 返回一个数组,数组中第一个内容是数据,第二个是修改数据的函数
  4. 暴露自定义 hook 函数出去
  5. 引入自己的业务组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [直播] Hooks从理念到实现到源码

    可以说,从出生伊始,React的使命就不是讨好用户,而是Facebook探索前端UI开发最佳实践的一次尝试。

    童欧巴
  • React Hooks 深入系列 —— 设计模式

    本文是 React Hooks 深入系列的后续。此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hook...

    牧云云
  • 使用 React Hooks 代替 Redux

    React Hooks 面世也有很大一段时间了。我相信很多人对于 Hooks 的认知还大概处在:

    Nealyang
  • React全新文档终于来了

    React一直被吐槽官方文档对新手不友好,而且自从v16.8出现Hooks后,Hooks逐渐成为React主要发展方向,新特性都会基于Hooks开发。

    公众号@魔术师卡颂
  • React全新文档终于来了

    React一直被吐槽官方文档对新手不友好,而且自从v16.8出现Hooks后,Hooks逐渐成为React主要发展方向,新特性都会基于Hooks开发。

    玖柒的小窝
  • 我在react里写vue3 ? 还写了自定义hooks和Hoc构建了响应式 !

    自从vue3.0正式发布之后,vue3.0核心响应式部分被单独抽离成@vue/reactivity包,也就是说,我们可以脱离vue框架之外,单独使用@vue/r...

    用户6835371
  • Fast Refresh 原理剖析

    关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术

    ayqy贾杰
  • 超性感的React Hooks(一):为何她独具魅力

    过去大半年里,我将React Hooks应用到了许多大型项目,其中5个全新重构,其他项目由于时间关系少量使用。

    用户6901603
  • [译] 对比 React Hooks 和 Vue Composition API

    原文:https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b...

    江米小枣
  • React Hooks简介

    组件间逻辑复用一直是个问题,Render Props、Higher-Order Components等常用套路模式都是为了分离横切关注点(Cross-cutti...

    ayqy贾杰
  • 「React 基础」函数组件及Hooks特性简介

    大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。

    前端达人
  • react hooks api

    hooks API是 React 16.8的"新增"功能(16.8更新于2年前)。官网是这么说的:

    一粒小麦
  • 【路由】:路由那些事——中

    示例:(特别注意,下面是基于"path-to-regexp": "^6.2.0" 搞的测试)

    WEBJ2EE
  • [第8期] Deep into React Hooks

    在React 16.7 的版本中,Hooks 诞生了,截止到目前, 也有五六个月了, 想必大家也也慢慢熟悉了这个新名词。

    皮小蛋
  • 「React 手册 」如何创建函数组件?

    大家好,在前面的几篇相关文章里,我们一起学习了如何使用类的方式声明组件,以及如何属性传值和处理本地数据状态,本篇文章我们一起学习如何使用函数的方式进行声明组件。

    前端达人
  • React 性能优化实践

    你可能已经注意到 React Hook 中有一个名为 useMemo 的奇怪的钩子。这个奇怪的钩子意味着什么,它的作用是什么?重要的是,它是怎样为你提供帮助的?

    桃翁
  • React 中的一个奇怪的 Hook

    你可能已经注意到 React Hook 中有一个名为 useMemo 的奇怪的钩子。这个奇怪的钩子意味着什么,它的作用是什么?重要的是,它是怎样为你提供帮助的?

    前端迷
  • 10分钟教你手写8个常用的自定义hooks

    Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文...

    徐小夕
  • Redux + Hooks 工程实践

    “都 1202 年了怎么还有人在用 Redux”——这大概不少人看到这篇文章的第一反应。首先先表明一下,这篇文章并不讨论是不是应该使用 Redux,这是一个比较...

    zz_jesse

扫码关注云+社区

领取腾讯云代金券