首页手记 React v16.4.0: Pointer...

React v16.4.0: Pointer Events - React Blog

标签：

React.JS

May 23, 2018 by Andrew Clark

最新的版本增加了对经常请求的功能的支持：指针事件！

它还包括getDerivedStateFromProps的错误修正。查看下面的完整更新日志。

指针事件

React DOM中现在提供以下事件类型：

onPointerDown
onPointerMove
onPointerUp
onPointerCancel
onGotPointerCapture
onLostPointerCapture
onPointerEnter
onPointerLeave
onPointerOver
onPointerOut

请注意，这些事件仅适用于支持指针事件规范的浏览器。（在撰写本文时，这包括最新版本的Chrome，Firefox，Edge和Internet Explorer。）如果您的应用程序依赖于指针事件，我们建议使用第三方指针事件polyfill。我们选择不在React DOM中包含这样的polyfill，以避免增加bundle大小。

在CodeSandbox中参看实例

非常感谢Philipp Spiess为此做出贡献！

getDerivedStateFromProps的修改

无论更新的原因如何，每次呈现组件时都会调用getDerivedStateFromProps。以前，只有在组件由其父组件重新呈现时才会调用它，并且不会因本地setState而触发。这是对最初实施的疏忽，现在已得到纠正。之前的行为更类似于componentWillReceiveProps，但改进的行为确保了与React即将推出的异步呈现模式的兼容性。

此错误修复不会影响大多数应用程序，但它可能会导致一小部分组件出现问题。其重要的罕见情况分为两类：

1. 避免在getDerivedStateFromProps中出现副作用

与render方法一样，getDerivedStateFromProps应该是props和state的纯函数。 getDerivedStateFromProps中的副作用从未受到支持，但由于它现在比以前更频繁地触发，因此最近的更改可能会暴露以前未发现的错误。

应将副作用代码移动到其他方法：例如，Flux调度通常属于原始事件处理程序，手动DOM突变属于componentDidMount或componentDidUpdate。您可以在我们最近关于准备异步呈现的帖子中阅读更多相关信息。

2. 在计算受控值时将传入的props与先前的props进行比较

以下代码假定getDerivedStateFromProps仅触发prop的更改：

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return {
      // Since this method fires on both props and state changes, local updates
      // to the controlled value will be ignored, because the props version
      // always overrides it. Oops!
      controlledValue: props.value,
    };
  }
  return null;
}

解决此问题的一种可能方法是通过将以前的props存储在状态中来比较传入值与之前的值：

static getDerivedStateFromProps(props, state) {
  const prevProps = state.prevProps;
  // Compare the incoming prop to previous prop
  const controlledValue =
    prevProps.value !== props.value
      ? props.value
      : state.controlledValue;
  return {
    // Store the previous props in state
    prevProps: props,
    controlledValue,
  };
}

但是，无论是使用较新的getDerivedStateFromProps还是遗留的componentWillReceiveProps，在state“镜像”props的代码通常都包含错误。我们发布了一篇后续博客文章，更详细地解释了这些问题，并提出了不涉及getDerivedStateFromProps（）的更简单的解决方案。

安装

可以在npm上安装React v16.4.0

也可以使用yaran安装React 16，执行：

yarn add react@^16.4.0 react-dom@^16.4.0

要使用npm安装React 16，请运行：

npm install --save react@^16.4.0 react-dom@^16.4.0

我们还通过CDN提供了反应的UMD版本：

<script crossorigin class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

有关详细的安装说明，请参阅文档。

更新日志