将近半年没有写react了，关于redux状态什么的，感觉自己都忘得差不多，今天就做一个简单的回顾笔记吧！ redux的3个核心部分： store，单一的数据源； Reducer，作为一个函数，它负责对数据变化的分发和处理； action，对数据变化的描述。 combineReducers：合并多个reducer函数， compose：把接受到的函数从左到右进行组合 createStore：接受三个参数，分别是reducer、初始状态的内容和指定的中间件； dispatch：将redux…
类组件和函数组件： 类组件是基于ES6 Class的写法，通过继承React.Component得到的react组件。 函数组件，就是以函数的形式存在的react组件。 两种组件的区别： 1、类组件需要继承class，函数组件不需要； 2、类组件可以访问生命周期，函数组件不可以； 3、类组件可以获取实例话后的this，并基于this做其他很多的事情，而函数组件不可以； 4、类组件可以维护state，函数组件不可以。 类组件是面向对象编程的一种表现，react类组件内部预置很多的API，我们直接调用/定制，就像生命周…
redux 仅仅是用来管理组件的状态，需要满足以下条件： 用户使用方式复杂 不同的用户、不同使用方式（普通用户和管理员）； 多个用户之间的协作； 与服务器有大量的交互； View有多个数据源。 其他场景下，能不用redux就不用，否则增加项目的复杂度。 三大特征： 单一的数据源，整个应用的state都存储与store对象中； state只读，只有触发Action（用于描述发生的事件）才能改变state； 使用纯函数（函数的返回值只能依赖于它的参数，相同的输入，只能得到相同的结果）执行修改。 由三个部分构成： 1. …
生命周期： componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 错误处理 componentDidCatch(): react 16 的Portals特性，将组件渲染到当前组件树以外的DOM节点上。例如应用的全局弹框。 ReactDOM.createPortal(child,con…
constructor ====> 使用useState来初始化state componentDidMount ====> 使用useEffect传入第二参数为[]来实现； componentDidUpdate ====> useEffect传入第二个参数为空或者是值为变动的数组； componentWillUnmount ====> 清除副作用，在useEffectreturn一个函数来模拟 shouldComponentUpdate ====> 使用React.memo 包含一个数…
JavaScript的DOM树 DOM是结构化文本的抽象表达方式，在一个特定的web环境中它就是HTML文本，HTML中的每一个元素在DOM中有一个对应的节点，而且在HTML中的元素是存在包含关系，DOM节点就构成一个树型结构，称之为DOM树。 浏览器为了渲染和HTML格式的网页，会先把HTML文本解析为DOM树，再根据DOM树渲染出用户所看到的界面，当需要改变的界面的时候，就要修改DOM树上的节点。 浏览器渲染的步骤 构建DOM树,display:none的元素也在DOM树中，只是被隐藏起来了； 构建CSSOM树…
在react应用中，可以使用两种方式来定义组件：函数和class类， 函数组件 class类组件 当react应用在渲染我们所定义的组件之后，react会把jsx接收到的属性或者子组件转化为单个对象传递给组件，这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已，它并不是组件本身自己的数据，所以组件的Props具有不可更改的特征，这就是react的一个规则： 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 组件如何接收接收props？ 先说我们常见的函数组件，和我…
connect函数是连接React组件和Redux Store，连接操作过程中不会改变原来的组件，而且返回一个已经与Store连接的新组件。 connect常见的两个参数： 1、mapStateToProps(state,[ownProps]),在定义该函数时，组件会监听Store的变化，只要Store发生变化，mapStateToProps函数就会被调用并且必须返回一个纯对象，该对象会和组件的Props合并。mapStateToProps的参数ownProps。表示传递到组件的Props，也就是每次更…
官方的描述:JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。它没有任何语义,专门提供给与处理器使用。 在react中声明组件的时候使用jsx,如以下声明的组件: HTML中的onclick和JSX中的onClick 在HTML直接使用onclick，会出现我们意想不到的bug【很意外啊！】： onclick添加的事件函数是在全局环境中…
当我们创建好一个react应用之后,react应用创建的第一个组件会使用到react、React DOM和prop-types。 React DOM是ｒｅａｃｔ的渲染器，将组件渲染成为ＤＯＭ或者是服务器端渲染的字符串； prop-types的作用是对给组件传递的数据做一个类型检测。 构建react生成的第一个组件 调用React DOM的render方法来创建和管理组件，render方法需要两个参数，一个是应用需要渲染的react组件【ReactElement类型的元素】，另一个就是整个应用的容器【DOMEleme…
最快体验ｒｅａｃｔ，不需要进行繁琐的配置，使用create-react-app创建ｒｅａｃｔ应用。如果电脑上没有安装node的话，需要重新安装node的环境，node本身自带的npm，直接使用即可。 １、安装create-react-app: npm install -g create-react-app 查看create-react-app的版本： create-react-app --version 2、使用create-react-app创建react应用： create-react-app myApp 在创…
这篇博客主要是为了了解react hook的useContext API的使用，顺便回忆一下ｒｅａｃｔ组件传值的方式！ 以下有两种方式实现组件共享状态或者传值： 一 使用useContext()实现组件共享状态或者传值，useContext()接收React.createContext()返回的ｃｏｎｔｅｘｔ对象值，当前的context对象值是上层组件【父组件】中距离当前组件最近的<MyContext.Provider>的value决定的。 当多个子组件需要共享一个状态或者一个值的时候，就可以在<…
如上图所示，列表的序号和可以是后端定义好的，如果后端允许删除数据的话，那么列表序号就是出现断层的效果。 如下图： 为了体验效果，我们需要重新设置列表的序号。代码如下： 在columns参数中序号这一列设置 columns: [{ title: "序号", render: (text, record, index) => `${index + 1}` }] 使用render函数来渲染序号的数据，在render函数中： 1、text表示是序号一列默认显示的数据，如烟dataIndex:"id"。 2、record…
hook在不编写class的情况下使用state,目的就是解决class中生命周期函数经常包含的不相关逻辑，相关逻辑有分离到不同方法中等这类问题 useState 定义一个“state变量”， import React,{useState} from "react"; const [num,setNum] =useState(0) 与在this.state中定义的变量一样 useEffect Effect Hook在函数组件中执行副作用操作 副作用：订阅、手动更改组件等操作。Effect Hook是componen…
<Upload name="file"//设置为上传是文件形式 listType="picture-card" //卡片的形式展示 className="avatar-uploader" accept="image/jpeg,image/png"//设置仅仅支持扩展名为：.png/.jpg/.jpeg customRequest={info => {//手动上传,自定义上传提交方式 const formData = new FormData(); formData.append('file', info…
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from "moment"; import "moment/locale/zh-cn" format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是今天之前【包含今天】 需要和moment搭配应用 // 设置默认的起始日期 const disabledDate = (current) => { console.log(current) return current > …
需要安装customize-cra、babel-plugin-import和react-app-rewired yarn add react-app-rewired customize-cra babel-plugin-import 在package.json文件中的scripts配置项修改为 "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired …
React在内存中创建一个虚拟的DOM，即为React-Dom，渲染器基于更改对浏览器DOM进行更新【只更新发生改变的部分】。 ReactElement ReactDomElement，DOM元素的虚拟表示 ReactComponentElement，对应React组件的一个函数/类。 React.createElement(type,props,children):创建react元素 参数type,表示HTML元素标签，参数的形式是组件或者字符串； 参数props，表示定…
import React, { useEffect, useState } from "react"; // 引入 ECharts 主模块 import echarts from 'echarts/lib/echarts'; // 引入柱状图 import 'echarts/lib/chart/bar'; // 引入提示框和标题组件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import "./inde…
