xiaopi3的博客

redux和react-redux

React的Suspense有个fallback，可以利用这个特性来处理未请求到数据时显式的内容，请求到数据后就显示结果。

文章目录1 使用背景2 类组件使用3 函数组件使用4 消费多个context5 useContext1 使用背景为了跨组件进行数据传递，尤其是跨多级组件传递，使用context能简化流程，且更为清晰。需要注意的是，依赖context的组件，在context发生改变的时候会更新（不受shouldComponentUpdate控制）需要注意的是：context比较为浅比较，如果父组件传递给子组件的context是一个新对象，则会触发子组件更新。2 类组件使用注意：context一定要单独存放，否则可能

文章目录1 优化原则2 常用手段2.1 单个React组件优化2.2 shouldComponentUpdate解析2.3 PureComponent2.4 使用immutable（ImmutableJS）3 其他优化点1 优化原则不要过早对项目进行优化切勿浪费精力在对整体性能提高的不多的代码上对于关键的性能点尽早优化react使用虚拟dom树提高性能，每次渲染并非抛弃所有重新渲染，而是借助虚拟dom计算dom树的最小修改优化点：在计算前就判定是否需要去重新渲染2 常用手段使用shouldC

文章目录1 两者区别1.1 组件props和state是基础数据类型1.2 组件props和state含有引用数据类型1.3 父组件继承Component，子组件继承PureComponent1.4 父组件继承PureComponent2 适用范围1 两者区别抓住最根本的区别：PureComponent内置了shouldComponentUpdate方法，自动进行了判断，使用的是浅比较判断state和props是否变化，由于是浅比较使用的是===，即判断的是引用地址是否变化，当无变化返回false，不更

目录♥1 什么是错误边界2 定义一个错误边界组件3 使用错误边界组件1 什么是错误边界简单理解：专门给崩溃UI的备用UI组件，即原UI发生错误导致无法正常显示崩溃时的处理（一般都有备用UI），他能捕获其内部的组件树上任何js错误注意，无法捕获场景事件处理（事件处理是逻辑部分，不影响UI）异步代码服务端渲染错误边界组件本身错误2 定义一个错误边界组件错误边界是一个组件！内部必须要定义两个方法：static getDerivedStateFromError和componentDidCatc

1 路由安装和使用安装依赖npm install react-router-dom --save引入对象import {BrowserRouter as Router, Route, Link} from "react-router-dom";Route组件：负责存放响应地址和响应组件Link组件：负责触发响应Router组件：负责存放所有的响应体，即Route组件必须在Router种使用其中Home和A为React自定义组件<Router> <div

ESLint学习笔记一、安装并使用Eslintconsole错误错误重现解决二、解读Eslint配置envglobalsrulesextends三、不同目录自定义配置规则四、在项目中配置Eslint五、Eslint插件配置六、Glob路径匹配七、在提交代码时运行检测一、安装并使用Eslint本地项目安装：// 放在开发依赖中npm install eslint -D向导配置：npx eslint --init运行eslint检测：npx eslint xxx.js// 可以使用通配符

mobx快速入门mobx使用mobx quickstartmobx声明1. 使用函数封装：2. 使用修饰器computedautorunwhenreactionactionrunInActionobserverProviderinject参考示例mobxmobx是啥：是一个用来管理状态的库，如果被观测组件发生改变，会自动渲染有关页面，告别setState。mbox编程的3个重点：observer观测器：带有观测器的react组件或者属性被mobx实时观测observable可观测对象：由mobx

走马观花之AxiosAxios是什么安装典型用法GETPOST创建通用请求多并发请求自定义axios实例响应体结构请求取消拦截器错误处理配置configAxios是什么一个基于 Promise 的HTTP库，异步，用于浏览器和nodejsAPI：https://www.kancloud.cn/yunye/axios/234845功能：创建XMLHttpRequestsnodejs创建http请求支持Promise API拦截请求和响应对req和res数据转换取消请求自动json转换

React Hooks初识hooks初识hooksreact hooks复制了class构建的组件所能实现的功能，常见的有生命周期函数、状态等，并且解决了类组件中的this指向问题，可以说使用Function实现Class看一下二者对比：// class组件class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 };

React组件内部的API组件APIsetStatereplaceStatesetPropsreplacePropsforceUpdatefindDOMNodeisMounted组件API组件API这里指的是在组件内可以使用的方法，主要有：设置状态：setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态：isMounted （在es6被废弃）s

React Map遍历中的keymap遍历map遍历在jsx语法中，标签之间是可以使用{}来写js语法的，其中最常用的就是map遍历来输出一组标签在react中一map出来的一组相同标签，必须提供一个key，这个key有利于提高程序运行和渲染效率，识别元素的增删，在局部环境中，key必须唯一，且不能改变示例1：不提供keyconst listItems = numbers.map((numbers) => <li>{numbers}</li>);此时运行程序

React条件渲染简易条件渲染变量渲染逻辑表达式渲染三元运算渲染简易条件渲染最简单的条件渲染就是采用if函数来决定渲染哪个组件function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}该示例中，通过判断isLoggedIn状态来决定渲染哪个

React事件处理事件绑定构造绑定就近绑定自动绑定事件传参箭头函数传递bind传参事件绑定在一个事件发生时调用特定的处理逻辑，将逻辑与事件绑定起来绑定方式有三种：构造绑定就近绑定自动绑定构造绑定这种方式使用时在构造函数中对组件内部的方法进行绑定class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; //

React状态机和生命周期状态机生命周期状态机React采用状态机的状态来重新渲染页面（不操作DOM），状态保存在实例变量state中，该状态初始化后必须使用setState来修改状态，否则不会触发重新渲染机制，初始化一般在构造中或者类中方法外初始化：this.state={key:value,key,value}修改状态：this.setState({key:value,key:value})使用状态：this.state.key构造函数使用constructor表示，且如需使用this，则必

React语法JSX语法html中引入jsxjsx样式使用jsx使用注释jsx使用数组JSX语法这是一种奇怪的语法：由变量和标签组合成，即标签和普通语法混合使用const element = <h1>Hello, world!</h1>;为了避免本身的JS语法中的class和for关键字与标签中属性名重复，react使用className和htmlFor如果要使用jsx语法，需要安装：babel-preset-react包转换，然后在.babelrc文件中的preset下增加

React组件组件分类函数组件类组件组件传值组件分类react组件分为有状态和无状态的两种类别，有状态的一般是类组件，无状态的是函数组件注意：组件首字母必须大写，否则按照普通标签解析函数组件先来看代码：function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {props.date.toLocaleTimeString()}.&lt

React Hello WorldHello World直接上手元素渲染Hello World直接上手依据前面的内容，搭建好react工程目录，这里使用npxnpx create-react-app mydemo会在当前目录新建mydemo工程，注意：工程名必须为全小写这里假设index.html中内容如下：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hel

React第一步构建项目最简单的开始最简单的开始按照如下流程依次安装配置：先安装nodejs配置registry安装cnpm（可选）安装并使用facebook的create-react-app工具来创建最简单的react项目工程目录结构创建项目并启动：create-react-app my-appcd my-appnpm start// 访问localhost:3000此时创建的工程目录为：my-app/ README.md node_modules/ packa

React的Ref功能1.String Ref2.Callback Ref3.Create Ref4.useRef不同渲染周期之间的数据共享各方式使用总结1.String RefString Ref是个过时的API。因为String类型的Ref存在一些问题，将在未来的某个版本中被遗弃，不建议使用。使用方式：this.refs.XXX获取DOM元素节点：获取普通标签：import React, { Component } from 'react';class App extends Compone

React访问input标签内容很常用的需求，在react的某个方法中需要访问render到页面上的某个input，有几种方法，这里介绍一种最简单的方法（类似html中的getElementById）：ref使用隐藏熟悉ref，指定ref的值，即可以在组件中任何地方获取该标签对象：render的return中返回： <form onSubmit={this.submitHandle...