React
Reactor 之 多任务并发执行，结果按顺序返回第一个
1 场景调用多个平级服务，按照服务优先级返回第一个有效数据。具体case：一个页面可能有很多的弹窗，弹窗之间又有优先级。每次只需要返回第一个有数据的弹窗。但是又希望所有弹窗之间的数据获取是异步的。这种场景使用 Reactor 怎么实现呢？2 创建 service2.1 创建基本接口和实体类public interface TestServiceI { Mono request(); }复制
日期 2023-06-12 10:48:40
这些react面试题你会吗，反正我回答的不好
传入 setstate函数的第二个参数的作用是什么？第二个参数是一个函数，该函数会在 setState函数调用完成并且组件开始重渲染时调用，可以用该函数来监听渲染是否完成。this.setstate( { username: "有课前端网", }, () => console.log("re-rendered success. ")
日期 2023-06-12 10:48:40
react useMemo、useEffect和 useCallback区别及与 vue 对比
react useMemo和 useEffect和 useCallbackuseEffecteffect只能在DOM更新后触发useMemo传入 useMemo 的函数会在渲染期间执行，即在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUpdateuseMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；use
日期 2023-06-12 10:48:40mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据需要更新的场景（股票价格），会导致页面有很多计算和重绘，内存占用也会变多，这就需要我们对长列表处理进行优化。长列表渲染海量数据渲染会有如下问题计算时间过长，用户等待时间长，体验差CPU 处理时间过长，滑动过程可能卡顿GPU 负载过高，渲染不
日期 2023-06-12 10:48:40
React源码分析(一)Fiber
前言本次React源码参考版本为17.0.3。React架构前世今生查阅文档了解到， React@16.x是个分水岭。React@15及之前在16之前，React架构大致可以分为两层：Reconciler： 主要职责是对比查找更新前后的变化的组件；Renderer： 主要职责是基于变化渲染页面；但是React团队意识到这样的架构有致命问题： 因为在React15中，组件的更新是基于递归查找实现的，
日期 2023-06-12 10:48:40
react面试应该准备哪些题目
可以使用TypeScript写React应用吗？怎么操作？（1）如果还未创建 Create React App 项目直接创建一个具有 typescript 的 Create React App 项目： npx create-react-app demo --typescript复制（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中通过命令将
日期 2023-06-12 10:48:40react hook 源码完全解读
前言从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属于自己的文章吧。希望可以深入浅出、图文并茂的帮助大家对React Hooks的实现原理进行学习与理解。本文将以文字、代码、图画的形式来呈现内容。主要对常用Hooks中的 useState、useReducer、useEffect
日期 2023-06-12 10:48:40小前端读源码 - React16.7.0(三)
继续上边说道的将fiber传入了scheduleWork函数中，接着如何一步一步去进行渲染呢？Lam：小前端读源码 - React16.7.0(二)在scheduleWork内部会将fiber传入一个scheduleWorkToRoot进行加工。scheduleWorkToRoot在scheduleWorkToRoot中会对fiber的expirationTime进行赋值，然后返回fiber中的s
日期 2023-06-12 10:48:40小前端读源码 - React16.7.0(深入了解setState)
在之前我们已经阅读过了React在首次渲染时的逻辑和流程，下面是链接：Lam：小前端读源码 - React16.7.0(渲染总结篇)但是对于阅读React源码的角度来说还不够，在上面文章最后有提到的一些阅读计划，本篇文章将去阅读在我们触发setState的时候到底代码是如何执行的，中间会经过哪些流程。我们先来带着问题去阅读代码，在这次阅读中我们带着以下的一些问题进行阅读，通过阅读源码弄清楚每一个问
日期 2023-06-12 10:48:40React Router源码浅析
2020年的春节是一个多灾多难的春节，新型冠状病毒的出现折磨着每一个中国人的心，导致不少公司都安排节后在家办公，但是在这个时候，作为一名小前端也是要继续努力学习，所哟2020年的第一篇文章就从React Router的源码阅读开始，继续了解React的体系。前言为什么去看React Router的源码？了解React Router的实现原理如何监听路有变化以及渲染对应的组件我一直认为，会用框架和用
日期 2023-06-12 10:48:40一文弄懂React 16.8 新特性React Hooks的使用
什么是Hook？Hook是React 16.8的新增特性。 它可以让你在不编写class的情况下使用state以及其他的React特性。 是一些可以让你在函数组件里“勾入” React state及生命周期等特性的函数。 Hook不能在class组件中使用，这使你不使用class也能使用React。 如何使用？ 一个最简单的Hooks首先我们来看一下，一个简单的有状态组件class Example
日期 2023-06-12 10:48:40react组件深度解读
五、React 核心是组件在 React 中，我们使用组件（有状态、可组合、可重用）来描述 UI 。在任何编程语言中，你都可以将组件视为简单的函数。React 组件也一样， 它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。尽管一些 React 组件是纯组件，但也可以在
日期 2023-06-12 10:48:40react路由懒加载[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。 1.lazy，Suspense fallback，路由懒加载//引入Suspense从react中 import React,{Suspense} from 'react' import Home from './Home' //懒加载需要写成 const Home = lazy(()=>import（&#
日期 2023-06-12 10:48:40深入源码彻底搞清vue3中reactive和ref的区别
一、前言在vue3的日常开发中，我发现很多人都是基于自己的习惯reactive或ref一把梭，虽然这样都可以实现需求，既然这样那为什么已经有了reactive还需要再去设计一个ref呢？这两者的实际运用场景以及区别是什么呢？并且关于ref的底层逻辑，有的人说ref的底层逻辑还是reactive。有的人说ref的底层是class，value只是这个class的一个属性，那这两种说法哪种正确呢？都有没
日期 2023-06-12 10:48:40
React核心工作原理
## 1.1、虚拟DOM常见问题：react virtual dom是什么？说一下diff算法？拿到一个问题，一般回答都是是什么？为什么？怎么办？那就按照这个思路来吧！what用 JavaScript 对象表示 DOM 信息和结构，当状态变更的时候，重新渲染这个 JavaScript 的对象结构。这个 JavaScript 对象称为virtual dom；whyDOM操作很慢，轻微的操作都可能导致
日期 2023-06-12 10:48:40React技巧之鼠标悬浮添加行内样式
原文链接：https://bobbyhadz.com/blog/react-inline-style-hover[1]作者：Borislav Hadzhiev[2]正文从这开始~总览在React中，鼠标悬浮时添加行内样式：在元素上设置onMouseEnter和onMouseLeave属性。当用户鼠标移入或者移出元素时，更新state变量。在元素上有条件地设置行内样式。import {useStat
日期 2023-06-12 10:48:40React报错之Objects are not valid as a React child
原文链接：https://bobbyhadz.com/blog/react-objects-are-not-valid-as-react-child[1]作者：Borislav Hadzhiev[2]正文从这开始~总览当我们尝试在JSX代码中，直接渲染对象或者数组时，会产生"Objects are not valid as a React child"错误。为了解决该错误，在J
日期 2023-06-12 10:48:40React报错之Style prop value must be an object
原文链接：https://bobbyhadz.com/blog/react-style-prop-value-must-be-an-object[1]作者：Borislav Hadzhiev[2]正文从这开始~总览在React中，当我们为元素的style 属性传递字符串时，会产生"Style prop value must be an object"警告。为了解决该警告，使用从
日期 2023-06-12 10:48:40React报错之Expected `onClick` listener to be a function
正文从这开始~总览当我们为元素的onClick属性传递一个值，但是该值却不是函数时，会产生"Expected onClick listener to be a function"报错。为了解决该报错，请确保只为元素的onClick属性传递函数。expected-onclick-listener-to-be-function.png这里有个例子来展示错误是如何发生的。// App
日期 2023-06-12 10:48:40【玩转 Cloud Studio】React Run on Cloud Studio
前言看到了腾讯云开发者社区联合腾讯云 Cloud Studio 团队发起【玩转 Cloud Studio】有奖调研征文活动，有幸来体验一下。What is Cloud StudioCloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能使用。平台首页微信登录以后可以看到快速初
日期 2023-06-12 10:48:40react快速上手
今天想简单玩玩React，我们打开React官方文档：https://react.docschina.org/点击入门教程通过简单的介绍后，我们开始代码编写打开提供的在线初始代码(我们之后再搭建本地开发环境来完成这个游戏，今天暂时只做一个简单入门)：https://codepen.io/gaearon/pen/oWWQNa?editors=0010打开codepen提供的在线编辑器，看到初始代码后
日期 2023-06-12 10:48:40react中什么情况下不能用index作为key
我们在React遍历渲染列表时会遇到这样一个报错：意思是说，渲染list列表时必须给每个元素指定一个唯一的key当然你可以选择忽略这个报错，但是为什么会提示这个报错呢？假设我们给key指定一个随机数，或者干脆不指定的话，会怎么样呢？官方文档给出了答案：渲染列表时的逻辑以及问题为了解决上述问题，React 引入了 key 属性。也就是说，如果给key指定一个随机数，或者干脆不指定的话，会造成性能问题
日期 2023-06-12 10:48:40react 路由权限守卫[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。 app.js// 路由 import { HashRouter as Router,Route,NavLink,Redirect,Switch,useHistory} from 'react-router-dom' // 导入哈希路由（BrowserRouter浏览器路由）起别名叫Router // Route 路由页面，N
日期 2023-06-12 10:48:40react-navigation重复点击多次跳转的解决方案
大家好，又见面了，我是你们的朋友全栈君。 废话在react-native@0.44版本之后，官方废弃了之前的导航Navigator，用react-navigation 替代react-natvigation于2017年1月份开源，在3个月时间内，GitHub上star数达4000+，备受推崇，由于其性能体验堪比原生，而且使用方便，最后被FB钦点为“御用导航”但是在使用过程中还是发现了一个问题：
日期 2023-06-12 10:48:4002-React脚手架+Todos项目(组件拆分, State应用, 组件通信+数据校验, nanoid)
全局安装Yarn安装Cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org复制全局安装yarncnpm install -g yarn复制修改Yarn为淘宝数据源yarn config set registry https://registry.NPM.Taobao.org复制全局安装create-react-appnp
日期 2023-06-12 10:48:4003-React网络通信(Axios, PubSubJs, Fetch)
创建项目create-react-app react_axios复制添加axios依赖yarn add axios复制配置代理在package.json中配置"proxy": "http://localhost:8080"复制使用时需要将访问端口改为自身端口import React, {Component} from 'react'; i
日期 2023-06-12 10:48:4005-React Antd UI库
AntDesign UI 库地址https://ant.design/components复制添加依赖yarn add antd复制我在使用的时候一致报错超时npm install antd --save复制可以使用NPM尝试基础使用引入组件import {Button} from 'antd'复制引入样式(一般全局引入一次)import 'antd/dist/ant
日期 2023-06-12 10:48:40react生态下jest单元测试
一：jest框架搭建1.在本地创建一个目录jest_practice2.使用编辑器VScode打开目录，紧接着在终端中打开，执行npm init3.执行以下命令：注意：这里我们使用cnpm去安装速度会更快，npm速度会很慢！ a.建议使用npm install –g jest(不需要单个去安装依赖)，修改package.json文件即可。b.安装jest框架，以及依赖cnpm install -
日期 2023-06-12 10:48:40React_Fiber机制
大家好，我是「柒八九」。今天，又双叒叕yòu shuāng ruò zhuó开辟了一个新的领域--「前端框架」。这是继JS基础&原理JS算法前端工程化浏览器知识体系Css网络通信这些模块，又新增的知识体系。说起前端框架，大家肯定第一时间会联想到Vue/React，其实前端框架范围很广，它不应该被局限在Vue/React等主流库，还有很多在某些领域大放异彩的库和框架。例如LitGoogle出
日期 2023-06-12 10:48:40react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。一、子向父组件传值方法一:父组件//方法parentFn(data1, data2, e) { // 按照参数排列 最后一个是eventconsole.log(data1, data2, e) //输出 1 2 event内容}//渲染render() { return (//子组件)}子组件// 渲染render() { return (//可以直接
日期 2023-06-12 10:48:40react中类组件传值，函数组件传值：父子组件传值、非父子组件传值[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。 父子组件传值、非父子组件传值；类组件传值父子 组件传值子 传 父： 子组件：事件的触发 sendMsg=()=>{ this.props.person(); } 父组件： <Chil
日期 2023-06-12 10:48:40