huangdi

 不知道小伙伴有没有注意到，自从react更新到16.3版本后，以前使用的`componentWillMount`、`componentWillReceiveProps`、`componentWillUpdate`三个生命周期函数都有eslint报警，让我们使用`UNSAFE_`前缀的新的生命周期函数。不禁有疑问“react这是意欲何为啊”？为什么要加`UNSAFE_`前缀？ ## 为什么要对这些生命周期函数报警？ **1、componentWillMount** `componentWillMount`生命周期发生在首次渲染前，一般使用的小伙伴大多在这里初始化数据或异步获取外部数据赋值。初始化数据，react官方建议放在`constructor`里面。而异步获取外部数据，渲染并不会等待数据返回后再去渲染。 案例一：如下是安装时监听外部事件调度程序的组件示例 ``` class Example extends React.Component { state = { value: '' }; componentWillMount() { this.setState({ value: this.props.source.value }); this.props.source.subscribe(this.handleChange); } componentWillUnmount() { this.props.source.unsubscribe(this.handleChange...

## 背景 最近，由于公司业务需要，接入了**微信web端分享**接口。虽然微信的接口文档已经很详细了，但是缺少实战代码。小编搜了一下掘金网站好像也很少这方面的分享（或许是太过简单，大神们都不屑于分享这类经验。当然也有客观原因，现在大多都做小程序了，微信web端的流量被分流了很多。 ## 准备 此为[微信公众平台接口文档](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432)地址 此为[微信公众平台接口测试帐号申请](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login)地址 此为[获取基础access_token](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183)地址 此为[微信JS-SDK说明文档](https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)地址 以下nodejs端是基于egg框架。 ## 开发 ### 1、申请公众号或测试版公众号 ### 公众号申请（这里不详说公众号申请，有需要自己去官网看文档）用于生产环境的开发。 对于前期开发阶段，可以去[微信公众平台接口测试帐号申请](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login)，微信扫描二维码即可申请。 注意事项： 1、填写JS接口安全域名，绑定服务器域名 2、扫描“测试号二维码”，把你的微信号加入列表，然后你的微信就有权限进行测试了。**没有加入列表的微信号是没有权限使用微信接口的**，这里要注意一下。 至此，测试公众号配置完成。 ### 2、获取基础**access_token**接口。 ### 微信有两个**access_token**，一个是基础**access_token**，一个是网页授权**access_token**，具体区别，如图所述：  我们调用的微信分享接口只需要基础**access_token**就好。 #### 接口api: (get)https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET...

# 缘起 由于项目需要，我们要在web端实现录音功能。一开始，找到的方案有两个，一个是通过iframe，一个是html5的getUserMedia api。由于我们的录音功能不需要兼容IE浏览器，所以毫不犹豫的选择了html5提供的getUserMedia去实现。基本思路是参考了官方的api文档以及网上查找的一些方案做结合做出了适合项目需要的方案。但由于我们必须保证这个录音功能能够同时在pad端、pc端都可以打开，所以其中也踩了一些坑。以下为过程还原。 ## 步骤1 由于新的api是通过navigator.mediaDevices.getUserMedia，且返回一个promise。 而旧的api是navigator.getUserMedia，于是做了一个兼容性。代码如下： ```js // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。 if (navigator.mediaDevices.getUserMedia ===...

## 前言 **单元测试的好处**： * 可保证得到结果的一致性，提高项目、组件稳定性。 * 开发者按单元测试思路去写代码，可清晰代码结构，提高代码的可读性。 由于笔者开发的项目越来越大，公共组件的复用性高，故其稳定性尤为重要。因此，引入单元测试刻不容缓。 **单元测试的不好**： * 会占用一定的开发成本，增加开发工作量。 * 旧项目加入单元测试改动很大，会有一定的风险。 * 会有一定的学习成本，对开发者要求比较高。 * 如果在一些复用性很低的组件使用单元测试，成效不大且开发成本高。 ## 选型 在做项目单元测试前，笔者参考了网上的一些文章以及官方文档，最后选型为Jest + react-test-renderer + Enzyme。 * Jest Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是集成了...