react
西米幺幺
这个作者很懒,什么都没留下…
展开
-
redux相关源码
3、bindActionCreators实现。1、createStore 实现。4、Provider实现。2、connct实现。原创 2024-05-30 17:55:29 · 187 阅读 · 0 评论 -
typescript初级
tsconfig.json(ts配置)“strictNullChecks”: truets有undefined和null两个空类型的设计 ,使用上不方便,开启此项进行严格校验空值类型,让代码更安全。“moduleResolution”: “node/classic”node: 引用模块时,会从node_modules文件中检查模块是否存在classic: 引用模块时先从项目中查找模块是否存在,若不存在再查找node_modules文件。“jsx”: “preserve | react原创 2021-07-06 21:57:59 · 422 阅读 · 4 评论 -
基于dumi+father-build 的组件库开发和文档模板
组件开发脚手架// 安装脚手架npx @umijs/create-dumi-lib// 下载依赖npm i// 启动npm start文档构建// 构建文档$ npm run docs:build// 查看构建后的文档$ cd docs-dist// 全局安装http-server$ npm i -g http-server$ http-server -p 3030// 访问127.0.0.1:3030,进入dist/index.html即可源码构建// 构建本地原创 2021-06-23 16:06:37 · 1269 阅读 · 0 评论 -
fetch封装
import CONSTANT from './CONSTANT'import { Toast } from 'antd-mobile'import {getAppLogin, isNetworkConnected, showNoNetPage} from '../utils/getAppApi'import { history } from '../utils/history'impor...原创 2019-12-09 22:47:58 · 269 阅读 · 0 评论 -
react + redux Router + node实践总结(Socket)
Socket.io是什么基于事件的实时双向通信库基于websocket协议前后端通过事件进行双向通信配合express,快速开发实时应用Socket.io和ajax区别基于不同的网络协议Ajax基于http协议,单向,实时获取数据只能轮询socket.io基于websocket双向通信协议,后端可以主动推送数据现代浏览器均支持websocket协议 ...翻译 2018-07-11 22:08:16 · 275 阅读 · 0 评论 -
react + redux Router + node实践总结(react性能优化)
React性能优化 在浏览器的地址栏中添加react_perf后缀,可进行react的性能测试React组件性能优化 单组件性能优化:尽可能减少数据的复杂性, 属性传递优化 尽可能不反复定义数据 定义事件时,使用在constructor中进行bind(this),尽量不要在render时进行bind或者使用箭头函数,因为每一次render时,都会执行下bind,或者重新定义...翻译 2018-07-19 12:17:39 · 489 阅读 · 0 评论 -
react + redux Router + node实践总结(react模拟redux)
// 上面find的写法性能会更高些,因为$是由右至左查找元素$('#test').find('img')$('#test img')React原理虚拟DOM生命周期setState 组件更新的三种方式: setState: setState更新后依次执行(shouldComponentUpdate-> componentWillUpdate -> render(...翻译 2018-07-13 12:00:07 · 277 阅读 · 0 评论 -
react兼容IE11
cop-web-ui 兼容IE11方案1.增加垫片polyfills.js (具体可参考npm包react-app-polyfill)2.webpack打包入口修改appIndexJsProd: { api: resolveApp (‘src/apiEntry.js’),main: [require.resolve(‘./polyfills’), resolveApp (‘src/inde...原创 2019-03-19 09:50:24 · 1644 阅读 · 0 评论 -
react虚拟dom解读
react虚拟dom解读什么是虚拟dom?一、DOM是什么?二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowch...原创 2019-04-16 16:09:51 · 269 阅读 · 0 评论 -
react + redux Router + node实践总结(高阶组件)
实战翻译 2018-07-11 10:39:36 · 181 阅读 · 0 评论 -
react + redux Router + node实践总结(前后端联调)
前后端联调:在react中使用node使用axios发送异步请求 npm install axios –save端口不一致(跨域,ajax不支持),如何发送,使用proxy配置转发 在package.json数据中添加”proxy”: “转发到的地址”axios拦截器,统一loading处理redux里使用异步数据,渲染页面// config.js, 在此文件中配置axios...翻译 2018-06-25 23:09:50 · 603 阅读 · 0 评论 -
深度剖析:如何实现一个 Virtual DOM 算法
转载自( https://github.com/livoras/blog/issues/13 ) 目录: 1 前言2 对前端应用状态管理思考3 Virtual DOM 算法4 算法实现4.1 步骤一:用JS对象模拟DOM树4.2 步骤二:比较两棵虚拟DOM树的差异4.3 步骤三:把差异应用到真正的DOM树上5 结语6 References1 前言 本文会在...转载 2018-04-01 17:11:42 · 168 阅读 · 0 评论 -
react高级(一)
JSX你还可以使用 JSX 中的点表示法来引用 React 组件。你可以方便地从一个模块中导出许多 React 组件。例如,有一个名为 MyComponents.DatePicker 的组件,你可以直接在 JSX 中使用它:import React from 'react';const MyComponents = { DatePicker: function DatePick...翻译 2018-06-11 14:52:33 · 276 阅读 · 0 评论 -
react学习(一)
react安装npm install -g create-react-appcreate-react-app my-appcd my-app// 启动npm start// 构建npm run build1. 在使用 JavaScript classes 时, 必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。2. 当你遇到需要同时获取多...翻译 2018-06-07 11:25:26 · 212 阅读 · 0 评论 -
react学习(二)
表单, , 和 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制。例如:class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; this.handleChange = this...翻译 2018-06-07 14:31:49 · 121 阅读 · 0 评论 -
react + redux Router + node实践总结(ES6+基础知识)
react开发环境1. 使用create-react-app脚手架创建react项目// 安装create-react-appnpm install -g create-react-app// 创建项目create-react-app react_jobs// 安装第三方库reduxnpm install redux --save// 弹出配置文件,可以自定义配置webpack...翻译 2018-06-14 21:51:00 · 282 阅读 · 0 评论 -
react + redux Router + node实践总结(express+mongodb)
Express+mongodb开发web后台接口非关系型数据库mongodb(类似于mySql, 存储的是json数据) 使用nodeJS的mongoose模块连接mongodb进行操作mongodb数据Express基于nodejs,快速、开放、极简的web开发框架 Express是node开发web接口的一个框架,用于监听接口、渲染页面,类似的还有PHP CI框架 1. ...翻译 2018-06-24 21:27:33 · 403 阅读 · 0 评论 -
react生命周期
react生命周期翻译 2018-06-24 23:23:43 · 124 阅读 · 0 评论 -
react + redux Router + node实践总结(redux+react-router)
React是什么帮你构建UI的库,Facebook出品,专注View层使用React实现组件化React进阶使用翻译 2018-06-24 23:48:04 · 296 阅读 · 0 评论 -
react优势
1.速度快react采用虚拟DOM的机制,在setState时更新DOM,而且是先更新虚拟DOM,再与实际DOM进行比较2. flux架构单向闭环更新流模式整个流程是:用户与 View 层交互,触发 ActionAction 使用 Dispatcher 进行分发Dispatcher 触发 Store 回调进行更新Store 更新触发 View 层事件View层翻译 2017-10-28 10:45:59 · 1033 阅读 · 0 评论