react
文章平均质量分 66
batype
付出多少,回报就有多少,永远它们是成正比的。
展开
-
React 使用合成事件(SyntheticEvent)
合成事件对象具有与原生事件对象相似的属性和方法,但也有一些额外的属性和方法,用于处理 React 特定的功能。例如,您可以使用event.target来访问触发事件的元素,event.preventDefault()来阻止默认行为,以及event.stopPropagation()来阻止事件冒泡。请注意,由于合成事件是 React 提供的跨浏览器抽象,它并不是浏览器原生事件对象。合成事件是一个封装了原生事件的对象,提供了一致的跨浏览器接口,使您能够在不同浏览器中以一致的方式处理事件。原创 2023-09-11 16:54:44 · 575 阅读 · 2 评论 -
Fiber 架构的起源和含义
在过去的 React 版本中,渲染过程是基于递归的,即组件树的遍历是通过递归函数来完成的。Fiber 这个名字来源于计算机科学中的 “Fiber”(纤程)概念,指的是一种轻量级的执行单元,可以在多个任务之间切换,并且可以中断和恢复执行。React 中的 Fiber 也是类似的概念,表示渲染过程中的任务单元,可以根据任务的优先级和时间片进行灵活的调度和中断。值得一提的是,Fiber 架构的设计和实现是一个非常复杂的过程,并且在不同版本的 React 中可能会有一些细节上的差异。原创 2023-09-08 10:37:43 · 565 阅读 · 0 评论 -
FiberNode结构解析
FiberNode(也称为 Fiber 节点)是 React Fiber 架构中的核心概念之一,用于表示组件的层级结构和渲染过程中的任务。原创 2023-09-08 09:37:40 · 685 阅读 · 0 评论 -
Fiber 架构实现流程
构建 Fiber 树:在进行首次渲染时,React 会构建一棵 Fiber 树,用于表示组件的层级结构和渲染顺序。它的目标是提高渲染性能和用户体验,通过将渲染工作分割成多个小任务,在不阻塞主线程的情况下逐步完成整个渲染过程。任务拆分:在渲染过程中,React 根据时间片(Time Slicing)的概念将渲染任务拆分为多个小任务(Fiber),每个小任务执行时间有限,并且可以中断和恢复。增量更新:在执行每个小任务时,React 会比较前后两次渲染结果,找出需要更新的部分,并对其进行增量更新。原创 2023-09-07 17:57:21 · 268 阅读 · 0 评论 -
React获取服务器端时间以及自动更新
React 获取服务器端时间 思路:React获取服务器端时间,本质上就是给服务器端发送一个请求,然后从返回数据里面的headers里面获取到服务器date,然后更新服务器时间去格式化,获取服务器时间结束。按秒进行数据刷新,其实也很简单,就是使用定时器,进行动态递增即可,直接上代码。获取服务器时间的方法:changeTime = async () => { let leftTime = await axios.get('/').then(response => {原创 2020-10-21 15:48:05 · 1311 阅读 · 0 评论 -
React 程序打包为App流程
文章目录React 程序打包为App流程前言流程:实现过程:一、编写Web 端应该程序,配置package.json文件二、打包React Web应用程序三、使用HBulider 创建App项目,并导入React打包程序四、编辑manifest.json配置文件五、使用云端打包程序并且使用自定义证书六、Google开发者证书生成七、上传云端,下载apk八、执行测试后序React 程序打包为App流程前言 这篇随笔主要是解决本人对web程序打包为安卓APP好奇,通过本人的尝试完成APP打包发布,主要原创 2020-09-05 11:49:22 · 6375 阅读 · 1 评论 -
aes加密解密算法
React中aes加密解密算法简单使用 本文使用aes加密算法完成解密加密,在加密中使用CBCmode,PKcs7padding,IV_STRINGiv等,在操作中需要第一步先把对应的字符串转化为utf8格式,key值使用默认key值的前16位utf8格式的字符串,然后使用encrypt方法进行加密,完成加密后将加密数据转化成Base64字符串格式,解密方法和加密方法类似只是反向操作。im...原创 2020-03-25 20:11:10 · 448 阅读 · 0 评论 -
React网页数据自动递增CountUp中基本使用
react中如何让页面数据自动递增,在此本人使用的是CountUp.js,让数字递增,主要使用方法,如下面程序端:import React, { Component } from 'react'import CountUp, { useCountUp } from 'react-countup'export default function CompleteHook(v) { cons...原创 2019-11-27 16:48:13 · 2044 阅读 · 0 评论 -
react+webpack部署开发环境
在最初学习react时就有种很麻烦的感觉,后来知道了他可以配合webpack来开发项目,达到快捷方便的作用之后,便入手的这个很麻烦的坑,一朝入坑,十年爬坑的道理!先说说刚开始我们需要准备什么吧,npm下载js可以到全球各个节点去下载你想要的js,强力推荐,现在的node.js,已经集成了npm,所以只需要安装node.js就可以了。完成之后,需要通过cmd进行项目路径下:如:在这个目录下,我...原创 2019-07-18 12:00:33 · 278 阅读 · 0 评论