_小生_

React v16.4.0: 指针事件 - React Blog

原文链接: reactjs.org

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 src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

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

更新日志

React

React DOM

  • 添加对Pointer Events规范的支持。(@philipp-spiess in #12507)
  • 无论重新渲染的原因如何,都要正确调用getDerivedStateFromProps() 。(@acdlite in #12600 and #12802)
  • 修复了在某些情况下阻止上下文传播的错误。 (@gaearon in #12708)
  • 修复在更深的setState()上使用forwardRef()重新渲染组件的问题。 (@gaearon in #12690)
  • 修复一些属性错误地从自定义元素节点中删除。(@airamrguez in #12702)
  • 如果上面有遗留上下文提供程序,修复上下文提供程序不要对子项进行纾困。(@gaearon in #12586)
  • 添加在上下文提供程序组件上指定propTypes的功能。(@nicolevy in #12658)
  • <StrictMode>中使用react-lifecycles-compat时修复误报警告. (@bvaughn in #12644)
  • 当forwardRef()render函数具有propTypes或defaultProps时发出警告。(@bvaughn in #12644)
  • 改进forwardRef()和上下文使用者在组件堆栈中的显示方式。(@sophiebits in #12777)
  • 更改内部事件名称。这可能会破坏以不受支持的方式依赖React内部的第三方软件包。(@philipp-spiess in #12629)

React Test Renderer

  • 修复getDerivedStateFromProps()支持以匹配新的React DOM行为。(@koba04 in #12676)
  • 当父级是片段或其他特殊节点时,修复testInstance.parent崩溃。 (@gaearon in #12813)
  • 现在,测试渲染器遍历方法可以发现forwardRef()组件。(@gaearon in #12725)
  • Shallow渲染器现在忽略返回null或undefined的setState()更新程序。(@koba04 in #12756)

React ART

  • 修复从React DOM管理的树提供的读取上下文。 (@acdlite in #12779)

React Call Return (Experimental)

  • 此实验已删除,因为它影响了捆绑包大小,并且API不够好。它可能会以某种其他形式回到未来。 (@gaearon in #12820)