- 博客(20)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 webpack 服务端渲染配置
react的 服务端渲染有助于 seo优化 和 首屏速度快的优点 。 需要新建一个服务端的js，以供打包输出 react 字符串 到node端；这里新建 server-entry.jsimport React from "react";import App from "./App.jsx";// 这边输出了一个react 标签所以需要引入reactexport def...
2018-07-31 23:18:48
1584
原创 webpack基础应用
项目中如果用到jsx 那么需要安装 babel-loader （插件） 和babel-core（核心）； cnpm i -d babel-loader cnpm i -d babel-core并且在最外层配置. babelrc 文件（这是babel的配置文件）；{ "presets":[ ["es2015",{"loose":true}], "reac...
2018-07-31 15:33:17
89
原创 webpack的基本配置
首先 安装react和webpack 然后建俩文件夹 build 和 client build文件夹用来装一些webpack的配置文件；client文件夹 用来装一些 前端的文件 ； 在build中建一个webpack.config.js的文件；// npm run build在client 文件夹下建俩文件 app.js 和App.jsx ; write ...
2018-07-30 17:13:37
181
原创 多页应用和单页应用的区别
多页应用特征：1: 页面内容由服务端模版生成；2：每次页面跳转都要经过服务端；3: js 更多做的是动态效果；类库：jquery mootools yui 单页面应用的特征：1：所有内容在前端生成2:js承担更多的业务逻辑，后端只负责api3:页面路由不经过后端 类库 ： angular vue react backbone...
2018-07-26 16:12:32
1222
原创 react16的新特性
react 16 的好处：1：新的核心算法 Fiberreact 新的算法，更加友好；2：render可以return数组 ，字符串可以return数组 不需要包div； 但是必须有对应的key；3:错误处理机制增加了抛异常的生命周期函数 componentDidCatch(err,info){ this.setState({isError:1})...
2018-07-19 00:20:39
1158
原创 react 服务端的改造
服务端实现 首屏渲染；首先服务端要先支持es6；cnpm i --save babel-cli安装 babel包 先 ；"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.
2018-07-18 22:20:28
393
原创 react 项目打包编译
肯定是npm run build了然后会得到一个 build文件夹asset-manifest.json 里面是打包好的各个文件名；{ "main.css": "static/css/main.de8768f6.css", "main.css.map": "static/css/main.de8768f6.css.map", "main.js": "static/js/.
2018-07-17 22:45:09
6471
原创 react中动画的实现
在react中动画的实现 有三种：1，原生js和css的实现；2，React官方的ReactCssTransitionGroup 过渡动画；3，ant的Motion;这里说下ant的Motion安装cnpm i --save rc-queue-anim然后在 需要加入的页面 引入import QueueAnim from "rc-queue-anim"; ...
2018-07-17 16:13:23
2060
原创 async +await 优化异步函数
异步函数发展的三个阶段：1， callbacksetTimeout( ()=>{},1000); 容易造成callback hell； 2，promise 还是需要不停的。then（）.then（）；3，async +await 就是generator 优化 promise的产物； async和await 要配合使用 ，这是es7 的内容具体使用：原来代...
2018-07-17 14:36:44
299
原创 eslint的配置
"eslintConfig": { "extends": "react-app", "rules":{ "eqeqeq":["off"], "jsx-a11y/accessible-emoji":["off"], "no-useless-constructor":["off"]
2018-07-17 12:29:48
789
原创 react 关于不推荐
react的 优势是虚拟dom，原理是根据同级dom做比较， 迅速而高效；react还有个缺点：对于插入元素 就没有那么高效了，他会不认识原来的元素。这样就会导致，react在插入一整个dom的话导致重新渲染，所以应该尽量避免插入操作。 还有一点就是关于map出来数组的key，对于有key的dom比较，react就是根据key来作为唯一标识来达到高效的比较的；所以这个ke...
2018-07-16 17:45:00
223
原创 react 性能调优
几个点：1，尽量减少组件之间的值的传递；2，减少渲染的次数；*组件内部的事件的绑定性能调优：<button onClick={this.handleClick.bind(this)}>one</button>一般可以这样写 这样写的话 那么 每次render都会重新bind ，效率不高。<button onClick={()=>this.handleClick(...
2018-07-15 16:51:22
581
原创 redux实现多个中间件的同时使用；
// mini-redux ,enhancer 增强器//中间件的实现：1，扩展createStore；2，applymiddleware的实现并且输出出去；export function createStore(reducer,enhancer) { //如果有中间件那么createStor包一层中间件；再去执行createStore（reducer）； if(enhanc...
2018-07-13 22:48:09
1248
原创 redux中间件的实现
所谓的中间件就是 在我们 最终到达到的方式最后的外层包裹，一层又一层的，就是中间件；且使用中间件的使用过程中发现中间件不符合规则，将会重复 给核心代码嵌套中间件这一过程；上代码：// mini-redux ,enhancer 增强器//中间件的实现：1，扩展createStore；2，applymiddleware的实现并且输出出去；export function createStore(...
2018-07-12 17:17:07
376
原创 react-redux的connect方法通过高阶组件去实现
//connect功能// 1，接受一个组件，把数据放到组件内部，返回一个组件// 2，数据发生变化的时候，通知到组件 //高阶组件实现connect// 接受两个参数，防止不传报错需要预设默认值,// 第一个参数是函数，来确定到底返回什么属性，默认原样返回（state=>state），// 第二个是actionCreator的集合，是一个对象， 默认是个空对象//两次函...
2018-07-11 22:59:23
1751
原创 react的context，以及react-redux中的provider的实现
在react中 组件之间的通信受限制于props，也就是说在react中如果嵌套很多层，那么就要传递很多层。 比如这样:class Two extends React.Component{ render(){ return (<div> <h1>组件是2</h1> ...
2018-07-09 20:49:27
1701
原创 迷你redux
// mini-reduxexport function createStore(reducer) { //初始化state 和listeners函数 集合； let currentState={}; let currrentListeners=[]; // 调用返回state function getState() { return curr...
2018-07-08 20:06:57
191
原创 react进阶
1，react的 虚拟domreact在修改前后的虚拟dom树的比较运算，都是同级之间进行比较，这样的算法 就很高效，是O(1)常数的，还有就是递归的算法，就比较的低效，是O(n2) ；ReactElement.createElement = function (type, config, children) { var propName; // 初始化参数 var props = ...
2018-07-08 18:04:41
409
原创 使用 emoji表情 实现自己的 表情库
emoji表情绘文字（日语：絵文字/えもじ emoji）是日本在无线通信中所使用的视觉情感符号，绘指图画，文字指的则是字符，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。在NTTDoCoMo的i-mode系统电话系统中，绘文字的尺寸是12x12 像素，在传送时，一个图形有2个字节。Unicode编码为E63E到E757，而在Shift-JIS编码则是从F89F到F9FC。基本的绘文字共有176...
2018-07-05 17:28:10
857
原创 socket.io 工具
socket.io和ajax 区别socket 是基于 websocket 协议的，真正意义上的双向平等对话；WebSocket 协议本质上是一个基于 TCP 的协议。前后端通过事件进行通信，前后端 都可以发起请求；ajax 是基于 http 协议的，服务端被动接受浏览器端的请求。实时获取数据 只能轮询。安装socket.io 服务端cnpm i socket.io --save安装sock...
2018-07-01 18:55:09
646
nodeJs高级编程
2018-08-26
javascript语言精粹 修订版
2018-08-23
react语言精粹
2018-08-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人