rocktanga的博客

React 或者说框架的意义是为了提高代码的可维护性，而不是为了提高性能的，现在所做的提升性能的操作，只是在可维护性的基础上对性能的优化react中的vdom实际上就是通过 property来进行一个attributes的一个判断，来看它是否有变化一、导学react非常纯粹，核心 api 就是 setState，其它所有的内容都围绕组件化来设计，一切基于组件，没有directive 双向绑定和其它API，如果要改变一个ui，就只能通过 setState来进行修改思想超前：react在1.

^2.4.1。简单说这东西就是用来定义model，然后把model中的数据和页面进行交互的。model的功能主要有两个，第一个是维护一个全局的state，第二个是发送异步请求。model的state里面存放的数据应该是所有组件全局共享的数据，组件局部的数据还是要放在组件自己的state里面。要使用dispatch，connect是必要的，使用了connect才可以使用dispath，但是connect的return可以不返回值。如果需要发送异步请求之后，改变自己组件里面局部的state值.

这里主要是umi和webpack系列的配置。这些都是在config/config.js里面配置的一、基本配置(1)plugins: 配置插件列表类型Array,默认值[]介绍：数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。如果插件有参数，则通过数组的形式进行配置，第一项是路径，第二项是参数export default { plugins: [ // 有参数 [ 'umi-plugin-r.

一、Mock 数据umi 里约定 mock 文件夹下的文件或者 page(s) 文件夹下的 _mock 文件即 mock 文件。这个mock数据，默认导出的结果，前面为请求方式和请求的url，后面的为返回前端的结果。结果可以是函数，也可以是对象关闭mock：直接返回mock：false，就可以关闭mock了。如果是用的ant design pro那么直接运行命令的时候就可以关闭mock注：返回值为函数的时候就很灵活，函数里面就相当于在写java代码一样(只不过还是js语法)，可以设置

一、路由路由有三种方式，分别是，约定式路由(即文件路由，根据文件名自动配置)、编译时配置式路由(config/config.js中配置)和运行时配置式路由(src/app.js中配置)1、约定式路由注意：若 .umirc.(ts|js) 或 config/config.(ts|js) 文件中对 router 进行了配置，约定式路由将失效、新添的页面不会自动被 umi 编译，umi 将使用编译时配置式路由约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出

简单说umi就是提供一个脚手架和路由，相当于vue-router的加强版。v^2.8.7一、介绍umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的。内置 react、react-router 等(所以用umi是不用再引入这两个东西了)，umi-plugin-react插件也内置了react-dom，与 dva 数据流的深入融合umi等于roadhog(基于 webpack 的封装工具，目的是简化 webpack 的配置) + 路由 + HTML 生成.

1、react踩坑(1)ant table组件的对齐。刚开始以为是自己配置的 问题。结果是改变了右边的进度条的样式，然后出的问题。(2)dva的model使用。项目重构的时候，刚开始把所有数据都放在model里面，觉得所有东西都要用connect来弄在props上，结果发现不行。后来只把全局的数据放在model里面，把局部的数据放在自己组件里面，改变自己组件的数据，就在dispatch里面传一个callback(),在callback()里面用this.setState()来改变。(3)高德地图修

本例为各种功能的具体实现(1)实现table里面的那个，点击左边的加号，展开子菜单。遍历拼接dataSource。这个是所有数据直接返回这里面用了两个递归。具体思路就是：有一个存放所有数据的数组dataArr；数组里面的数据如果插入到了dataSource里面，就把这一条从dataArr里面删除，直到dataArr为空，就遍历完了this.renderDataSource(dataArr); // dataArr为后台返回的数据 renderDataSource(dataAr.

一、图表v4 中删除了组件库，如果你还要使用可以跳转到低版本查看二、业务图标如果在Ant Design 官网中没有找到合适的图标，可以到 iconfont.cn 上采集并生成自己的业务图标库三、国际化(i18n, Internationalization)(1)引入国际化插件并开启：这个实际上就是给适配各种语言，可以做网站的语言切换引入插件：pro 通过 umi 插件 umi-plugin-locale 来实现国际的功能，并且默认开启。 umi-plugin-locale 约定 在

一、开发1、区块(block)区块是研发资产的一种，它是一系列快速搭建页面的代码片段，它可以帮助你快速的在项目中初始化好一个页面，帮助你更快速的开发代码。当前的区块都是页面级别的区块，你可以理解为它是一些项目中经常会用到的典型页面的模板，使用区块其实相当于从已有的项目中复制一些页面的代码到你当前的项目中以前开发一个页面：创建 JS -> 创建 CSS -> 创建 Model -> 创建 service -> 写页面组件。现在开发一个页面：下载区块 -> 基于区块初

版本v4一、入门Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观。基于上述目标和提供了以下的典型模板，并据此构建了一套基于 React 的中后台管理控制台的脚手架，它可以帮助你快速搭建企业级中后台产品原型技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antdnpm相关命令升级依赖包：npm update: 这个是npm自带的，只能按照 package.js 中标注的版本号进行更新对应的依.

这东西好像和vue里面的路由确实不一样;react-router非常复杂整体，比vue-router强大很多React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步React Router 知道如何为我们搭建嵌套的 UI，因此我们不用手动找出需要渲染哪些 组件，即,向页面返回了一个路由组件(即默认导出路由，然后放在ReactDOM里面)，当路由组件检测到地址栏与Route的path匹配时，就会自动渲染对应的.

简单说，hook就是一些函数，不能在Class组件中使用，只能在函数组件中使用。不使用class组件，而全部使用函数组件是一个趋势一、Hook 简介Hook 是 React 16.8 的新增特性。要启用 Hook，所有 React 相关的 package 都必须升级到 16.8.0 或更高版本。如果你忘记更新诸如 React DOM 之类的 package，Hook 将无法运行。它可以在使用函数组件的时候使用this(state就在this里面)和生命周期等，其它的类组件才用的特性。如.

一、代码分割为什么要使用代码分割：在用webpack进行打包的时候，每个模块被导入合并在一个文件，这个文件叫做 bundle，这些 bundle 在一张页面上包括了整个APP。然而，当 APP 增长的时候，这些 bundle 尺寸开始变得越来越大，因此影响了页面加载时间使用ant design pro的时候，打包出来的不是一个bundle文件，而是把每个模块打包成了一个async.js。如果用了代码拆分中的import(),就会把对应的js模块单独进行打包，打包出来的js模块名字实例如56.ffe

版本v16.13.0单独看react不是mvvm也不是mvc，只是一个view层(但是引入了redux等，并且把控制视图的逻辑写在组件内部，就是mvvm了)。 vue也不是mvvm和mvc，vue只是view层(但是如果引入vuex等，就是mvvm了)。mvvm和mvc都是一个架构模式。vm指的是数据驱动视图(也可以理解为组件，一个拥有状态也需要管理状态的视图)，比如vue和react都是单向数据流(vue用v-modal实现双向绑定，react即使是非受控组件也不是双向绑定)一、React简.

一、React 顶层 API顶层API就是顶层的react，import React from 'react'这种react中的函数组件性能优化只有两个方向(除key之外)：第一个为减少重新 render 的次数，因为父组件重新渲染的时候经常会让子组件也重新渲染。第二个为减少重复计算，因为函数组件每次渲染，就会重新开始创建组件里面的所有值，也就会再一次的进行所有的计算。(1)isValidElement()：验证对象是否为 React 元素，返回值为 true 或 false。React.

版本v16.12.0本教程为用react从头开始实现一个小游戏。和另外的react基础知识是互补的注：关于git命令行运行和直接cmd运行，一般情况下都用cmd命令行来运行，git它只会下载node相关的一、环境准备1、初始化项目需要在你的机器上安装Node >= 8.10 和 npm >= 5.6create-react-app脚手架创建项目: 这个create-react-app脚手架 就和vue-cli差不多的创建项目报错npm ERR! Unexpec.

六、其它组件1、Divider分割线区隔内容的分割线。何时使用：<1>对不同章节的文本段落进行分割。<2>对行内文字/链接进行分割，例如表格的操作列。(1)<Divider>组件对应属性: 组件里面可以加上文字，就为在分割线上面的文字<1>className: 表示分割线样式类.可选值：无；默认值： -；类型：string<2>dashed: 表示是否虚线.可选值：无；默认值： false；类型：boolean&lt

五、反馈组件1、Alert警告提示警告提示，展现需要关注的信息。何时使用：<1>当某个页面需要向用户显示警告的信息时。。<2>非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。2、Drawer抽屉屏幕边缘滑出的浮层面板。点击之后，从屏幕边缘滑出一个块，然后可以在这个块里面写很多的内容进去。这个和modal是差不多的，只不过是样式不一样而已。由于这个Drawer组件没有footer属性，所以如果想要设置Drawer底部的按钮需要自己去设置(一般就用po

12、Tree树形控件多层次的结构列表。何时使用：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。(0)<Tree>组件对应的事件<1>onCheck事件: 表示选中复选框，或者取消复选框的选中时触发.可选值：无；默认值： -；类型： function(checkedKeys, info:{checked: boolean, checkedNodes, node

四、数据展示1、Avatar头像用来代表用户或事物，支持图片、图标或字符展示何时使用：需要用头像的时候(0)<Avatar>组件对应的事件<1>onError事件: 表示图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为.可选值：无；默认值： -；类型： () => boolean。(1)<Avatar>组件对应属性: 当然Avatar组件里面依然是可以放文字的，放的文字会展示在头像里面。如&lt

三、数据录入1、Select选择器下拉选择器。何时使用：<1>弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。<2>当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。(0)<Select>组件对应的事件<1>onBlur事件: 表示失去焦点时回调.可选值：无；默认值： -；类型： function。<2>onChange事件: 表示选中 option，或

一、数据录入1、AutoComplete自动完成输入框自动完成功能，即输入框输入一些字符，然后下面显示出这个字符相关的，匹配的选项。何时使用：需要自动完成时。还么看2、Checkbox多选框多选框。何时使用：<1>在一组可选项中进行多项选择时；<2>单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。<3>table里面直接就可以附

一、通用组件1、Button按钮按钮用于开始一个即时操作。何时使用：标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑(0)<Button>组件对应的事件<1>onClick事件：表示点击按钮时的回调.可选值：无；默认值： false；类型：(event) => void。(1)<Button>组件对应属性: 这个即单独的一个按钮组件。支持原生 button 的其他所有属性<1>disabl

版本：v3.26.3react系列有一大堆的组件，可以在ant design官网的，社区精选组件里面看到一、简介antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。✅ Ant Design：用空格分隔的首字母大写单词，指代设计语言。✅ antd：全小写，指代 React UI 组件库。✅ ant.design：特指 ant.design 网站网址。安装：npm install antd --save使用组.