React 16 新特性全解（中）

感谢 @daisy 的系列投稿！

React 16 新特性全解（上）

前言

这篇文章主要介绍v16.4~ v16.6的特性，如果你关注Hooks，可以直接看React 16 新特性全解（下）

目录

• v16.4

1. 新增指针事件

2. fix生命周期函数

• v16.5

1. 提供新的调试工具

• v16.6

1. memo

2. lazy

3. suspense

4. 简化 contextType

5. 增加 getDerivedStateFromError

16.4

新增指针事件

新增了对对指针设备（例如鼠标，触控笔，或者手指触摸）触发的dom事件：

• onPointerDown

• onPointerMove

• onPointerEnter

• onPointerLeave

• onPointerOver

• onPointerOut

等等。

但是这个事件仅支持那些支持指针事件的浏览器，比如目前最新版本的Chrome，Firefox，Edge IE浏览器）。但是如果你的应用程序真的依赖这些事件，可以使用第三方的polyfill。因为React团队对了避免增大react的bundle size，所以没有放进去。

demo时刻

这里展示的是一个鼠标的拖拽功能，可以自己try try。

fix生命周期函数 - getDerivedStateFromProps

React 16.0 ~ React 16.3 :

生命周期的图如下：

这里我们可以看到getDerivedStateFromProps这个生命周期函数有个问题就是在Updating阶段的时候，无论使用setState还是forceUpdate,都不调用getDerivedStateFromProps。

喂，这明显有问题啊？！ 那我在updating阶段都没办法监听到props的改变来搞事情了。

React团队还是很快意识到了这个问题的。所以在这个版本，他们fix了这个问题，新的图长这样：

很简单，就是fix了之前Updating阶段用setState，forceUpdate调用不到getDerivedStateFromProps这个问题。

v16.4.2

这个小版本的发布主要是为了fix一个服务端的XSS漏洞，我本来不想讲，但是看大家那么好学，还是提一下把。

呃，别告诉我你还不知道什么是XSS漏洞😓，拜托赶紧现在立刻马上去学一下，这个必会。一个简单的例子就是用户输入了你不想让他输入的内容，尤其带有JS html标签的，给你的网站带来了麻烦。

这个XSS具体场景是这样的：

let props = {};
// 注意：这里props的属性依靠用户输入
props[userProvidedData] = "hello";
let