# 前言

React 是 Facebook 公司开发的用于构建用户界面的 JavaScript 库，React 是现在使用最广泛的组件库，相信大家都比较了解 React 的基本原理及使用，这里不再累赘，下面主要和大家一起学习下 React 新的特性。

翻阅官方文档是最好的学习途径，官方文档地址：

react.docschina.org/docs/gettin…

# React 项目地址（附新特性源码）

github.com/dkypooh/fro…

# React 基础

# React 生命周期

从 React 生命周期中可以看出 shouldComponentUpdate 这个节点的生命周期关系到是否重新 Render 组件。对 shouldComponentUpdate 的手动触发也是组件性能优化的一个重要手段。

# React 基础实例

编写一个 hello world 组件，JSX 语法编译成 React.createElement 包装的函数。

import React from "react";

export default class extends React.PureComponent {
  render() {
    return (
      <div className="App">
        <h1>Hello boy</h1>
        <h2>Welcome</h2>
      </div>
    );
  }
}

## 编译后的结果
return React.createElement('div', {className: 'App'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('h2', /* ... h2 children ... */)
);

同时在当前版本的 React 中，支持编写函数式组件，官方称为 Function Component。通过 Webpack 的 Babel @babel/preset-react 支持编译成 Javascript 语法。

# Portals 传送门

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

ReactDOM.createPortal(child, container)

第一个参数（ child ）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。第二个参数（container）则是一个 DOM 元素。

render() {
  return ReactDOM.createPortal(
    <Component />,
    domNode,
  );
}