React 和 ReactDOM 的區別

若是你是 React 的初學者，必定會對 React 和 ReactDOM 感到迷惑。爲何要分紅兩個包呢？害得我還要引入兩次，說好的減輕開發人員負擔呢，這丫的在搞什麼飛機。帶着這個疑問，咱們一塊兒來康康 React 的「野心」。

ReactDOM獨立的歷史緣由

React 在v0.14以前是沒有 ReactDOM 的，全部功能都包含在 React 裏。從v0.14(2015-10)開始，React 才被拆分紅React 和 ReactDOM。爲何要把 React 和 ReactDOM 分開呢？由於有了 ReactNative。React 只包含了 Web 和 Mobile 通用的核心部分，負責 Dom 操做的分到 ReactDOM 中，負責 Mobile 的包含在 ReactNative 中。具體參考v0.14的release：React v0.14 - React Blog。

ReactDom 只作和瀏覽器或DOM相關的操做，例如：ReactDOM.render() 和 ReactDOM.findDOMNode()。若是是服務器端渲染，能夠 ReactDOM.renderToString()。React 不只能經過 ReactDOM 和Web頁面打交道，還能用在服務器端SSR，移動端ReactNative和桌面端Electron。

e.g：
Web端React代碼

import React from 'react';
import {Text, View} from 'react-dom';

const App = () => (
  <div>
  	<h1>Hello React</h1>
  </div>
 )

ReactDom.render(<App/>, document.getElementById('root'));

移動端的ReactNative代碼：

import React from 'react';
import ReactNative from 'react-native';

const WelcomeScreen = () => (
  <View>
  	<Text>Hello ReactNative</Text>
  </View>
 );

相同的是都須要import React from 'react'。
而Web應用須要import ReactDOM from 'react-dom'；
Mobile應用須要import {Text, View} from 'react-native'

React API

React是 React 庫的入口，你可使用<script>或者import React from 'react'方式引入。

組件

使用 React 組件能夠將 UI 拆分爲獨立且複用的代碼片斷，每部分均可獨立維護。你能夠經過子類 React.Component 或 React.PureComponent 來定義 React 組件。

• React.Component
• React.PureComponent

React 組件也能夠被定義爲可被包裝的函數React.memo。

• React.memo

建立 React 元素

強烈建議使用 JSX 來編寫你的 UI 組件。由於每一個 JSX 元素都是調用 React.createElement() 的語法糖。像下面這樣：

import React from 'react'

function A() {
  // ...other code
  return <h1>前端桃園</h1>
}

等價於：

import React from 'react'

function A() {
  // ...other code
  return React.createElement("h1", null, "前端桃園");
}

上面的代碼通過 babel 轉化，會變成下面的代碼。由於從本質上講，JSX 只是爲 React.createElement(component, props, ...children) 函數提供的語法糖。

轉換元素

React 提供了幾個用於操做元素的 API：

• cloneElement()
• isValidElement()
• React.Children

Fragments

React 還提供了用於減小沒必要要嵌套的組件。

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

Suspense 使得組件能夠「等待」某些操做結束後，再進行渲染。目前，Suspense 僅支持的使用場景是：經過 React.lazy 動態加載組件。它將在將來支持其它使用場景，如數據獲取等。

• React.lazy
• React.Suspense

Hooks

Hooks 是 React 16.8 的新增特性。它可讓你在不編寫 class 的狀況下使用 state 以及其餘的 React 特性。Hook 擁有專屬文檔章節和單獨的 API 參考文檔：

• 基礎 Hook
  • useState
  • useEffect
  • useContext
• 額外的 Hook
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
    

ReactDOM API

可使用<script>或者import React from 'react'方式引入。

react-dom 的 package 提供了可在應用頂層使用的 DOM（DOM-specific）方法，若是有須要，你能夠把這些方法用於 React 模型之外的地方。不過通常狀況下，大部分組件都不須要使用這個模塊。

• render()
• hydrate()
• unmountComponentAtNode()
• findDOMNode()
• createPortal()
  

總結

React 成爲一個獨立的核心包以後，能夠很方便的作擴展。React 只實現了邏輯上的核心基礎功能。而基於不一樣平臺或是場景的功能則由擴展包來實現。例如，用與瀏覽器的ReactDOM，用於APP的 ReactNative，用於測試的 React-art，用於ssr的next.js 等等，你也能夠基於 React 寫出本身的一套渲染方案。這就是拆分的好處，核心部分複用，各自平臺差別性各自實現。

參考：
爲何react和react-dom要分紅兩個包？
React頂層API