总结

info

• React 中的事件并不是原生事件，而是合成事件（这也是 react 中为什么不能通过return false来阻止默认事件的原因）

• 合成事件，React 中是的事件是由多个原生事件组合而成

{
    onBlur: ['blur'],
    onClick: ['click'],
    onClickCapture: ['click'],
    onChange: ['blur', 'change', 'click', 'focus', 'input', 'keydown', 'keyup', 'selectionchange'],
    onMouseEnter: ['mouseout', 'mouseover'],
    onMouseLeave: ['mouseout', 'mouseover'],
    ...
}

• React 给元素绑定的事件处理函数并不是我们声明的事件处理函数，而是经过 dispatchEvent 处理后的函数，并且传递了 React 中的事件对象 event(合成事件源) 给我们定义的函数

const listener = dispatchEvent.bind(null, "click", eventSystemFlags, document);
/* TODO: 重要, 这里进行真正的事件绑定。*/
document.addEventListener("click", listener, false);

warning

• 不要在 hooks 的参数中执行函数/实例化类；原因是每次函数组件执行的时候 hooks 都会被执行。

tip

• 创建 ref 的方式有两种：createRef 和 useRef。createRef 一般都用来在类组件中创建 ref 对象，而不能在函数式组件中使用，原因是，createRef 底层是返回一个新的有 current 属性的对象。

• shouldComponentUpdate 的优先级高于 PureComponent