随笔分类 - 前端技术栈 / React
摘要：定义useLazyLoad 思路： 判断图片在视口内就加载，即： 元素距离页面顶部的距离offsetTop < 滚动条高度scrollTop + 视口高clientHeight import { useCallback, useEffect, useState } from 'react' impo
阅读全文
摘要：定义 import { useCallback, useEffect, useRef } from "react" export interface ThrottleRefType { fn: Function, timer?: NodeJS.Timeout } export type Thrott
阅读全文
摘要：定义 import { useCallback, useEffect, useRef } from "react" export interface DebounceRefType { fn: Function, timer?: NodeJS.Timeout } export type Deboun
阅读全文
摘要：Hook定义 useDragList import { useState } from "react"; interface DragPropsType { list: Array<any>, dragItemClassName: string } const checkValidDragItem
阅读全文
摘要：关于redux 中间件 在redux中,我们通过dispatch action来更新数据状态,通过reducer来返回新的状态 如果我们想要记录某个状态更新前后的日志,那么我们只需要在此处的dispatch前后做一些处理即可 那如果我们要记录所有状态更新的日志呢？在所有调用disaptch的地方都加
阅读全文
摘要：1 简介 JSX(JavaScript XML)，即可拓展的JavaScript，是react定义的一种类似于XML的js扩展语法:JS+XML。它本质上是React.createElement(type，config，...children)的语法糖,主要用于创建React元素，生成虚拟DOM 2
阅读全文
摘要：一、前言 本篇主要基于源码谈谈jsx被编译之后,react在创建react element时做了什么 关于jsx的基础知识可以看看另一篇博客由浅入深理解jsx 二、关于CreateElement jsx被babel等编译工具转换之后,实质上是React.createElement方法。在react/
阅读全文
摘要：React 长列表加载 实现虚拟列表 效果 实现思路 定义一个container 高为一屏高 定义一个listWrapper 高为所有列表元素的高度，来撑开容器 定义一个itemWrapper 高为一屏高度，来跟随上、下拉操作进行位移，从而总是覆盖展示在当前屏 滚动时关键值计算： 一屏个数 limi
阅读全文
摘要：移动端验证码组件，输入一个数字立即跳到下一个输入框，删除一个数字立刻返回上一个输入框，用useEffect会出现键盘闪烁的问题。 因为useEffect添加副作用是在dom渲染到浏览器之后，即浏览器绘制之后执行，不会阻塞浏览器，但是可能导致重绘与回流，从而出现闪烁。 useLayoutEffect是
阅读全文
摘要：useImperativeHandle useImperativeHandle(ref, createHandle, [deps]) useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。 useImpe
阅读全文
摘要：import axios from 'axios' const axiosHandle = axios.CancelToken.source() login(){ this.props.dispatch(getData(value, (res) => {},(error)=>{},axiosHand
阅读全文
摘要：基于React Hooks 封装一个Echarts组件 官网 https://echarts.apache.org/zh/index.html 1 Echarts全局配置 echarts.config.js // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 i
阅读全文
摘要：源码目录：react/packages/react-dom/src/client/ReactDOMComponentTree.js const randomKey = Math.random() .toString(36) .slice(2); const internalInstanceKey =
阅读全文
摘要：权限验证 render Route render实现组件渲染 权限校验 设置routes数组，有id,auth,component这三个属性 auth为false,说明是不需要权限访问的组件，可以直接访问 auth为true，说明是需要权限(需要登录)访问的组件 isLogin为false，说明需要
阅读全文
摘要：初探immutable Redux+immutable实现todolist immutable的实现原理是Persistent Data Structrue 持久化数据解构 特点是结构共享带来的性能优化 持久化数据结构 所谓持久化数据结构，就是说，当数据改变时，不会改变原数据，而是返回一个经过改变的
阅读全文
摘要：React 状态state 定义与更新 和属性的区别 同步异步 状态提升 关于state 状态state是一个局部的、只能被组件自身控制的数据源 state只能在组件内部被初始化，外部不能访问也不能修改 state可以通过this.setState进行更新，setState会导致组件的重新渲染，se
阅读全文
posted @ 2020-05-04 13:21
IslandZzzz
浙公网安备 33010602011771号