目录1. 基础使用2. 将animate.css集成到csstranistion中3. 列表过渡4. switchTransition动画5. 路由切换过渡6. 高阶组件实现路由切换过渡1. 基础使用介绍:在项目中可能会给一些组件的显示或隐藏添加某种过渡动画,这样可以很好的增加用户的使用体验, react-transition-group 是 react 的 ......
325
0
0
2023-03-10
目录一 为什么跨端动态化迫在眉睫二 首当其冲的为什么是 React Native三 JS 引擎让跨端动态化成为可能四 走进 React Native 的世界五 总结一 为什么跨端动态化迫在眉睫目前很多互联网大厂的移动端开发都在朝着跨端动态化方向发展。由于快速迭代开发或者对原生包体积要求严格,及其对资源成本的把控,实现跨端动态化迫在眉睫。我们先来看看 Nati ......
422
0
0
2023-03-08
目录一、理解JavaScript纯函数1.1 纯函数的概念1.2 副作用概念的理解1.3 纯函数在函数式编程的重要性二、Redux的核心思想2.1 为什么需要 Redux2.2 Redux的核心概念2.2.1 store2.2.2 action2.2.3 reducer2.3 Redux的三大原则2.3.1 单一数据源2.3.2 State是只读的2.3.3 ......
321
0
0
2023-03-04
目录前言为什么页面会出现卡顿的现象?React 到底是在哪里出现了卡顿?React 有哪些场景会需要性能优化?一:父组件刷新,而不波及子组件。第一种:使用 PureComponent第三种:函数组件如何判断props的变化的更新呢? 使用 React.memo函数使用 React.useMemo来实现对子组件的缓冲一:组件自己控制自己是否刷新三:减少波及范围 ......
345
0
0
2023-03-04
目录背景Android FullScreenModal 的封装使用Android 原生实现全屏 Dialog封装给 RN 进行相关的调用Android 原生部分实现JS 部分实现使用 RootSiblings 封装 Modal实现界面 Render 相关实现 Modal 展示动画相关使用 View 封装 Modal整体 Modal 控件的封装其他Androi ......
450
0
0
2023-03-03
目录Suspense 基本应用Suspense 原理基本流程源码解读 - primary 组件源码解读 - 异常捕获源码解读 - 添加 promise 回调源码解读-Suspense首次渲染primary 组件加载完成前的渲染primary 组件加载完成时的渲染利用 Suspense 自己实现数据加载Suspense 基本应用Suspense 目前在 rea ......
367
0
0
2023-02-28
目录项目目录及ts文件划分在项目中使用TypeScript具体实践组件声明React Hooks使用useStateuseRefuseCallbackuseMemouseContextuseReduceruseImperativeHandleAxios请求/响应定义封装前言:本文主要记录我如何在React项目中优雅的使用TypeScript,来提高开发效率及 ......
378
0
0
2023-02-25
目录Form数据管理重置Form状态form验证小结Form数据管理有时会遇到多个位置需要用户输入的情况,若每个状态都配置state或handler会很繁琐,可以尝试下面的方法import * as React from 'react'; const LoginForm = () => { // 将多个状态合并为对象 const [sta ......
329
0
0
2023-02-22
目录react性能优化方案什么是 React Context?何为 JSXprops 是什么应该在 React 组件的何处发起 Ajax 请求react 强制刷新使用 React Hooks 好处是啥?Redux内部原理 内部怎么实现dispstch一个函数的何为纯函数(pure function)如何配置 React-Router 实现路由切换在 Reac ......
345
0
0
2023-02-20
目录react父子组件的执行顺序1.class组件 2.函数组件 hooks无依赖的情况react父子组件的执行顺序react版本:17.x,在此版本中完全可以用Hooks去进行开发了,开始先讲class组件,只是为了更好的帮助理解。在开发项目的过程中,由于项目比较大,拆分组件的结构比较复杂,会涉及到一个组件中下面嵌套了好几级的子级组件, ......
355
0
0
2023-02-19
目录使用websocket实时通信创建公共组件在react组件中的使用websocket在不同情形下的使用1.在react中使用websocket2.websocket在小程序中使用使用websocket实时通信在react中使用websocket不需要引入其他库,只需要创建一个公共组件,封装一下websocket创建公共组件websocket.jslet ......
810
0
0
2023-02-19
目录1、介绍2、state概念演示3、props概念props与state区别4、refs概念refs种类5、父子组件什么是父子组件父子组件之间传值1、介绍React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state、props、refs。2、state概念state是类组件的一个默认属性,用于标识类组件的状态,负责更新U ......
387
0
0
2023-02-18
前言:页面一共分为两个结构文字 + 渐变柱形图为一个部分,下面的标注为一个结构。我们先看文字 + 渐变柱形图部分。总体使用 flex 布局,左边文字部分占总体的 50%,右边的占剩余的空间部分。右侧渐变柱形部分的宽度是动态变化的。宽度是根据传入的 value,进行计算的。<section className="graphs" style={style} ......
361
0
0
2023-02-14
目录配置与初始化实践react+tsx中使用better-scroll首先,你要知道为什么可以滚动,原理很简单,父容器的高度比子元素的小即可。在这之前,我们先来看一下浏览器的滚动原理: 浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候, ......
453
0
0
2023-02-12
目录背景设计理念抽象代码结构声明与定义用法高级用法拆分/合并actionAPIuseSetStategetActionpolymerActionusePolymerActionStatemergePolymerAction背景随着React Hooks 普及起来,组件逻辑写法变成函数式;逻辑函数声明、函数代码结构,随着逻辑增加复杂,代码组织混乱,函数声明散乱 ......
300
0
0
2023-02-12