正文

React && ReactDOM

IP云
IP云V管理员/5 阅读
08/13
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如果你是 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 ReactDOM from 'react-dom';const App = () => (
<div>
<h1>Hello React</h1>
</div>
)ReactDom.render(<App/>, document.getElementById('root'));

移动端的ReactNative代码：

import React from 'react';
import {Text, View} 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

React && ReactDOM的更多相关文章

  1. parcel bug &amp&semi; not support normal import React &amp&semi; ReactDOM module

    bug report not support normal import React & ReactDOM module, why Code Sample OK import * as Rea ...

  2. Error&excl; Failed to install react&comma; react-dom&comma; next&comma; try again&period;

    问题:用create-next-app创建应用报错,部分模块没有安装,react.react-dom.next等模块安装失败,如下图所示 操作环境: 系统:Ubuntu 16.04.4 LTS npm ...

  3. React单元测试——十八般兵器齐上阵，环境构建篇

    一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...

  4. React JS的基本用法［ES5，纯前端写法］

    1.配置webpack npm install -g webpack #webpack的cli npm install -g webpack-dev-server #webpack自带的服务器 npm ...

  5. &lbrack;webpack&rsqb; 配置react&plus;es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  6. webpack踩坑之路——构建基本的React&plus;ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  7. 前端React开发入门笔记

    什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html&gt ...

  8. React News Site 新闻站

    Learn React & Webpack by building the Hacker News front page from https://github.com/theJian/bui ...

  9. webpack配置ES6 &plus; react套装开发

    配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, l ...

随机推荐

  1. php工作笔记4-mysql笔记1

    1.Mysql中数值的长度和最大值是没有关系的,它仅仅只代表了数据的宽度,比如:int(4)和int(8)可以存储的数据长度是一样的,她两的大小都是4Byte, 在存储上数据的时候比如Int(4) | ...

  2. java EE实现动态SQL的

    结果图 情况一:

  3. ural 1222&period; Chernobyl’ Eagles

    1222. Chernobyl’ Eagles Time limit: 1.0 secondMemory limit: 64 MB A Chernobyl’ eagle has several hea ...

  4. leetcode 14

    14. Longest Common Prefix Write a function to find the longest common prefix string amongst an array ...

  5. Razor语法学习

    原文:http://www.cnblogs.com/youring2/archive/2011/07/24/2115254.html 1.Razor的文件类型 Razor支持两种文件类型,分别是.cs ...

  6. mahout算法源码分析之Itembased Collaborative Filtering（四）共生矩阵乘法

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 经过了SimilarityJob的计算共生矩阵后,就可以开始下面一个过程了,这个过程主要是共生矩阵的乘法 ...

  7. angularjs学习笔记—事件指令

    ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click=" ...

  8. 纪中集训 Day 6

    今天他们回去了，就剩我和DWJ（一位初三大大（后来问云神才知道的ORZ））一起在做题，不得不说他真的是太厉害了，一个升初三大大在各种方面都比我强QAQ 让我突然感觉到自己的高一还是不够努力啊QAQ 连 ...

  9. 到底什么是 &quot&semi;method group&quot&semi;

    class Program { delegate void NoParam(); delegate void WithOneParam(string name); static void Main(s ...

  10. 博弈论：寻找先手必胜策略——Grundy值

    选修了人工智能课程,老师布置了调研任务:Grundy,开始看了一些资料并没有看懂. 后来找到了一篇文,写的很棒,里面有好多博弈相关的问题与分析,分享出来给大家: http://endless.logd ...