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