REACT - 技术教程文章
如何对react进行性能优化
{...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担，因此，也请慎用spread attributes（<Component {...props} />）)。::this.handleChange()。(请将方法的bind一律置于constructor)this.handleChange.bind(this,id)复杂的页面不要在一个组件里面写完。请尽量使用const element。map里面添加key，并且key不要使用index（可变的）。具体可参...
vscode 调试 react 项目【代码】
主要分为以下三个步骤安装 debug for chrome配置 launch.json 文件配置内容如下 {"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "Launch Chrome","url": "http://localhost:3000", // 改为目标 url"sourceMaps": true,"webRoot": "${workspaceFolder}","skipFiles": ["node_modules/**"],"sourceMapPathOverrides": {"webpack:///*": "${webRoot}/*"}}] }打断点，在 Debug 模块启动调试本...
react问题总结与归纳【代码】
欢迎大家指导与讨论 : ） 【持续更新】本文主要记录笔者在学习中遇到的问题，并作出相应总结。有错误的地方希望各位能够支持。 一、在es6中getInitialState( 摘要: constructor(props)和this.state )/*es6*/ class TodoList extends Component{constructor(props){super(props);this.state = {items: [‘hello‘, ‘world‘, ‘click‘, ‘me‘]}}render(){//.. } } /*es5*/var TodoList = React.createClass...
基于vite2的react脚手架【代码】【图】
vite-react-boilerplate开发编译yarn start 启动开发yarn build 启动编译代码质量和风格husky/lint-staged/eslint/prettier 暂存区代码提交自动检查修复 , 可以自行扩展git hooks , e.g. commit-msg 代码提交检查等。HMR@vitejs/plugin-react-refresh 实现react HMR代码库（样式）按需加载样式按需加载 (组件不存在这个问题)，默认配置了antd 和zarm组件库,对于其他组件库， 参考vite-plugin-style-import 文档 plugins: [styleImp...
React Native 之 HelloWorld【代码】
1. 切换目录输入之前要切换到要保存的目录2. 修改下载源cd ~/ vim .npmrc添加 registry = https://registry.npm.taobao.org 3. 在终端中输入react-native init HelloWorldReactNative 4. 运行项目ios: 用xcode打开android ,在项目目录，运行命令：react-native run-android原文：http://www.cnblogs.com/SimonGao/p/5565738.html
[react] 细数 React 的原罪【代码】
Props & onChange 的原罪 。「props & onChange 接口规范」它不是一个典型的「程序接口规范」。当你拿到一个可视组件的 ref，却没有类似 setProps() 这样的方法来改变其 props，你只能在 render() 方法中，通过 jsx 语言来设置其 props。这意味着父元素必须保存并维护这个 props 对应的值，而更多时候，父容器只是想一次性的设置一个值，然后就走，让以后的事情交给子元素自己去维护。当然，你也可以通过 ref 来获取子元素的应用，...
[React Testing] Hide console.error Logs when Testing Error Boundaries with jest.spyOn【代码】
When testing an error boundary, your console will be filled with console.error calls from React. Those can be a real distraction from the rest of the output for your tests. Let’s clean those up with jest.spyOn. beforeAll(() => {// do log out any error messagejest.spyOn(console, ‘error‘).mockImplementation(() => {}) })afterAll(() => {console.error.mockRestore() }) Then we can verify the console....
React 生态
1. 状态管理Redux JavaScript 状态容器，提供可预测化的状态管理MobX 通过函数响应式编程使得状态管理变得简单和可扩展Redux Thunk Redux的异步处理中间件Redux Saga Redux中间件,用于管理应用程序 Side Effect(副作用，例如异步获取数据，访问浏览器缓存等)Dva 一个基于 redux 和 redux-saga 的数据流方案 2. UI组件库Ant design 基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品Ant design mobile 基于...
浅谈React【代码】
组件化组件的封装组件的复用组件的封装视图数据视图和数据之间的变化逻辑import React, {Component} from ‘react‘;export default class List extends Component{constructor(props){super(props);this.state = { //数据list:this.props.data,}}render() { return (<div> <ul>{this.state.list.map(function(item,index){return (<li key={index}>{item}</li>);})}</ul></div>)} } 组件的复用(通过props传递)import React, {Com...
react-native run-ios “Could not find iPhone X simulator”【代码】【图】
问题这个问题发生在旧的RN版本（0.57，0.58（<0.58.4），…）和Xcode 10.3中，其中可用模拟器的名称得到了一些调整 在文件node_modules/@react native community/cli/build/commands/runIOS/findMatchingSimulator.js中，react native尝试通过简单的.startsWith检查选择正确的模拟器。由于重命名，检查现在应该使用.includes（ref）Found Xcode project appupdateDemo.xcodeprojCould not find iPhone X simulatorError: Could not...
四. React 实现一个 helloWorld【代码】
(1) 删除 my-app/public/ 目录下所有文件 只保留 index.html 修改 index.html 代码如下<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><title>React App</title></head><body><div id="root"></div></body> </html>(2) 进入src 目录 修改index.js 代码如下import React from‘react‘; import ReactDOM from‘react-dom‘; import App from‘./App‘;ReactDOM.render(<App />, document.getElementBy...
React Native Drawer Navigator 添加背景图片【代码】【图】
给React Navigation Drawer添加背景图片，经过一番搜索，在stackoverflow找到了答案。答案具体给出的思路是：通过自定义渲染组件来实现背景图的添加。其实，官方关于createDrawerNavigator的props描述里也写到了关于这个问题的描述。简易代码如下import {createDrawerNavigator, DrawerItemList } from "@react-navigation/drawer" const Drawer = createDrawerNavigator()const HomeScreen = ({navigation: nav}) => (<View><Text...
ReactiveCocoa + MVVM【代码】
1.ReactiveCocoa常见操作方法介绍。1.1 ReactiveCocoa操作须知所有的信号（RACSignal）都可以进行操作处理，因为所有操作方法都定义在RACStream.h中，而RACSignal继承RACStream。1.2 ReactiveCocoa操作思想运用的是Hook（钩子）思想，Hook是一种用于改变API(应用程序编程接口：方法)执行结果的技术.Hook用处：截获API调用的技术。Hook原理：在每次调用一个API返回结果之前，先执行你自己的方法，改变结果的输出。RAC开发方式：RAC中...
TypeScript + React + Redux 实战简单天气APP全套完整项目
目录： 下载链接：百度网盘从面向过程的js到面向对象的js，让web前端更加高大尚。让你的前端步步日上，紧跟技术发展的前沿。让你构建更加复杂的应用，不只是web，App照样搞定。跟后台开发人员一较高下。巅峰对决。适用人群：js前端工程师，web前端设计师，typescript技术人员课程简介：TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编...
我的第一个 react redux demo【代码】【图】
最近学习react redux，先前看过了几本书和一些博客之类的，感觉还不错，比如《深入浅出react和redux》,《React全栈++Redux+Flux+webpack+Babel整合开发》，《React与Redux开发实例精解》， 个人觉得《深入浅出react和redux》这本说讲的面比较全， 但是 很多都是蜻蜓点水， 不怎么深入。这里简单记录一个redux 的demo， 主要方便以后自己查看，首先运行界面如下： 项目结构如下： 这里我们一共有2个组件，都在components文件夹下面，...
react基础---react全家桶03【代码】【图】
目录：1. redux 1.1 原始，原始步骤 1.2 react-reducer，两种写法（导出普通写法 和 装饰器的写法） 1.3 存储多个reducer2. redux中间键，redux-logger | redux-thunk 异步请求，调用dispatch3. router 基本：BrowserRouter, Link, Route, Switch, Redirect（tab中默认页面），404 传参 路由守卫 内容：1. redux 安装 #npm install redux --save 1.1 原始，原始步骤 store,createStore ...
reactApi学习之组件命名【图】
1、 组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。2、小驼峰命名来定义属性因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className，而 tabindex 则变为...
React Native 系列(八)【代码】【图】
前言本系列是基于React Native版本号0.44.3写的。我们都知道，一个App不可能只有一个不变的界面，而是通过多个界面间的跳转来呈现不同的内容。那么这篇文章将介绍RN中的导航。导航什么是导航？ 其本质就是视图之间的界面跳转，例如首页跳转到详情页。在RN中有两个组件负责实现这样的效果，它们是:NavigatorIOSReact Navigation你可能在很多地方听说过Navigator，这个老组件会逐渐被React Navigation代替。笔者在最后也会讲解一下Na...
React Native 调用 Web3（1.x） 的正确姿势【代码】
1 创建项目react-native init lm1 cd lm12 安装依赖包yarn add node-libs-browser3 创建 rn-cli.config.js 脚本const extraNodeModules = require(‘node-libs-browser‘);module.exports = {extraNodeModules, };4 创建 global.js ，引入公用包global.Buffer = require(‘buffer‘).Buffer; global.process = require(‘process‘);if (typeof btoa === ‘undefined‘) {global.btoa = function (str) {returnnew Buffer(str, ‘b...
react-native执行 npm install cl.exe找不到 的问题
最近在学习react-native，昨天在尝试某个demo时，执行 npm instal， 总是遇到 cl.exe文件找不到，最开始以为Microsoft Visual C++ 2015 Redistributable 有问题，便修复了一下，还是出错。接着网上各种搜答案，可惜都没解决。最后我想看看这个cl.exe到底是个什么，郁闷的是在电脑上竟然找不到这个文件，最终我想起了在安装vs时没有选c++语言，那边修复vs，安装c++，等待10min，执行 npm instal； 虽然有些警告但最终ok。原文：http...
react-native-swiper设定高度的方法（设置rn轮播图所占高度）【代码】【图】
效果图：直接上解决方案：1、在Swiper标签外套一层View<View style={styles.container}><Swiperstyle={styles.wrapper}height={width*40/75}autoplayTimeout={2.5}// showButtons —— 是否显示左右翻页按钮showsButtons={false}// autoPlay —— 是否自动播放autoplay={true}// paginationStyle —— 包含小点点的容器的样式，这里用来调整位置paginationStyle={styles.paginationStyle}// dotStyle —— 小点点的样式dotStyle={...
React 入门(3): 严格模式 props
严格模式StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usageEND原文：https://www.cnblogs.com/develon/p/13619144.html
React & Vue2 Butterfly图编排——让数据更自由地驱动DAG【代码】【图】
一、简介 Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，由咱们部门以及其他开发者共同维护开发，具有使用自由、定制性高的优势，已支持集团内外上百张画布，不夸张的说，我觉得可以算的上“杭州余杭区最自由的图编辑器引擎”。 可是，由于大多数用户对于原生的jquery操作还是略感繁琐，对于React的生态(特别是Antd,Fusion等UI库)支持不够友好，随之而来butterfly对于React & Vue支持的呼声日渐升温。很抱歉...
ES6 React 组件引用本地图片问题
es6不支持在<img />标签内直接写图片的路径，即：<img src="../../static/banner.png"/> （1）import 方法：import imgURL from ‘../../static/banner.png‘;<img src={imgURL } />（2）require方法<img src={require(‘../../static/banner.png‘)}/>原文：https://www.cnblogs.com/guanpingping/p/10351141.html
解决React Native使用Fetch API请求网络报Network request failed
问题来源： 1 . 在测试fetch数据请求时，Xcode9.0以上的无法请求https， 需要在Xcode中加载项目后修改Info.plist的相关配置，具体如下参考问题及解决方法一模一样，不再重新写了，直接转发前辈们的。只为了今后忘记操作而保存的笔记。 转发： 1 . 解决React Native使用Fetch API请求网络报Network request failed 2 . Mac上React Native的fetch请求报错Network request failed解决办法原文：https://www.cnblogs....
ReactNative: 使用分段组件SegmentedControlIOS组件【代码】【图】
一、简介iOS中的UISegmentControl分段控件，可以设置筛选条件来更新视图或者用来切换控制器。同样地，在ReactNative中兼容iOS平台提供了一个SegmentedControlIOS组件。它的用法差不多，现在来看看。 二、APISegmentedControlIOS组件既提供了属性，也提供了函数可用。示例如下：//控件的细分按钮的标签文案，数组排列 values: PropTypes.arrayOf(PropTypes.string),//选中的控件的某一个细分按钮标签selectedIndex: PropTypes.numbe...
在Node.js上搭建React.js开发环境【图】
1.React.js的介绍：React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。特点：1.声明式设计 ?React采用声明范式，可以轻松描述应用。2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活...
React npm ERR! code ELIFECYCLE
[解决]npm ERR! code ELIFECYCLE项目开发环境遇到报错如下 error.png废话不多说，上解决方案Step1：npm cache clean --forceStep2：rm -rf node_modulesStep3：rm -rf package-lock.jsonStep4：npm installnpm install 成功之后再次启动 npm start原文：https://www.cnblogs.com/chenwolong/p/13755065.html
101-advanced-React易用性，概述【代码】
React完全支持构建可访问的网站，通常使用标准的HTML技术。1、可访问小部件ARIA文档包含用于构建完全可访问的JavaScript小部件的技术。 JSX完全支持所有aria- * HTML属性。尽管React中的大多数DOM属性和属性都是camelCased的，但这些属性应该是小写的：<inputtype="text" aria-label={labelText}aria-required="true"onChange={onchangeHandler}value={inputValue}name="name"/>2、html语义 语义HTML是Web应用程序可访问性的...
3 ACE_Reactor 同步框架 网络聊天室【代码】【图】
3 ACE_Reactor 同步框架 网络聊天室ACE_Reactor 框架650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109025549216.jpg" title="001.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109025549432.jpg" title="002.png" />650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109025549800.jpg" title="003.png" />650) this.width=650;" src="/upload/get...