React + 项目(从基础到实战) -- 第三期

最新推荐文章于 2024-05-06 22:40:22 发布
最新推荐文章于 2024-05-06 22:40:22 发布
阅读量492 收藏 3
点赞数 5
分类专栏： react学习 文章标签： react.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73270720/article/details/137351880
版权

react内置hooks

useState

如何让页面动起来(实时更新)

import React,{FC,useState} from "react";

  

const Demo:FC=()=>{

   let count=0; //普通js变量无法触发组件更新

  

  

   function add(){

    count++;

   
    console.log("count: ",count);

   }

    return <div>

        <button onClick={add}>add {count}</button>

    </div>

}

  
  

export default Demo;

在这里插入图片描述

为什么采用

state的改变可以触发函数组件的更新
(如果js变量不在jsx中使用,别用useState)

import React,{FC,useState} from "react";

  

const Demo:FC=()=>{

//    let count=0; //普通js变量无法触发组件更新

   const[count,setCount]=useState(0); //useState 可以触发组件更新

  

   function add(){

    // count++;

    setCount(count+1)

    console.log("count: ",count);

   }

    return <div>

        <button onClick={add}>add {count}</button>

    </div>

}

  
  

export default Demo;

在这里插入图片描述

特点

  1. 不可变数据
    不修改原数据,而是传入新的值

  2. 异步更新|
    函数中无法直接获取最新的值
    在这里插入图片描述

  3. 可能被合并
    使用函数state可以解决这个问题

在这里插入图片描述

 setCount(()=>{

        return count+5

    })

immer

是一个插件
解决state不可变数据的影响
安装 npm install -D immer

 import {FC,useState} from "react";

import {produce} from "immer";

  

const Demo : FC =()=>{

  

    const [list,setList]=useState(['x','y'])

    function add(){

        // setList(list.concat('z'));

        setList(

            produce(draft=>{

                draft.push('z')//直接在原数组上修改

            })

        )

  

    }

  

    return (

        <div>

        <h2>state 不可变数据</h2>

        <div>{JSON.stringify(list)}</div>

        <button onClick={add}>add  item</button>

  
  

        </div>

    )

}

  

export default  Demo;

useEffect

为什么

组件是一个函数,返回的是JSX片段,
组件初次渲染完成,即函数执行完成,
一般情况下函数执行完成就结束了
但是在state更新时,会触发组件更新,函数组件再次执行

为了解决以上问题,使用useEffect

import {FC,useEffect,useState} from "react"

const Demo:FC=()=>{

    useEffect(()=>{

        console.log("组件初次渲染完成");

  

        return ()=>{

            console.log("组件销毁时执行");

        }

    },[])//无依赖项,只执行一次

  

    const[count,setCount]=useState(0); //useState 可以触发组件更新

  

   function add(){

    // count++;

    setCount(()=>{

        return count+5

    })

    console.log("count: ",count);

   }

    return <div>

        <button onClick={add}>add {count}</button>

    </div>

  

}

  
  

export default Demo;

注意

发现useEffect 执行两次

在react 18 中,useEffect 在开发环境中执行两次,在生产环境中执行一次
(模拟组件生命周期,以便尽早暴露问题)
开发环境 npm run build 生存环境

useRef

  1. 操作DOM
  2. 可传入普通js变量,但是更新不会触发rerender

与vue3 ref 不同

  

import { FC,useRef } from "react";

  

const Demo:FC = () => {

     // 定义一个ref

    const inputRef = useRef<HTMLInputElement>(null) //dom节点

    const nameRef=useRef("pink") //不是dom节点,是一个普通的js变量

    function selectInput(){

        const input = inputRef.current;

        if(input){

            input.select(); // 选中输入框中的内容(Dom节点操作API)

        }

    }

  

    function changeName(){

        nameRef.current="blue"//修改ref的值,不引起rerender(state修改会触发组件更新)

        console.log(nameRef.current);

    }

    return (

        <>

        <input ref={inputRef} defaultValue={"hello world"}/>

        <button onClick={selectInput}>选中 input</button>

  

        <p>{nameRef.current}</p>

        <button onClick={changeName}>修改名字</button>

  

        </>

    )

}

  
  

export default Demo;

在这里插入图片描述

useMemo

缓存数据
不用每次执行函数组件(比如说 state修改)都重新生成 , 实现性能优化

import {FC,useMemo,useState} from "react"

  

const Demo : FC =()=>{

    const[num1,setNum1]=useState(0)

    const[num2,setNum2]=useState(0)

    const[text,setText]=useState("hello") //更新导致组件rerender

  
  

    const sum =useMemo(()=>{

        console.log("计算两数之和");//缓存

        return num1+num2;

    },[num1,num2])

  

    return (

        <>

        <p>sum = {sum}</p>

        <button onClick={()=>{setNum1(num1+1)}}>num1 : {num1}</button>

        <button onClick={()=>{setNum2(num2+1)}}>num2 : {num2}</button>

        <button onClick={()=>{setText(text+"1")}}>text : {text}</button>

        </>

    )

}

  
  
  

export default Demo;

在这里插入图片描述

useCallback

缓存函数

import {FC,useCallback,useState} from "react"

  
  

const Demo : FC =()=>{

    const [text,setText] = useState("hello")

    const fn1=()=>{

        console.log("fn1 text",text);

    }

  

    const fn2=useCallback(()=>{

        console.log("fn2 text",text);

    },[text])

  

    return(

        <>

        <button onClick={fn1}>fn1</button>

        <button onClick={fn2}>fn2</button>

        <div>

            <input value={text} onChange={e=>setText(e.target.value)}></input>

        </div>

        </>

    )

}

  
  
  

export default Demo;

自定义hooks

抽离公共部分,复用代码

同步案例

监听鼠标位置

  1. 自定义hook
import { useState,useEffect } from "react";

  

//获取鼠标位置

function useMouse(){

    const [x,setX]=useState(0);

    const [y,setY]=useState(0);

    const mouseMoveHandler=(e:MouseEvent)=>{

        setX(e.clientX);

        setY(e.clientY);

    }

  
  

    useEffect(()=>{

    //监听鼠标事件

        window.addEventListener('mousemove',mouseMoveHandler);

    //组件销毁时,一定要解绑DOM事件!!(可能会导致内存泄漏问题)

    return ()=>{

        window.removeEventListener('mousemove',mouseMoveHandler);

    }

    },[])

  
  

    return {x,y}

  

}

  
  

export default useMouse;
  1. app.tsx 中引入
//导入自定义hook


import useMouse from "./hooks/useMouse.ts";

function App() {


  const {x, y} = useMouse();

  return(

    <>

    <p>

      App Page

    </p>

    <div>x: {x}</div>

    <div>y: {y}</div>
    </>

  )

  

}

  

export default App

异步案例

模拟加载效果

import { useState,useEffect } from "react";

//异步获取消息

function getInfo():Promise<string>{

    return new Promise(resolve=>{

        setTimeout(()=>{

          resolve(Date.now().toString())  

        },1500)

    })

}

  
  

//自定义钩子

const useGetInfo=()=>{

    const[loading,setLoading]=useState(true)

    const[info,setInfo]=useState("")

  

    useEffect(()=>{

        getInfo().then(info=>{

            setLoading(false)

            setInfo(info)

        })

    },[])

    return {loading,info}

}

  
  

export default useGetInfo;

第三方hooks

提高开发效率

ahooks

react-hooks

hooks使用规则

  1. useXxx命名
  2. 组件内 获 其他hook 中可以调用
  3. 保证每次调用顺序一致(不能处于 if/for 内部)

面试题(闭包陷阱)

无法获取最新值

import {FC,useState} from 'react'

  

const Demo:FC =()=>{

    const[count,setCount]=useState(0)

    function add(){

        setCount(count+1)

    }

  

    function alertFn(){

      setTimeout(()=>{

        alert(count);

      },3000)

    }

  

    return(

        <>

        <p>闭包陷阱</p>

  

        <div>

        <span>{count}</span>

        <button onClick={add}>add</button>

        <button onClick={alertFn}>alert</button>

  

        </div>

        </>

    )

}

  
  

export default Demo;

使用ref解决在这里插入图片描述

import {FC,useState,useRef, useEffect} from 'react'

  

const Demo:FC =()=>{

    const[count,setCount]=useState(0)

    const countRef = useRef(0)

  

    function add(){

        setCount(count+1)

    }

  

    useEffect(()=>{

        countRef.current=count

    },[count])

  

    function alertFn(){

      setTimeout(()=>{

        // alert(count); //count 值类型

        alert(countRef.current); // ref 引用类型

      },3000)

    }

  

    return(

        <>

        <p>闭包陷阱</p>

  

        <div>

        <span>{count}</span>

        <button onClick={add}>add</button>

        <button onClick={alertFn}>alert</button>

  

        </div>

        </>

    )

}

  
  

export default Demo;

在这里插入图片描述

摇光93
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3+React18+TS4入门到实战系统学习3大热门技术
03-11
├─{1}--第1章课程导学-了解本课程必看 │ (1.1)--1-2课件获取方式及软件... |-- {22}--第22章React+TS项目：添加审批页与我的审批页实现; │ 22-1 章节介绍.mp4 │ [22.2]--22-2添加审批页功能栏与数据表格布局.mp4
React + 项目(从基础到实战) -- 第五期
qq_73270720的博客
04-08 451
react中路由配置以及相关参数获取
React+Redux+Ant Design+TypeScript 电子商务实战-客户端应用 01 基础配置
皮蛋很白的博客
08-30 619
页面预览 该实战项目是（不怎么严谨的）电子商务网站。 首页 商品列表页面 登录页面 注册页面 购物车列表 支付完成页面 Dashboard 页面 普通用户页面 购买历史页面 资料更新页面 管理员页面 创建分类页面 创建商品页面 订单列表页面 显示所有用户的订单 客户端技术栈介绍 脚本：TypeScript 前端框架：React 路由管理：react-router-dom 用户界面：Ant Design 全局状态管理：Redux 一部状态更新：redux-saga 路由状态同步：co
快速搭建React18 + Redux + vite + axios + ant-design项目
m0_55337573的博客
03-27 1617
本篇文章将介绍react18搭建pc端后台管理项目的初始流程，主要技术栈React18 + Redux + vite + axios + ant-design等
【实战】十、用 react-query 获取数据，管理缓存（下） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十二）
程序边界
08-14 3044
状态提升、组合组件。
React+Antd+Vite+TypeScript 项目实战教程
IT飞牛
05-10 3998
本教程属于react入门教程，课程围绕如何搭建一个简单的登录页面展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。
【实战】《CMS全栈项目》系列三：React+TS基础
程序边界
11-08 1057
react-redux-hooks-ts
React+dva+webpack+antd-mobile 实战分享（一）
weixin_34332905的博客
06-30 237
再看本篇文章之前，本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目，因为现在dva和roadhog还不成熟，坑相对要多一些，当然如果你已经做好跳坑的准备，那么请继续往下走； 本文适合对 ES6+webpack 有一定了解的人。没有的了解的同学可以先看看下面的我分享的链接， ES6: http...
【考勤项目】Vue3+React18 + TS4 入门到实战
luemeon的博客
02-20 2125
根据本人需要，目前只记录React18+TS4，Vue3+TS4可参考。
React零基础入门到项目实战之脚手架create-react-app搭建React项目
panpan_Yang的博客
08-07 227
脚手架 create-react-app react应用程序 react项目
React从入门到实战- 企业级实战项目-宜居三
悦分享
05-10 973
2019年最新 React从入门到实战（带 React 企业级实战项目-宜居） (React Hook新特性&) React Hook新特性& (1.React 新特性 State Hook&) 1.React 新特性 State Hook& App.js import React from 'react'; import Demo1 from "./components/Demo1" import Demo2 from "./components/Demo
【React-Nextjs-Koa-Redis】代码项目托管实战开发项目
01-30
【React-Nextjs-Koa-Redis】代码项目托管实战开发项目 React+Next.js+Koa2开发Github全栈项目，Nextjs提供同构渲染，...适用人群：React开发者、同构开发者（完善的服务端渲染体系），所有需要接入第三方登录的开发者
react:nodejs +React+ mongodb
05-19
另一个主要问题是它们无法被搜索引擎索引（无需为像这样的第三方服务付费）。 如果您的应用程序正在提供人们可能正在搜索的任何类型的数据，那是一件坏事。 当您在服务器端渲染JavaScript时，您可以解决这些问题，...
程序员面试刷题的书哪个好-React-Native-In-Action:ReactNative零基础入门到项目实战学习笔记
07-07
Native零基础入门到项目实战 此项目记录我在2017年3月学习的过程，整理了一下放到GitHub上，分为React、React Native和豆瓣项目实战三个部分（DoubanProject在Recat Native Demo文件目录下）,废话不多说，贴上笔记和...
RN_APP:2021年ReactNative实战 ->影视天下
05-07
第三方库使用 网络问题 组件问题 动画问题 打包问题 性能优化 首屏加载（只完成 android） 热更新 目标 通过cheerio 和 react-native-webview 嵌套成功解决了视频资源问题， 所以最后希望做成的效果是一个...
【React】React-redux多组件间的状态传递
fangyuan__的博客
05-04 759
当某个组件需要使用 store 中的值时，可以通过 connect 中的两个参数来获取，例如这里我们需要使用到 Count 组件的值，可以通过 .count 来从 store 中取值。暴露的 nanoid 是一个函数，我们每一次调用时，都会返回一个不重复的数，用于确保 id 的唯一性，同时在后面的 map 遍历的过程中，我们将 id 作为了 key 值，这样也确保了 key 的唯一性，关于 key 的作用，可以看看 diffing 算法的文章。当前组件需要使用的数据都需要在 connect 中暴露。
React和antd如何封装权限按钮
读心悦
05-02 431
在实际应用中，你可能需要处理更复杂的情况，比如权限的动态加载、权限的继承、权限的细分等等。你可能还需要为权限按钮添加更多的交互和反馈，比如当用户尝试访问一个没有权限的按钮时，显示一个提示消息。在上面的例子中，PermissionButton组件接受一个permission属性，该属性指定了按钮所需的权限。权限判断：首先，你需要有一个权限管理系统来存储和检查用户的权限。封装按钮组件：基于用户的权限，你可以封装一个React组件，这个组件会渲染一个antd的按钮，或者根据用户的权限不渲染按钮。
#9松桑前端后花园周刊-React19beta、TS5.5beta、Node22.1.0、const滥用、jsDelivr、douyin-vue
最新发布
weixin_43303603的博客
05-06 1089
此前一直由发行版开发者或其他第三方提供，目前Mozilla提供了nightly版本，正式版仍需要全面测试后再推出。
基于React实现B站评论区
stu_kk的博客
05-02 1037
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
react native入门-react navigation 5.x+react-native-vector-icons
09-15
React Navigation是一个与React Native一起使用的流行的导航框架。它提供了一种简单且强大的方式来管理React Native应用程序的导航功能。React Navigation 5.x是React Navigation的最新版本，它引入了一些重要的改进和新功能。 React Navigation 5.x具有更好的性能和可靠性，并提供了更大的灵活性和可定制性。它通过引入新的导航器组件，如Stack Navigator、Bottom Tab Navigator和Drawer Navigator，来简化应用程序的导航结构。这些导航器组件可以根据应用程序的需求进行配置和自定义，使开发者能够轻松地构建出各种导航布局。 React Native Vector Icons是一个用于在React Native应用程序中使用矢量图标的库。它提供了一组常见的图标，如FontAwesome、Material Icons和Ionicons，供开发者在应用程序中使用。React Native Vector Icons具有可定制性强、易于使用和良好的性能等优点，使开发者能够轻松地将各种矢量图标集成到他们的应用程序中。 使用React Navigation和React Native Vector Icons可以帮助开发者构建具有良好导航功能和矢量图标的React Native应用程序。通过使用React Navigation 5.x，开发者可以轻松地设置和管理应用程序的导航结构，并使用React Native Vector Icons来使用矢量图标来增强应用程序的用户界面。这两个库都有活跃的社区支持和文档资料，所以入门和使用它们相对容易。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值