react16.4相关

Posted by Eric on November 23, 2018

支持 Pointer Events

Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API

Mouse event Touch event Pointer event
mousedown touchstart pointerdown
mouseenter   pointerenter
mouseleave   pointerleave
mousemove touchmove pointermove
mouseout   pointerout
mouseover   pointerover
mouseup touchend pointerup

注意浏览器兼容性

简单示例:

<html>
<script>
function over_handler(event) { }
function enter_handler(event) { }
function down_handler(event) { }
function move_handler(event) { }
function up_handler(event) { }
function cancel_handler(event) { }
function out_handler(event) { }
function leave_handler(event) { }
function gotcapture_handler(event) { }
function lostcapture_handler(event) { }

function init() {
 var el=document.getElementById("target");
 // Register pointer event handlers
 el.onpointerover = over_handler;
 el.onpointerenter = enter_handler;
 el.onpointerdown = down_handler;
 el.onpointermove = move_handler;
 el.onpointerup = up_handler;
 el.onpointercancel = cancel_handler;
 el.onpointerout = out_handler;
 el.onpointerleave = leave_handler;
 el.gotpointercapture = gotcapture_handler;
 el.lostpointercapture = lostcapture_handler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
React pointer events
  • onPointerDown
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

需要注意的是, 上述api只在支持pointer events的浏览器中使用, react官方推荐当你在使用这个特性的时候, 使用第三方polyfill保证其兼容性, 经过对比之后,PEP这个插件很好的支持了我们的需求

class Index extends Component {
  overHandler(event) () {}
  render () {
    return (
      <div onPointerOver={this.overHandler.bind(this)}></div>  
    )
  }
 }

getDerivedStateFromProps 修复bug

React这次更新修复了getDerivedStateFromProps这个生命周期的触发节点, 在之前, 它触发的方式和旧生命周期getDerivedStateFromProps类似, 都是在被父组件re-render的时候才会触发,并且本组件的setState的调用也不会触发 这种方式在之前同步渲染的时候是没有问题的, 但是为了支持新的还未启用的fiber异步渲染机制, ==现在, getDerivedStateFromProps在组件每一次render的时候都会触发,也就是说无论是来自父组件的re-render, 还是组件自身的setState, 都会触发getDerivedStateFromProps这个生命周期。==