1 .事件处理的不同

1 .在 HTML 中你可以返回 false 以阻止默认的行为
2 .必须明确的说明 
function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')
}

2 .{}括号里面

1 .可以在里面使用内联表达式
<h1>Hello!</h1>
{
    messages.length > 0 && !isLogin ?
      <h2>
          You have {messages.length} unread messages.
      </h2>
      :
      <h2>
          You don't have unread messages.
      </h2>
}

forward refs

1 .Ref forwarding 是一个特性，它允许一些组件获取接收到 ref 对象并将它进一步传递给子组件。

const ButtonElement = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>

ref字符串引用有以下问题

1 .它们强制 React 跟踪当前执行的组件。这是有问题的，因为它使 React 模块有状态，这会导致在 bundle 中复制 React 模块时会导致奇怪的错误
2 .它们是不可组合的 - 如果一个库把一个 ref 传给子元素，则用户无法对其设置另一个引用
3 .它们不能与静态分析工具一起使用，如 Flow。Flow 无法猜测出 this.refs 上的字符串引用的作用及其类型。Callback refs 对静态分析更友好

shadow DOM

1 .Shadow DOM 解决了构建网络应用的脆弱性问题。脆弱性是由 HTML、CSS 和 JS 的全局性引起的
2 .使用新的 HTML id/类时，无法了解是否与页面所使用的现有名称冲突。微小错误渐渐增多，CSS 特异性成为一个大问题（!important 所有的事情！），样式选择器变得失控以及性能可能受损，不一而足
3 .Shadow DOM 与普通 DOM 相同，但有两点区别：1) 创建/使用的方式；2) 与页面其他部分有关的行为方式。 通常，您创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM，您可以创建作用域 DOM 树，该 DOM 树附加至该元素上，但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。 您在影子中添加的任何项均将成为宿主元素的本地项，包括 <style>。 这就是 shadow DOM 实现 CSS 样式作用域的方式
4 .Shadow DOM它允许在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。
因此开发者可利用Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码
5 .video标签包裹着source标签，就可以完成一系列视频功能：播放/暂停按钮、进度条、视频时间显示、音量控制等等？既然 DOM 源码这么干净，你有想过实现这些组件的代码是从哪儿来的吗