2018年12月_after you

原创微信小程序保存图片相关内容以及保存图片到手机保存的图片是黑屏的原因是由于使用了https的图片引用需要配置download合法域名

微信小程序保存图片相关内容以及保存图片到手机保存的图片是黑屏的原因是由于使用了https的图片引用需要配置download合法域名如果是微信头像信息来自微信客服端则不需要配置如果来自自己网站域名下的头像也是需要配置download合法域名的...

2018-12-24 12:32:36 2256

原创 object.defineproperty用法（get,set）

起始Get：指读取属性时调用的函数。Set：指写入属性时调用的函数。困惑因为一开始不是很懂这个方法，所以一直纠结于get方法：我设置了新的值，我怎么获取这个新的值？let data1 = { name:'小明', age:18}Object.defineProperty(data1,'age',{ set:function(newAge){ ...

2018-12-20 10:44:01 683

原创 react虚拟dom 庞大后需要优化

在 React 中，每次 setState ， Virtual DOM 会计算出前后两次虚拟 DOM 对象的区别，再去修改真实需要修改的 DOM。由于 js 计算速度很快，而操作真实 DOM 相对比较慢，Virtual DOM 避免了没必要的真实 DOM 操作，所以 React 性能很好。但随着应用复杂度的提升， DOM 树越来越复杂，大量的对比操作也会影响性能。比如一个 Table 组件，修改其...

2018-12-19 09:27:45 224

原创 pureComponent的缺陷

PureComponent组件官方提供了一个优化渲染的PureComponent 组件，PureComponent优化的原理是重写了shouldComponentUpdate，如果说老的状态对象和新的状态对像不是一个对象的话才会刷新页面，我们可以从react结构出来，import {PureComponent} from 'react'但是呢，别高薪的太早，这个是有缺陷的，你会发现这货只...

2018-12-19 09:22:46 976 1

原创 Immutable.js 以及在 react+redux 项目中的实践 fromjs做的是引用地址的比较深入比较两个对象深拷贝对比每次setState 都会重新render一次浪费性能

前言本文主要介绍facebook推出的一个类库immutable.js，以及如何将immutable.js集成到我们团队现有的react+redux架构的移动端项目中。本文较长（5000字左右），建议阅读时间： 20 min通过阅读本文，你可以学习到：什么是immutable.js,它的出现能解决什么问题 immutable.js的特性以及使用api 在一个redux+re...

2018-12-19 09:16:44 447

原创 react精华之函数化hooks

这一节我们来介绍 Hooks，React v16.7.0-alpha 中第一次引入了 Hooks 的概念，因为这是一个 alpha 版本，不算正式发布，所以，将来正式发布时 API 可能会有变化。Hooks 的目的，简而言之就是让开发者不需要再用 class 来实现组件。还记得之前我们介绍的经典 Counter 组件吗？不考虑用 Redux 或者 Mobx 来管理状态的话，Counter ...

2018-12-16 12:27:56 446

原创 react精华之Suspense 带来的异步操作革命适用于纯函数可以不依赖生命周期函数

上一节我们介绍了 Fiber 架构下的异步渲染机制，我们知道生命周期函数的修改是势在必行，那么，接下来呢？接下来 React 会有什么“大事”呢？这个答案估计连 React 的核心开发者也在讨论中，不过从各种渠道信息看来，至少有两件“大事”在会在看得见的未来发生，那就是：Suspense Hooks当然 React 增加的功能肯定远不止这点，将这两件“大事”在这里提出来，是因为它们对我...

2018-12-16 12:22:29 3104

原创 react精华之异步渲染 v0.14.8 跳到了 v15.0.0 同步卡顿问题为什么不在 componentWillMount 里去做AJAX？componentWillMount 可是比

render之后执行componentdidMount不要再componentWillMount 中做 AJAX 同步渲染的问题长期以来，React 一直用的是同步渲染，这样对 React 实现非常直观方便，但是会带来性能问题。假设有一个超大的 React 组件树结构，有 1000 个组件，每个组件平均使用 1 毫秒，那么，要做一次完整的渲染就要花费 1000 毫秒也就是 1 秒钟...

2018-12-16 12:10:21 1150

原创 react精华之next.js getInitialProps自动切换服务端渲染和浏览器渲染而不需要同时使用渲染

我们已经知道了服务器端渲染的原理，你只需要搭建一个 Express 服务器，在服务器端手工打造『脱水』，在浏览器端做『注水』，完成某个页面的服务器端渲染并不难。不过，服务器端渲染的问题并不这么简单，一个最直接的问题，就是怎么处理多个页面的『单页应用』（Single-Page-Application）？所以单页应用，就是虽然用户感觉有多个页面，但是实现上只有一个页面，用户感觉到页面可以来回切...

2018-12-16 12:00:02 13427 7

原创 react精华之服务端渲染 ReactDOMServer 16版本后renderToString 转化成renderToNodeStream的好处 React v16 之后用 React.hydr

React v16 之后用 React.hydrate 替换 React.render，这个 hydrate 就是“注水”为什么要服务器端渲染最近几年浏览器端框架很繁荣，以至于很多新入行的开发者只知道浏览器端渲染框架，都不知道存在服务器端渲染这回事，其实，网站应用最初全都是服务器端渲染，由服务器端用 PHP、Java 或者 Python 等其他语言产生 HTML 来给浏览器端解析。相比...

2018-12-16 11:50:36 7701

原创 react 精华之react-router .HashRouter 还是 BrowserRouter . 动态路由是根据变量决定这个路由是否需要进行

随着 AJAX 技术的成熟，现在单页应用（Single Page Applicatio）已经是前端网页界的标配，名为“单页”，其实在设计概念上依然是多页的界面，只不过从技术层面上页之间的切换是没有整体网页刷新的，只需要做局部更新。要实现“单页应用”，一个最要紧的问题就是做好“路由”（Routing)，也就是处理好下面两件事：把 URL 映射到对应的页面来处理；页面之间切换做到只需局部更...

2018-12-16 11:29:51 16178 4

原创 react 精华之 mobx 和redux 深入对比 react-redux 和 mobx-react 两者的实现都依赖于 React 的 Context 功能。

Mobx 和 Redux 的比较Mobx 和 Redux 的目标都是管理好应用状态，但是最根本的区别在于对数据的处理方式不同。Redux 认为，数据的一致性很重要，为了保持数据的一致性，要求Store 中的数据尽量范式化，也就是减少一切不必要的冗余，为了限制对数据的修改，要求 Store 中数据是不可改的（Immutable），只能通过 action 触发 reducer 来更新 Stor...

2018-12-16 11:06:58 2677

原创 react 精华之mobx 意味着只要我们state的状态在store中被修改了 this.count 这个参数就会被监听到就可以直接渲染页面了

理解 Mobx虽然 Mobx 和 Redux 有很大不同，但是至少还有一个共同点——这两个工具都和 React 没有任何直接关系，只不过凑巧 React 社区大量使用它们罢了。从技术上说，Mobx 和 Redux 都是中立的状态管理工具，他们能够应用于 React，也可以用于其他需要状态管理的场景。还是用 create-react-app 产生的应用来演示 Mobx 吧，要使用 Mobx，...

2018-12-16 10:59:39 3253

原创 react精华之 redux 和mobx

14.适合 Redux 的场景当一个 React 应用采用 Redux 之后，开发者往往就会陷入这样的纠结：对于某个状态，到底是放在 Redux 的 Store 中呢，还是放在 React 组件自身的状态中呢？如果所有状态全都放在 Redux 的 Store 上，那就要对应增加 reducer 和 action 的代码，虽然拥有了可以跟踪的好处，但是对一些很细小的状态也要增加 redu...

2018-12-15 21:40:13 416

原创 react 精华之组件状态state setState

13一个经常被问到的问题，就是为什么不把组件的数据直接存放在组件类的成员变量中？比如像下面这样：class Foo extends React.Component { foo = 'foo' render() { return ( <React.Fragment>{this.foo}</React.Fragment> );...

2018-12-15 21:05:27 1181

原创 react 精华之单元测试

11单元测试用 Jest；用 Enzyme；保持 100% 的代码覆盖率。Mocha 之类老牌单元测试框架，把所有的单元测试都放在一个环境中执行，这就使所有单元测试访问的是同样一个全局变量空间，所以只要测试代码没写好，就会互相影响。而且，为了保证执行正常，所有的单元测试必须一个接一个地执行，这是体系架构决定的，没有办法。Jest 不同，Jest 为每一个单元测试文件创造一个...

2018-12-15 20:44:38 1066 1

原创 react 精华内容总结----郭子墨

1. lodash实现padStart 时间格式化为了在项目中使用 lodash，请先用 npm 完成对应的库安装。import padStart from 'lodash/padStart'; const ms2Time = (milliseconds) => { let time = milliseconds; const ms = milliseconds % 1000; ti...

2018-12-15 20:35:57 558

原创小程序个人中心原来代码片段

<template> <view class="mine_container" >  <view class="user_info"> <view class="self"> <

2018-12-14 12:34:05 1351

原创 ES6 api的几个特殊用法郭子墨总结版权必究

操作一个字符串‘hello’并把这个字符串拆开成'h' , 'e', 'l', 'l', 'o' 并把他们放到一个数组中第一种方法[...'hello']["h", "e", "l", "l", "o"]第二种Array.from('hello')["h", "e", "l", "l", "o&

2018-12-13 13:03:21 163

原创前端数组去重的方法集合包含es6

https://blog.csdn.net/bixiaoxiao41521/article/details/80285044 1. 双循环去重原理：定义一个包含原始数组第一个元素的数组，然后遍历原始数组，对原始数组进行遍历，将原始数组中的每一个元素与新数组中的每一个元素进行对比，如果不重复就添加到新数组里，最后返回新数组。这种方式很耗费时间喝内存，不适合大型数组。 ...

2018-12-13 12:51:08 1492

原创小程序使用自己写的footer 底部而不使用原生的footer的原因

小程序使用自己写的footer 底部而不使用原生的footer的原因是由于原生的footer不灵活，一个路由对应一个footer的icon 底部的图标和文字，而如果是某些page不需要展示下面的icon 则必须滞空，这样样式也依然会占位，导致展示不好看，而自己写的footer作为组件的好处就是不跟随page的设计而设置有再多的page 也不用担心，我想配置我就关联这个icon的变量 ...

2018-12-12 23:00:59 2232

原创 webpackdevserver 报错Something is already running on port 3000 不一定是因为端口被占用

webpackdevserver 报错Something is already running on port 3000 不一定是因为端口被占用也有可能是你没有开localhost 绑定域名导致域名解析失败跟踪代码发现：如果本地服务报错会进入listen(port, 'localhost', err => { if (err) { console.log('进...

2018-12-12 13:13:26 3446 1

原创 react 警告Warning: Cannot update during an existing state transition (such as within `render`). Render

react 报错Warning: Cannot update during an existing state transition (such as within `render`). Render报错的原因是由于引用的子组件通过props进行传递了传递的过程中实际上已经处于render阶段了，在这个阶段如果你再改变这个state值的话就会包这个错尽量不要在render的...

2018-12-11 17:03:42 26722 2

原创浏览器隐身非隐身判断

var fs = window.RequestFileSystem || window.webkitRequestFileSystem;if (!fs) { console.log("check failed");} else { fs(window.TEMPORARY,100,function(){ alert('非隐身模式'); },function(){ a...

2018-12-10 17:46:47 256

原创 serverworker 总结

https://juejin.im/post/5b06a7b3f265da0dd8567513

2018-12-10 16:27:05 3247

原创比较全的浏览器版本和类型判断

var Browser=Browser || (function(window){ var document = window.document, navigator = window.navigator, agent = navigator.userAgent.toLowerCase(), //IE8+支持.返回浏览器渲染当前文档所用的模式 ...

2018-12-07 14:11:33 360

原创微信小程序强制更新版本以及热启动和冷启动

小程序先提交了一个版本，但是用的时候发现了一些问题需要及时的更新，这时候就要发布新版本。如何让用户自己的小程序也更新到最新版本呢？一、运行机制小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。假如用户已经打开过某小程序，然后在一定时间内（五分钟）再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁...

2018-12-07 09:20:31 12360 7

原创 taro框架的缺陷以及注意事项

https://www.jianshu.com/p/9d3318f7f2191.不要使用 eval()2.禁止使用 Object 构造器let config = new Object() // ✗ 错误 3.不使用 Generator 函数语法使用 Promise 或者 async functions 来实现异步编程function* helloWo...

2018-12-02 23:10:18 46002 1

gwdgwd123的博客