RCHooks
react hooks
HarryHY
从入门到放弃
展开
-
ReactHook——组件之间的传值
父组件传递子组件父组件传递子组件——数据引入子组件import Marqueecom from "./components/marquee";使用子组件 <Header></Header> <Marqueecom></Marqueecom> <Footer></Footer>定义一个数据 进行传递const marqueedata = [ { text: 11111,原创 2022-03-27 23:12:50 · 1344 阅读 · 0 评论 -
ReactHooks——copy-to-clipboard复制功能
安装npm i copy-to-clipboard引入import copy from "copy-to-clipboard";使用const linkloca = "https://blog.csdn.net/HarryHY";const copyfn = (linkloca: string) => { copy(linkloca, { debug: true, message: "Press #{key} to copy" }); };全部代码import Rea原创 2022-03-11 21:37:04 · 874 阅读 · 0 评论 -
ReactHooks——useLayoutEffect
useEffect和useLayoutEffect区别useEffect和useLayoutEffect作为组件的副作用,本质上是一样的。共用一套结构来存储effect链表。整体流程上都是先在render阶段,生成effect,并将它们拼接成链表,存到fiber.updateQueue上,最终带到commit阶段被处理。他们彼此的区别只是最终的执行时机不同,一个异步一个同步,这使得useEffect不会阻塞渲染,而useLayoutEffect会阻塞渲染。useLayoutEffect可以解决更新dom原创 2022-03-10 23:31:49 · 644 阅读 · 0 评论 -
ReactHooks——监听窗口大小、滚动距离、滚动方向
重要代码 //获取当前窗口大小 const getWindowSize = () => ({ innerHeight: window.innerHeight, innerWidth: window.innerWidth, }); const [windowSize, setWindowSize] = useState(getWindowSize()); const handleResize = () => { setWindowSize(getWind原创 2022-03-10 23:21:04 · 2575 阅读 · 0 评论 -
ReactHooks——制作一个简单的瀑布流(css)
瀑布流数据export const TRAVEL_DATA = [ { classname:"animate__bounceInLeft", imgsrc: img1, }, { classname:"animate__bounceInRight", imgsrc: img2, }, { classname:"animate__bounceInUp", imgsrc: img3, }, { classname:"anim原创 2022-03-10 22:07:01 · 666 阅读 · 0 评论 -
ReactHooks——class添加判断
mergeClass.tsfunction mergeClass(...source:any[]){ const classes:string[]=[]; source.filter(Boolean).forEach((s)=>{ if(!s){ return; } if(typeof s==='string'){ classes.push(s); return;原创 2022-03-10 13:26:18 · 397 阅读 · 0 评论 -
js文件中需要换行
js:name:`今天 \n 很开心`css:white-space:pre-line;原创 2022-03-10 11:35:19 · 490 阅读 · 0 评论 -
ReactHooks——制作一个简单的loading
js const [loding, setloding] = useState(false); //loding const changeloding = () => { setloding(true); setTimeout(() => { setloding(false); }, 1000); }; //正常情况下请求接口 const geturl = async()=>{ try { setloding(原创 2022-02-28 23:22:27 · 373 阅读 · 0 评论 -
ReactHooks——react-countdown倒计时——dayjs结合react-countdown
安装npm install react-countdown --save引用import Countdown from "react-countdown";使用 <Countdown date={Cdtime} />全部代码import React, { useEffect, useState, useContext, createContext } from "react";import Countdown from "react-countdown";import d原创 2022-02-27 13:52:46 · 1122 阅读 · 0 评论 -
React——插件集合
animate.css——动画效果animate.cssday.js——时间格式day.jsreact-fast-marquee滚动广播效果react-fast-marqueelodash——JS工具库lodash原创 2022-02-27 13:21:00 · 1770 阅读 · 0 评论 -
ReactHooks——animate.css
安装npm install animate.css --save引入——index.tsimport 'animate.css';//完整的import Home from "./home";import './home.less';import 'animate.css';export default Home使用<h1 className="animate__animated animate__bounce">An animated element</h1&原创 2022-02-27 13:14:35 · 378 阅读 · 0 评论 -
ReactHooks——day.js
day.js原创 2022-02-27 13:00:07 · 855 阅读 · 0 评论 -
React——react-fast-marquee滚动广播效果
React Fast Marquee安装npm install react-fast-marquee --save引入import Marquee from "react-fast-marquee";使用 <Marquee pauseOnHover={true} speed={60} loop={0}> {marqueedata.map((item) => ( <span className="red">{item.原创 2022-02-23 20:22:58 · 3028 阅读 · 0 评论 -
ReactHooks——安装less及其配置
安装npm install --save less less-loader暴露出配置文件npm run ejectconfig文件中的webpack.config.js代码const lessRegex = /\.less$/const lessModuleRegex=/\.module\.(scss|sass)$/位置代码 { test: lessRegex, exclude: cssModuleRe原创 2022-02-01 12:17:27 · 1233 阅读 · 0 评论 -
ReactHooks——路由
安装react-router-domnpm install react-router-dom --save-dev 引入import { BrowserRouter as Router,Routes, Route, BrowserRouter } from "react-router-dom";使用 <Route path="/" element={<Home />} />全部代码import React from "react";import ReactDO原创 2022-01-21 16:05:20 · 670 阅读 · 0 评论 -
ReactHooks——使用lodash中的throttle
安装npm i --save lodash主要代码submit()为方法名字 执行了该方法improt {throttle } from 'lodash'const throttlefn = useCallback( throttle (()=>submit(),1000))点击时也从submit()改变成了throttlefn()onClick={()=>throttlefn()}下面防抖的方法也是一样...原创 2022-01-17 20:20:35 · 1555 阅读 · 0 评论 -
ReactHooks——useRef
使用方法 const inputValue: any = useRef(null);//声明 <input type="text" ref={inputValue} onChange={(e)=>{setqiqi(e.target.value)}} />//绑定input const gettext = () => {//获取 setqiqi(inputValue.current.value) }; const cleartext = () => {//赋原创 2022-01-16 01:23:42 · 388 阅读 · 0 评论 -
ReactHooks——useMemo
使用useMemo使用useMemo相当于是shouldComponentUpdate在useEffect中是组件当中的一个副作用而useMemo是判定该组件的 props 和 state 是否有变化,从而避免每次父组件render时都去重新渲染子组件。useMemo返回的的是一个值,用于避免在每次渲染时都进行高开销的计算import React, { useState, useMemo, useEffect,} from "react";const Footer = () =&原创 2022-01-15 18:00:22 · 303 阅读 · 0 评论 -
ReactHooks——useReducer
申明一个reducerimport React, { createContext, useReducer } from 'react';export const ColorContext = createContext({})export const ChangeText = "CHANGETEXT"const chengefn=(state:any,action:any)=>{ switch(action.type){ case 'CHANGETEXT':原创 2022-01-15 16:48:55 · 87 阅读 · 0 评论 -
Hooks——传递参数useContext
在同一个文件下申明和使用createContext下面的Numberdata.Provider中需要包裹着子组件value={需要传递的值}const Numberdata = createContext(0);//下面的Numberdata.Provider中需要包裹着子组件//value={需要传递的值}return( <Numberdata.Provider value={num}> <Footer /> </Numberd原创 2022-01-15 16:07:02 · 785 阅读 · 0 评论 -
ReactHooks——useEffect使用方法
当第二个参数为空数组相当于是执行了一个componentDidMount生命周期 在这里可以执行一些页面刚加载的事件或者请求 useEffect(()=>{ console.log(dataList); },[])当第二个参数为一个时在num进行改变时触发 相当于执行componentDidUpdate const [num, changeNum] = useState(0); //定义一个num 初始值为0 修改方法为changeNum useEffect(() =>原创 2022-01-11 15:29:46 · 655 阅读 · 0 评论 -
ReactHooks——useState使用方法
定义 const [num,changeNum]=useState<any>(0);//定义一个num 初始值为0 修改方法为changeNum const [dataList, getDataList] = useState({ data: [ //定义一个数组进行循环 { id: 1, name: "lili", likecolor: "yellow", }, {原创 2022-01-11 10:47:41 · 892 阅读 · 0 评论 -
reactHooks——创建reactHooks+ts项目
命令npx create-react-app my-app --template typescriptcreate-react-app执行这个命令需要node14以上版本 所以低版本需要去升级原创 2022-01-10 15:08:16 · 883 阅读 · 0 评论