浮生离梦的博客

一、react 中实现图片分批加载优化加载卡顿问题1. 在 `react` 中，当页面图片数量太多时，一次性请求所有的图片，会很卡顿造成用户的体验不好，可以采用分批加载的方式去请求图片进行优化。2. 对于优化的实现思路，先将所要渲染 `image `的 `url` 置空。在 `loadImages` 函数中，`needToLoadList` 为所有图片的路径，`maxLoadedNum` 为最大加载数量，`curLoadedImgList` 为正在加载的图片列表，`loadIndex` 为当前加载的图片

一、react 中 websocket 结合 pubsub 实现数据通信在 react 中使用 websocket，创建 websocket.js 文件，需要下载 websocket 和 pubsub-js，可以通过 npm i websocket pubsub-js -s 命令进行下载，引入 websocket 中 w3cwebsocket 进行创建连接，引入 pubsub-js 中 PubSub 进行消息通信， 代码如下所示：import { w3cwebsocket as W3CWebSock

一、react 的虚拟 DOM 和 Diff 算法虚拟 DOM和diff算法是 React中非常核心的两个概念, 我们需要对此有一个很全面的认知。这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助。对于虚拟 DOM的内部执行流程，如下所示：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中;当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;把

一、react 的生命周期函数组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中，就能够很好的把控项目的性能细节。react 生命周期阶段划分，如下所示：初始化阶段，在组件初始化阶段会执行，主要有 constructor、componentWillMount、render 和 componentDidMount更新阶段，props 或 state 的改变可能会引起组件的更新，组件重新渲染的过程中

一、React中的组件/模块、 组件化/模块化对于组件，如下所示：一个应用/版块/页面中用于实现某个局部的功能(包括 html, js, css 等)把这些局部功能组装到一起就形成了完整的一个大的功能主要目的在于: 复用代码, 提高项目运行效率对于组件化，如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。对于模块，多个组件形成模块, 或者是一个提供特定功能的 js 文件, 主要特点在于耦合性低, 可移植性高, 执行效率好。对于模块化，如果一个

一、为什么要学习React前言，选择任何一门语言学习都是有时间和金钱的成本的，那么 React 值得学习。学习的必要性，如下所示：使用组件化开发方式，符合现代 Web 开发的趋势; 企业前后端项目分离，唯有 React 是首选；技术成熟，社区完善，配件齐全，适用于大型 Web 项目（生态系统健全）；由 Facebook 专门的团队维护，技术支持可靠；ReactNative - Learn once, write anywhere: Build mobile apps with React

一、React 结合 Antd 实现表格的渲染、新增、修改和删除引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import { Card, Button, Table, Modal, message } from 'antd'import LinkButton from '../../components/linkButton/index'import { formateDate } from '../../utils/

一、React 结合 Antd 实现富文本编辑引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import PropTypes from 'prop-types'import {EditorState, convertToRaw, ContentState} from 'draft-js'import {Editor} from 'react-draft-wysiwyg'import draftToHtml from '

一、 React 结合 Antd 实现图片上传引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import PropTypes from 'prop-types'import { Upload, Icon, Modal, message } from 'antd'import { reqDeleteImg } from '../../api'import { BASE_IMG_URL } from '../../util

一、React 结合 Antd 实现权限列表引入所需相关的组件和文件，如下所示：import React, { Component } from 'react'import { Link, withRouter } from 'react-router-dom'import { Menu, Icon } from 'antd'import logo from '../../assets/images/logo.png'import menuList from '../../config/me

一、React 结合 Antd 实现登录功能引入所需的 Antd 组件，代码如下所示：import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中，创建一个 Login 组件。当对外暴露组件时，需要使用 Form 组件进行包装，包装 Form 组件生成一个新的组件 Form(Login)，同时新组件会向 Form 组件传递一个强大的对象属性 form，这样就可以取到 Form 表单的值，这也是高阶组件和高阶函数的体

一、高阶函数和高阶组件高阶函数，是一类特别的函数，接受函数类型的参数，返回值是函数。对于常见的高阶函数，如下所示：定时器: setTimeout()/setInterval()Promise: Promise(() => {}) then(value => {}, reason => {})数组遍历相关的方法： forEach()/filter()/map()/reduce()/find()/findIndex()函数对象的 bind()Form.create(

一、Context 的认识在 React 中，父子组件通信的机制，父子组件的通信是通过 props 进行数据的传递，如下所示：父组件向子组件传递数据(状态)时，是在调用子组件的时候通过参数传递给子组件，子组件通过 this.props 进行接收子组件如果更改父组件的一些属性，则是通过父组件定义的方法来传递给子组件，子组件调用更改如果父组件想要更改子组件的一些状态时，通过 ref 进行标记，可以获取子组件的所有信息，从而调用子组件的方法和值当层级很多时，使用 props 进行逐层的传递，是不行

一、React 中的 key在 React 中，虚拟 DOM 的 key 的作用，如下所示：简单的说，key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用详细的说，当列表数组中的数据发生变化生成新的虚拟 DOM 后, React 进行新旧虚拟 DOM 的 diff 比较对于虚拟 DOM 的 diff 比较，如下所示：key 没有变，item 数据没变, 直接使用原来的真实 DOM；item 数据变了, 对原来的真实 DOM 进行数据更新key 变了，销毁原

一、Component 和 PureComponent在 React 中，Component 存在的问题，如下所示：父组件重新 render(), 当前组件也会重新执行 render(), 即使没有任何变化当前组件 setState(), 重新执行 render(), 即使 state 没有任何变化对于 React 中解决 Component 存在的问题，如下所示：原因，组件的 componentShouldUpdate() 默认返回 true, 即使数据没有变化 render()

一、setState() 的使用setState() 更新状态的两种写法，如下所示：setState(updater, [callback])，updater 为返回 stateChange 对象的函数: (state, props) => stateChange，接收的 state 和 props 被保证为最新的setState(stateChange, [callback])，stateChange 为对象，callback 是可选的回调函数，在状态更新且界面更新后才执行对于 s

一、性能永远是第一需求，时刻考虑性能问题如何避免应用出现性能问题，如下所示：了解常见的性能问题场景时刻注意代码的潜在性能问题注重可重构的代码了解如何使用工具定位性能问题二、网络性能优化，自动化按需加载如何在 React 中实现按需加载，如下所示：什么是按需加载使用 webpack 的 import API使用 react-loadable 库实现 React 异步加载三、使用 Reselect 避免重复计算Reselect，创建自动缓存的数据，处理流程四、下一代

一、前端项目的理想架构前端项目的理想架构，可维护、可扩展、可测试、易开发、易构建对于易于开发，如下所示：开发工具是否完善生态圈是否繁荣社区是否活跃对于易于扩展，如下所示：增加新功能是否容易新功能是否会显著增加系统复杂度对于易于维护，如下所示：代码是否容易理解文档是否健全对于易于测试，如下所示：功能的分层是否清晰副作用少尽量使用纯函数对于易于构建，如下所示：使用通用技术和架构构建工具的选择二、拆分复杂度，按领域模型组织代码，

一、React Router，路由不止是页面切换，更是代码组织方式为什么需要路由，如下所示：单页应用需要进行页面切换通过 URL 可以定位到页面更有语义的组织资源React Router 的特性，如下所示：声明式路由定义动态路由三种路由实现方式，如下所示：URL 路径hash 路由内存路由基于路由配置进行资源组织，如下所示：实现业务逻辑的松耦合易于扩展，重构和维护路由层面实现 Lazy LoadReact Router API，如下所示：

一、Redux 前端为何需要状态管理库Redux，JS 状态管理框架，Redux 让组件通信更加容易，把 store 放在组件外，所有组件和 store 进行中转Redux 特性，如下所示：单向数据流可预测性，state + action = new state纯函数更新 Store二、Redux 深入理解 Store、Action 和 Reducerstore 可以通过 createStore，传入 reducer 进行创建，包含三个方法，如下所示：getState(

一、理解 Virtual DOM 及 key 属性的作用JSX 的运行基础，Virtual DOM虚拟 DOM 的工作，如下所示：广度优先分层比较根节点开始比较属性变化及顺序节点类型发生变化节点跨层移动虚拟 DOM 的两个假设，如下所示：组件的 DOM 结构是相对稳定的类型相同的兄弟节点可以被唯一标识二、组件设计模式，高阶组件和函数作为子组件组件复用的另外两种形式，高阶组件和函数作为子组件高阶组件 HOC，高阶组件接受组件作为参数，返回新的组件

一、React 出现的历史背景及特性介绍传统 Web UI 开发问题出现的根源，如下所示：传统 UI 操作关注太多细节应用程序状态分散在各处，难以追踪 和维护传统 DOM API 关注太多细节，React 始终整体刷新页面，无需关心细节React 很简单，如下所示：1个新概念4个必须 API单向数据流完整的错误提示React 解决了 UI 细节问题，数据模型使用 Flux 架构，单向数据流二、以组件方式考虑 UI 的构建以组件方式考虑 UI，将 UI

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，TypeError: this.getOptions is not a function，如下所示：二. 问题的分析及解决：问题的分析：这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理问题的解决：通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过 npm i

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. 如下所示：二. 问题的分析及解决：问题的分析：这个错误描

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，Error: Actions must be plain objects. Use custom middleware for async actions. 如下图所示：二. 问题的分析及解决：问题的分析：这个实际上是异步操作缺少使用自定义中间件，需要使用中间件 redux-thunk问题的解决：通过 npm i redux-thunk --save 命令下载 redux-thunk，然后进行配置使用，如下所示：im

一、方案一在使用 create-react-app 脚手架创建 react 项目的时候，在开发时进行接口访问的时候，会出现跨域问题。解决方法是在 package.json 文件中增加如下配置，如下所示："proxy": "http://localhost:5000" // 配置你要请求的服务器地址这一种方法只针对于低版本的，create-react-app 的版本低于 2.0 的时候可以在 package.json 增加 proxy 配置，proxy 可以是 object 类型。二、方案二

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，TypeError: antd_es_form__WEBPACK_IMPORTED_MODULE_3__.default.create(...) is not a function， 如下所示：二、问题的分析及解决：问题的分析： 这个实际上是 Antd 的版本导致的兼容性问题，需要更换 Antd 的版本。问题的解决： 把 Antd 进行降级，首先将 package.json 文件下的 Antd 版本号修改为

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. 如下所示：Module build failed (from ./node_modules/less-loader/dist/cjs.js):ValidationErro

一、react 结合 socket.io 实现简单通信功能分别在 react 项目以及后台项目中使用 socket.io，在这里，后台选择为 node，通过 npm install --save socket.io命令进行下载 socket.io 。在 node 项目中， 创建 socketIO 文件夹，在里面创建 socket.js 文件，代码如下所示：module.exports = function (server) { const io = require('socket.

一、react项目安装并使用Redux DevTools Extension在 react 项目中，通过 npm install --save redux-devtools-extension 命令进行下载 redux-devtools-extension 工具, GitHub 地址为 https://github.com/zalmoxisus/redux-devtools-extension。在安装完成以后，就可以在 store 的 index.js 文件中进行使用， redux 与 redu

一、问题的出现：在进行 react 项目开发的时候，出现了这个错误，The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins二、问题的分析及解决：问题的分析：react-scripts升级到2.1.2 以后破坏了

一、redux 的基础概念redux是专门做状态管理的独立第3方库, 不是react插件。redux 对应用中状态进行集中式的管理(写/读)，也可以与react-redux、redux-thunk等插件配合使用。redux核心概念action:默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生它的值也可以是函数(异步action), 需要引入redux-thunk才可以reducer根据老的s

一、react 生命周期函数在初始 Initialization 阶段，会触发 constructor() 函数，会进行设置 state和 props。在挂载Mounting 阶段，先会触发 componentWillMount() 函数，在组件即将被挂载到页面的时候自动执行，挂载前，只会在第一次挂载执行。之后，就会触发render()函数，页面被初次渲染，挂载时。最后，就会触发 co...

一、react 中的虚拟 DOM第一种方案：第一步，state 数据第二步，JSX 模版第三步，数据 + 模版的结合，生成真实的 DOM，来显示第四步，state 发生改变第五步，数据 + 模版的结合，生成真实的 DOM，替换原始的 DOM缺陷： 第一次生成了一个完整的 DOM 片段，第二次生成了一个完整的 DOM 片段，用第二次的DOM 替换第一次的 DOM，非常耗性能...

一、React的生命周期钩子函数旧版挂载时，初始化阶段1）constructor() : 如果不初始化state或不进行方法绑定，则不需要为react组件实现构造函数2）componentWillMount(): 以前在这里进行请求数据，现在即将被废弃3）render() : 初次渲染组件的内容4）componentDidMount(): 组件挂载完毕以后，可以进行请求数...