分类：react

2021
08-06

React实现分页效果

本文实例为大家分享了React实现分页效果的具体代码，供大家参考，具体内容如下首先确保已经安装了antd,axiosjsx文件:importReact,{useState,useEffect}from'react'import{Pagination}from'antd';import'./loading.scss'importUnitfrom'../hml'constApp=()=>{//设置第几页const[num,setNum]=useState(1)//获取的数据载体const[data,setData]=useState([])//刚才用挂载方法,二次... 继续阅读 >

2021
08-06

react 项目中引入图片的几种方式

img标签引入图片因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片我们可以像引入模块一样引入图片importimgfrom'./../../../../asset/img/user.png'需要用下面的方式引入<imgsrc={require('../images/picture.png')}alt="标签"/>背景图片引入1第一种就是常规的新建一个css文件，然后就可以直接写css语法了.img{background:url('../images/picture.png')00no-repeat;}2第二种就... 继续阅读 >

2021
07-31

使用react+redux实现计数器功能及遇到问题

Redux，本身就是一个单纯的状态管理者，我们不追溯它的历史，从使用角度来说：它提供一个全局的对象store，store中包含state对象用以包含所有应用数据，并且store提供了一些reducer方法。这些方法可以自定义，使用调用者得以改变state的值。state的值仅为只读，如果需要更改则必须只能通过reducer。Redux核心对象：store数据存储：state状态更新提交接口：==dispatch==状态更新提交参数：带type和payload的==Actio... 继续阅读 >

2021
07-21

React Native项目框架搭建的一些心得体会

ReactNative是Facebook于2015年4月开源的跨平台移动应用开发框架,短短的一两年的发展就已经有很多家公司支持并采用此框架来搭建公司的移动端的应用,ReactNative使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。项目框架与项目结构1.项目中使用的技术栈reactnative、reacthook、typescript、immer、tslint、jest等.都是比较常见的,就不多做介绍了2.数据处理使用的是reacthook中的useC... 继续阅读 >

2021
07-21

使用react-virtualized实现图片动态高度长列表的问题

目录开发中遇到的问题解决方案具体实现实际效果小结虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。虚拟列表是对长列表场景一种常见的优化，毕竟很少有人在列表中渲染上百个子元素，只需要在滚动条横向或纵向滚动时将可视区域内的元素渲染出即可。开发中遇到的问题1.长列表中的图片要保持原图片相同的比例，那纵向滚动在宽度不变的情况下，每张图片的高度就是动态的，当该列表项高度发生了变化... 继续阅读 >

2021
07-17

用React Native制作一个简单的游戏引擎

目录简介开始吧对ReactNative游戏引擎的简单介绍让我们在ReactNative中建立一个蛇形游戏创建游戏实体游戏逻辑移动蛇头"游戏结束！"条件食用食物控制蛇尾巴功能结语简介今天我们将学习如何使用ReactNative制作一个游戏。因为我们使用的是ReactNative，这个游戏将是跨平台的，这意味着你可以在Android、iOS和网络上玩同一个游戏。然而，今天我们将只关注移动设备。所以我们开始吧。开始吧要制作任何游戏，我们需要一个循环，在我... 继续阅读 >

2021
07-09

使用react-beautiful-dnd实现列表间拖拽踩坑

目录为什么选用react-beautiful-dnd基本使用方法基本概念使用方法使用过程中遇到的问题总结参考资料为什么选用react-beautiful-dnd相比于react-dnd，react-beautiful-dnd更适用于列表之间拖拽的场景，支持移动端，且较为容易上手。基本使用方法基本概念DragDropContext：构建一个可以拖拽的范围onDragStart：拖拽开始回调onDragUpdate：拖拽中的回调onDragEnd：拖拽结束时的回调Droppable-可以放置拖拽块的... 继续阅读 >

2021
07-04

深入浅析React中diff算法

React中diff算法的理解diff算法用来计算出VirtualDOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。虚拟DOMdiff算法的基础是VirtualDOM，VirtualDOM是一棵以JavaScript对象作为... 继续阅读 >

2021
07-04

react-diagram 序列化Json解读案例分析

本文目标本文档的目标在于解释react-diagram框架模型序列化的Json，由于缺乏文档，我这边只能通过不断尝试和调试来进行测试。序列化案例1：空画布{"id":"27","offsetX":0,"offsetY":0,"zoom":100,"gridSize":0,"layers":[{"id":"28","type":"diagram-links","isSvg":true,"transformed":true,"models":{}},{"id":"30","type":"dia... 继续阅读 >

2021
07-04

react native环境安装流程

react-native安装流程1.npxreact-nativeinitAwesomeProject报错运行cd./demo/ios&&podinstall即可解决2.安装JDK（1）brewinstalladoptopenjdk/openjdk/adoptopenjdk8运行项目下运行react-nativedoctor报错✖JDKVersionfound:1.8.0_191Versionsupported:>=8这个报错不影响环境，注意1.8版本官方也直接称8版本，是doctor识别不了3.创建配置文件为~/.zshrc（1）.可以使用echo$0命令查看你... 继续阅读 >

2021
07-04

React 小技巧教你如何摆脱hooks依赖烦恼

react项目中，很常见的一个场景:const[watchValue,setWatchValue]=useState('');const[otherValue1,setOtherValue1]=useState('');const[otherValue2,setOtherValue2]=useState('');useEffect(()=>{doSomething(otherValue1,otherValue2);},[watchValue,otherValue1,otherValue2]);我们想要watchValue改变的时候执行doSomething，里面会引用其他值otherValue1,otherValue2。这时有个让人烦恼的问题：如... 继续阅读 >

2021
07-04

详解React Angular Vue三大前端技术

目录一、【React】基本用法显著特点类组件虚拟DOM生命周期方法JSXJavaScript表达式超越HTML的架构ReactHooksHooks规则常用术语Flux架构的使用历史常用命令二、【Angular】Angular和AngularJS的区别历史组件化数据管理常用命令三、【Vue】概述历史组件化模板反应式系统变换效果路由生态系统官方工具官方程序库常用命令四、【小结】一、【React】React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Fac... 继续阅读 >

2021
07-02

使用react的7个避坑案例小结

目录1.组件臃肿2.直接更改state3.props该传数字类型的值却传了字符串，反之亦然4.list组件中没使用key5.setState是异步操作6.频繁使用Redux7.组件没以大写字母开头命名后话React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七个点。1.组件臃肿React开发者没有创建必要的足够多的组件化，其实这个问题不局限于React开发者，很多Vue开发者也是。当然，我们现在讨论的是React在React中，我们可以创建一个很... 继续阅读 >

2021
07-01

如何深入理解React的ref 属性

目录概述1.Refs对象的创建1.1React.createRef()1.2React.useRef(initialValue)2.ref属性的使用2.1为原生DOM元素添加ref2.2为class组件添加ref2.3为class组件转发的原生DOM元素添加ref2.4为函数组件转发的原生DOM元素添加ref3.回调Refs概述首先，Refs和ref是两个概念，Refs是React提供的可用特定API创建的一个对象。该对象的结构如下：这个对象只有一个属性就是current，那么这个对象是用来干嘛的呢？Ref... 继续阅读 >

2021
07-01

30分钟带你全面了解React Hooks

目录概述1.useState1.1概念三连问1.2举个例子1.3注意事项2.useReducer2.1使用方法2.2举个例子3.useContext3.1使用方法3.2举个例子4.useEffect4.1模拟componentDidMount4.2模拟componentDidMount+componentDidUpdate4.3可添加依赖4.4模拟componentWillUnmount5.useLayoutEffect6.useRef7.forwardRef（不是Hook）8.useMemo&&useCallback9.useInperativeHandle9.1举个例子10.自定义Hook概述1.Hooks... 继续阅读 >

2021
07-01

详解React Hooks是如何工作的

目录1.ReactHooksVS纯函数2.简单myUseState3.改进myUseState4.实现原理引发的Hooks规则1.ReactHooksVS纯函数ReactHook说白了就是ReactV18.6新增的一些API，API的本质就是提供某种功能的函数接口。因此，ReactHooks就是一些函数，但是ReactHooks不是纯函数。什么是纯函数呢？就是此函数在相同的输入值时，需产生相同的输出，并且此函数不能影响到外面的数据。简单理解就是函数里面不能用到在外面定义的变... 继续阅读 >