REACT - 技术教程文章
WebFlux block()/blockFirst()/blockLast() are blocking, which is not supported in thread reactor-http【代码】【图】
block()报错 WebFlux中，如果是Mono/Flux.map()或者其他方法体是属于NonBlocking线程，如果在NonBlocking线程中再调用阻塞方法(block()等)会报错static final class NonBlockingThread extends Thread implements NonBlocking {public NonBlockingThread(Runnable target, String name) {super(target, name);}}public static void main(String[] args) throws InterruptedException {Thread th = new NonBlockingThread(new Runna...
[必须要了解的React -状态管理]阅读hox对状态管理的思考【代码】
阅读 hox对状态管理的思考对于react 状态管理已经是老生畅谈的话题，官方没有给出最佳实践因此市面上关于状态管理的探索从未停止过。本文就 hox库探索做一个总结，建议按本文顺序阅读。 开篇 组件状态定义 对于 hooks推出之后,对于状态定义也更加灵活，下面关于组件定义状态如下: function Counter() {const [count, setCount] = useState(0)return (<div><p>count:{count}</p><button onClick={() => setCount(count + 1)}>add</b...
react 启动异常 & 代码未做任何改动 =》怀疑安装elint时包有问题
错误日志：\jsx> yarn start yarn run v1.19.1 $ node ./YarnStartPreCheck.js && react-app-rewired start internal/modules/cjs/loader.js:797throw err;^Error: Cannot find module webpack/lib/node/NodeTemplatePlugin Require stack: - D:………………\jsx\node_modules\html-webpack-plugin\lib\compiler.js - D:………………\jsx\node_modules\html-webpack-plugin\index.js - D:………………\jsx\node_modules\react-scri...
Debugging React Apps In Visual Studio Code【图】
原文：https://www.zeolearn.com/magazine/debugging-react-apps-in-visual-studio-code Browser debugger or extension to the browser debugger is the usual way of debugging Javascript-based web applications and Javascript-based frameworks like React, Angular, etc. For React-based apps, React Developer Tools is such an extension. There is nothing wrong with this approach of debugging. But having develope...
react native之旅-1 环境搭建【代码】
react native之旅-1 环境搭建 无论哪种语言或技术，环境搭建是第一步，react native也是如此。由于众所周知的原因，造成react natvie环境搭建“异常艰难”o(╥﹏╥)o 在趟了“无数”坑后，我总结成这篇博客，一来有个记录，二来留给他人参考少走弯路，以下内容都是我摸索出来的经验，无需翻墙100%可用！ react natvie 版本 0.62 安装依赖 node & watchman & yarnnode不必多说，前端必备Watchman是 facebook 的一个开源项目，它开源...
react-native之旅-2填坑指南【代码】
react-native之旅-2填坑指南 Cant find node binary to build React Native bundle 原因： 使用非标准 node 安装流程造成 XCode 找不到 node 安装路经。比如，使用 nvm 安装 解： ln -s $(which node) /usr/local/bin/node不断补充中……
Taro React 使用总结【代码】
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。现如今市面上端的形态多种多样，Web、React Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。在 Taro 中使用 React，入口组件必须导出...
React遍历antd库的icon出现的一些问题【图】
用React进行动态遍历导航栏的时候，icon一直出不来，目前版本的antd已经和教学视频中的不一样了， 要遍历的列表数组如下 我改了icon为字符串的很多种形式， 都不行 遍历代码如下 结果如下，无法显示想要的icon随后将icon导入list文件中，将列表中的字符串改成对象形式 这次icon出来了，但是多级列表的title不显示，而且多级列表点进去样式也丢失了 正常情况下该是这样 后来发现是忘了写多级列表的title，但是子级列表样式依旧...
React —— 组件实例的三大核心属性 state，props，refs【代码】
React —— 组件实例的三大核心属性 state，props，refs React —— 组件实例的三大核心属性 state，props，refs一、statestate 介绍state 初始化1.借助类的构造器对state进行初始化2.简写正确地使用 state1. 不要直接修改 State2. State 的更新可能是异步的3. State 的更新会被合并，而不是覆盖实例 二、propsprops 介绍props 基本使用1.在组件中通过属性传入2.利用扩展运算符的简写3.在组件类定义中通过 this.props 读出props 限...
React redux 存值取值 持久化【代码】
先创建一个store.js文件 在https://www.npmjs.com/package/redux-persist官网里面 import { createStore } from 'redux' import { persistStore, persistReducer } from 'redux-persist' import storage from 'redux-persist/lib/storage' // defaults to localStorage for webimport rootReducer from './reducers'const persistConfig = {key: 'root',storage,whitelist: ['token'] }const persistedReducer = persistReducer(pe...
React组件间的通信
方式： props： (1).children props (2).render props 消息订阅-发布： pubs-sub、event等等 集中式管理： redux、dva等等 conText: 生产者-消费者模式 组件间的关系： 父子组件：props 兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理 祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)
vue、react、angular
Vue.js 一个用于创建 web 交互界面的库，是一个精简的 MVVM。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了Directives 和 FiltersAngularJS 是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，自带了丰富的 Angular指令react React 仅仅是 VIEW 层是facebook公司。推出的一个用于构建UI的一个库，能够实现服务器端...
前端笔记：React的form表单全部置空或者某个操作框置空的做法【代码】【图】
在React框架前端开发中，经常会有弹出框的开发，涉及到弹出框，难免就会有表单。一般在关闭弹出框或者对表单联动时，往往都需要考虑对表单进行置空操作了。 我以前在工作就遇到过这类问题，正好顺便对表单置空这块做一些总结小记录。 主要有两种情况，一种是对整个表单置空，一种是想灵活对其中个别选框置空。 1.全部置空的做法,一般在弹出框关闭后，需要重置该form所有表单：this.props.form.resetFields();2.针对某个操作框置空的...
react fiber摘要【代码】【图】
react理念 前言一、react理念1.问题阐述2. 解决方案 二、react15和react16的过渡1.react152.react16 三、fiber1.fiber工作原理1.fiber记录操作状态 四、参考文章前言 react fiber是react 16 的一种架构模型，下文会介绍react的理念，以及fiber产生的原由，fiber的实现原理和工作原理提示：以下是本篇文章正文内容，下面案例可供参考 一、react理念 1.问题阐述 简单来说，在react产生之前，关于前端的性能有两个比较大的问题 1，如何...
React进行axios二次封装【代码】【图】
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在实际的项目中，我们一般会进行二次封装。1.引用及准备 封装之前首先进行引用及构造请求地址API。其中services模块汇总了所有请求地址与类型，请求示例如reqCheckLogin所示。 /*** services模块根据接口文档定义接口的名称和方法* 根据模块拆分文件* index.js为出口文件，需要引入其他的services并整合*/ import login from './login' import permission fr...
React 多行省略的展开与收起【代码】
当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。 而我实现的是这样的:实现代码:12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310...
在 .NET Core 5 中集成 Create React app【代码】【图】
翻译自 Camilo Reyes 2021年2月22日的文章 《Integrate Create React app with .NET Core 5》 1 Camilo Reyes 演示了如何将 Create React app 与 .NET Core 集成，以生成一个移除了几个依赖项的脚手架。Create React app 是社区中创建一个全新 React 项目的首选方式。该工具生成了基础的脚手架用于开始编写代码，并抽象出了许多具有挑战性的依赖项。webpack 和 Babel 之类的 React 工具被集中到一个单独的依赖项中，使得 React 开发...
react百度富文本使用心得【代码】【图】
项目场景： react 项目中要使用百度富文本 具体流程： 打开百度富文本官网 https://github.com/fex-team/ueditor#ueditor将源码克隆下来 在此文件夹下来执行下面命令 //如果电脑没有安装grunt 执行以下第一个命令 npm install grunt -g //然后给ueditor安装依赖 npm install //再执行 grunt default这两就是被grunt default 出来的文件 将这个utf-8-php 文件夹改名为ueditor 然后就可以放到我们项目里的静态文件夹中 因为静态文...
《尚硅谷React视频教程》免费下载【图】
尚硅谷不仅有后端的 java 视频、还推出了很多涉及前端 HTML5 的视频教程。本文将给大家免费分享一份来自尚硅谷HTML5前端视频_React视频教程，希望能对大家有所帮助！ 前面我分享过尚硅谷 vue 视频教程《尚硅谷HTML5前端视频_Vue核心技术视频免费下载》。VUE 和 React 是很火的一对冤家，学习 vue.js 的肯定了解过 React。所以大家可以通过这套视频好好理解理解它们之间的相同点和区别。 React 是一个用于构建用户界面的 JAVASCRIPT...
react 列表页与详情页跳转带参数【代码】【图】
react hooks 列表页跳转详情页 带上id 等参数 详情页获取参数判断是否有值 有值的情况下 请求数据 列表页 发起 1.跳转的地方 <a key='info'onClick={() => {history.push({pathname: '/list/list-detail',search: `?id=${id}&type=view`})}}>查看详情 </a> 2.history 来源 import { useHistory } from 'react-router-dom'const TableList: React.FC = () => {const history = useHistory()}详情页 接收 1.接收history里的search...
前端技巧：react中的render-props模式【图】
在前端开发的过程中，如果我们遇到两个组件功能相同或者类似，应该怎么处理呢？复用相似的功能？复用什么？state，操作state的方法。有两种方式：render props模式、高阶组件（HOC）。这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式，接下来小千以render-props模式为例，一步一步演示其使用流程。案例分析我们以鼠标移动获取坐标为例，该案例是未优化过的代码，我们发现ui都限制在了render中。优化思...
react中的render-props模式【图】
在前端开发的过程中，如果我们遇到两个组件功能相同或者类似，应该怎么处理呢？复用相似的功能？复用什么？state，操作state的方法。 有两种方式：render props模式、高阶组件（HOC）。这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式，接下来我们以render-props模式为例，一步一步演示其使用流程。 案例分析 我们以鼠标移动获取坐标为例，该案例是未优化过的代码，我们发现ui都限制在...
React UI 库：React Suite 4.0.2 版本更新-多项Bug修复和新手入门【图】
React Suite简介React Suite 是一套 React 组件库，为后台产品而生，支持 Typescript, 支持服务端渲染。由 HYPERS 前端团队与 UX 团队打造，主要服务于公司大数据产品线。经历了三次大的版本更新后，累积了大量的组件和丰富的功能。4.0.2更新内容如下：Feature: 添加组件对繁体中文的支持. (#652)Bugfix: 修复了 CheckTreePicker 和 TreePicker 键盘操作无效的问题。Bugfix: 修复了 <Cascader> 搜索列表样式问题 (#651)Bugfix: 修复...
React 实践 - 构建聊天界面【代码】【图】
上一篇： React 体验开箱即用实现步骤 - 目录定义 基于 antd.design-pro 脚手架 在 layouts 添加聊天界面布局在 pages 目录添加聊天界面 文件结构 ├── src │ ├── layouts │ │ ├── layouts │ │ ├── ChatLayout.jsx # 聊天布局 │ │ ├── ChatLayout.less # 聊天布局样式 │ ├── pages │ │ ├── Im │ │ │ ├── chat │ │ │ │ ├── index.jsx # 聊天界面 │...
React-01：React介绍【代码】
React是什么？ React是一个将数据渲染成HTML视图的开源JavaScript库。 为什么要学React? 原生JS操作DOM繁琐，效率低。使用JS直接操作DOM，浏览器会进行大量的重排和重绘。原生JS没有组件化的编码方案，代码复用率低。 React的特点 采用组件化的模式，声明式编码，提高开发效率和组件复用率。在React Native中可以使用React语法进行移动端开发。使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。 babel的另一功能 一般情况...
React教程（详细版）【图】
一、简介（背景）本文篇幅较多，建议耐心看完，我相信多少会对你有所帮助!1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低用js直接操作dom，浏览器会进行大量的回流和重绘原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模...
2020最新版React Native从入门到实战打造高质量上线App
download:2020最新版React Native从入门到实战打造高质量上线App 本课程将带你解锁React Native开发应用新姿势，一网打尽React Native新版本热门技术；课程中老师会手把手带你开发并打包上线一款完整的跨平台App；让你拥有一次真正参与上线项目开发的历程，同时全面掌握React Native核心技术，让你的技术能力和项目经验都得到前所未有的提升！【技术储备要求：1.具备JavaScript、ES5，ES6，React 前端基础；2.具备ReactNative技术基...
React中使用swiper，当组件卸载后会继续执行Swiper绑定的事件【图】
问题 在React中使用new的方式创建Swiper轮播图，当组件卸载后给Swiper绑定的事件（SlideChange）还是会继续执行一遍，因为在事件中有更改state操作，所以当组件卸载后报错内存泄露。 当切换路由之后控制台就会报错 解决办法 想到两种办法解决，目前不知道为啥组件卸载后会执行slideChange事件。可能是我写法有问题？？？