Zong_0915的博客

React - 实现瀑布流加载。当时的代码编写里面，其实是待优化的地方。只不过当时由于问题还没解决，就用了其它方案来代替。因此本篇文章，就对这个问题做一个探究：闭包性和state值更改。

目录下的模板页面，全局套一层即可，这样所有的组件都会根据你的多语言设置来做出对应变化。大家可以看到，最后的这个页面跳转提示文字为。如果你想全局生效，如果是。

先来看下原本的效果，一次性加载完所有的信息然后展示：其次，我们需要去监听这个滚轮的滚动事件，那么页面就可以添加一个监听器：那么这个函数，就是用来在发生滚动事件的时候，你要做的事情。既然我们要实现瀑布流，那么自然而然的就是去后端请求数据。但是，请求数据得有一个前提：你的滚动条已经到达页面的底部了。元素有这么三个属性：：内容可视区域的高度。：滚动条在Y轴上的滚动距离。：内容可视区域的高度加上溢出（滚动）的距离。判断滚动条到达底部的条件则为：那么这个元素的依据是什么？你项目里面，哪一个标签下写了，有滚动条

代码】UmiJs-qiankun主子应用之间，数据的传递。

React中使用lodash防抖失效解决前言案例前言有个场景，类似于斗鱼搜索。在搜索的过程中，我希望能够出现关键字提示。进行快速搜索。那么用户在输入的过程中，我们需要感应用户输入的内容，并对其进行接口请求。但是如果不做任何限制，这样的请求绝对是太频繁了。因此我们需要做到防抖效果。案例在这里我只贴出和案例有关的代码：import {Input} from 'antd';import lodash from 'lodash';// lodash下的防抖函数const debounce = lod

TypeScript：用装饰器来进行参数校验

浅谈require和import的区别前言一. require和import的区别1.1 从其本质来看不同1.2 从其用法来看不同require/exports：import/export：二. 拓展：module.exports和exports前言在公司里写代码的时候，我遇到了这么一个场景：项目当中需要用到Redis，但是要想使用它，必须经过一系列的初始化动作。用过Egg的同学知道，一般我们通过在app.js文件中，在willReady()函数中，将Redis初始化，并将初始化完成的对象放到app对

antd中Form.Item无法获取到对应的表单值解决前言问题代码示例解决前言本文章讲的解决方案只是其中一种，无法获得对应表单的原因有很多，只能在今后的道路上慢慢采坑然后避免。问题代码示例import React, { Component } from 'react'import { Button, Form, Input } from 'antd'import Son from './Son'const App = () => { return ( <>

useMemo和useCallback以及其闭包性

dva原理解析前言一. dva原理1.1 初始化配置dva()1.2 挂载组件app.use()1.3 动态加载app.model()1.3.1 _getSaga()函数1.3.2 处理订阅1.4 挂载路由router1.5 启动app.start()二. 总结2.1 dva原理总结2.2 dva-core文件目录以及优势总结前言本篇文章衔接dva介绍和官网案例来讲。此外参考文献还有dva 源码解读。一. dva原理从入口文件index.js来讲起，一个入口文件的模板如下：// dva主要拥有hi

dva介绍和官网案例一. dva基本概念1.1 快速创建dva项目1.2 Model1.3 State ☆1.4 Action ☆1.5 Reducer ☆1.6 Effect ☆1.7 Subscription1.8 RouteComponent和Router二. dva的官方案例总结 ☆☆开发规范：（仅供参考）一. dva基本概念dva 是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch。dva有5个

ReactHooks原理解析

React编程中两个需要避免的错误前言一. useEffect无限渲染二. 带状态的变量赋给Input框作为默认值，页面无法修改内容前言在React编程中， 我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两个较为常见的，也希望读者们看完这篇文章能够避免踩坑！一. useEffect无限渲染背景：页面初始化的时候，我们需要通过useEffect()来进行一些初始化工作。在useEffect(

React（十二）- React拓展：renderProps、ErrorBoundary及组件间通信方式总结一. renderProps拓展二. ErrorBoundary拓展三. 组件间通信方式总结React系列文章导航一. renderProps拓展如何向组件内部动态传入带内容的结构（标签）？React中:使用children props: 通过组件标签体传入结构，但是有个问题：如果B组件需要A组件内的数据，那做不到。<A> <B>xxxx</B&g

React（十一）- React拓展：Fragment、Context及PureComponent一. Fragment拓展二. Context拓展2.1 总结三. PureComponent拓展3.1 修改方案13.2 修改方案2React系列文章导航一. Fragment拓展案例如下：jsx语法中，render()里面最外层的标签，同级的不能有两个，如下可以使用Fragment包起来，来解决上述问题：二. Context拓展Context，一种组件通信方式，常用于祖组件和子类组件之

React（十）- React拓展：setState、lazyLoad以及Hook一. setState拓展1.1 写法11.2 写法21.3 总结二. lazyLoad拓展三. Hook拓展3.1 StateHook3.2 EffectHook3.3 RefHookReact系列文章导航一. setState拓展页面效果图如下：1.1 写法1state = { count: 0 }add = () => { const { count } = this.state

React（九）- React数据共享和Redux案例最终完善前言一. React数据共享1.1 案例：多组件之间数据共享1.2 纯函数二. Redux案例最终版2.1 项目打包运行React系列文章导航前言本篇文章是紧接着React（八）- ReactUI组件库及Redux的使用来讲解。上一篇文章中可以发现，案例都是以单组件为基础，那么接下来来看看如何利用Redux来实现多个组件之间的数据共享。一. React数据共享需求：写两个组件，每个组件能够实时的获得另一个组件的状态值，如图：而两

React（八）- React路由组件传递参数以及两种路由的区别React系列文章导航

React（七）- React路由前言一. 路由1.1 路由的使用React系列文章导航前言在讲React路由前，先来看下SPA的相关概念：SPA：single page web application 单页Web应用。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过Ajax请求获取，并在前端异步展示。一. 路由路由的概念：一个路由就是一个映射关系（key:value）。key是路径，value可能是一个组件或者一个函数。路由

React（四）- ReactDOM的Diffing算法和React脚手架React系列文章导航

React（五）- React组件的组合使用React系列文章导航

React（四）- ReactDOM的Diffing算法和React脚手架一. React中的key1.1 diffing规则二. React脚手架2.1 初始化React脚手架React系列文章导航一. React中的key从案例出发，从key的角度来引入diffing算法案例1：class Person extends React.Component { state = { persons: [ { id: 1, name: '小张', age

React（三）- React收集表单数据、函数柯里化及生命周期一. 收集表单数据1.1 非受控组件：1.2 受控组件：二. 函数柯里化2.1 案例优化2.2 函数柯里化案例三. 组件生命周期3.1 从案例出发引入生命周期的概念3.2 生命周期(旧)3.2.1 挂载时的生命周期3.2.2 更新时的生命周期总结React系列文章导航一. 收集表单数据React中，包含表单的组件有两大类：受控组件非受控组件1.1 非受控组件：页面中所有输入类的DOM，只要现用现取，就是一个非受控组件。非受

React（二）- React组件和模块前言安装React调试工具React系列文章导航前言先来说下模块和组件的差别：模块：向外提供特定功能的JS程序，一般是一个JS文件。作用：复用JS。组件：用来实现局部功能效果的代码和资源的集合（Html、Css、Js等）。作用：复用编码。安装React调试工具1.打开谷歌浏览器，选择扩展程序：2.点击左侧的扩展程序，并打开Chrome网上应用商店：3.搜索React，添加对应组件，注意提供方是Facebook...

React系列文章导航1.React（一）- React简介与基本使用

React（一）- React简介与基本使用前言一. React简介1.1 原生JS的弊端1.2 React的引用和相关文件作用二. React的基本使用2.1 HelloWorld案例及其易错点2.2 虚拟DOM2.2.1 创建虚拟DOM的两种方式（React）2.2.2 虚拟/真实DOM2.3. JSX语法规则三. Demo-JSX练习前言本系列是我学习React的一些学习笔记，主要参考B站张天禹老师的视频。一. React简介React是一个构建用户界面的JS库，用于操作DOM呈现界面，将数据

JS中let、var和const的区别一.let和var的区别1.1 块级、全局、函数作用域的不同。1.2 变量提升1.3 重复声明变量1.4 全局属性二.const的区别一.let和var的区别从案例出发，贴出如下代码：<html><head> <meta charset="UTF-8"></head><body> <button type="button" class="btn" tag="0">a&