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 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 组件也可以被定义为可被包装的函数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:
Fragments
React
还提供了用于减少不必要嵌套的组件。
Refs
Suspense
Suspense 使得组件可以“等待”某些操作结束后,再进行渲染。目前,Suspense 仅支持的使用场景是:通过 React.lazy
动态加载组件。它将在未来支持其它使用场景,如数据获取等。
Hooks
Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 拥有专属文档章节和单独的 API 参考文档:
ReactDOM API
可以使用<script>
或者import React from 'react'
方式引入。
react-dom
的 package 提供了可在应用顶层使用的 DOM(DOM-specific)方法,如果有需要,你可以把这些方法用于 React 模型以外的地方。不过一般情况下,大部分组件都不需要使用这个模块。
总结
React 成为一个独立的核心包之后,可以很方便的做扩展。React 只实现了逻辑上的核心基础功能。而基于不同平台或是场景的功能则由扩展包来实现。例如,用与浏览器的ReactDOM,用于APP的 ReactNative,用于测试的 React-art,用于ssr的next.js 等等,你也可以基于 React 写出自己的一套渲染方案。这就是拆分的好处,核心部分复用,各自平台差异性各自实现。
参考:
为什么react和react-dom要分成两个包?
React顶层API
React && ReactDOM的更多相关文章
- parcel bug & not support normal import React & ReactDOM module
bug report not support normal import React & ReactDOM module, why Code Sample OK import * as Rea ...
- Error! Failed to install react, react-dom, next, try again.
问题:用create-next-app创建应用报错,部分模块没有安装,react.react-dom.next等模块安装失败,如下图所示 操作环境: 系统:Ubuntu 16.04.4 LTS npm ...
- React单元测试——十八般兵器齐上阵,环境构建篇
一个完整.优秀的项目往往离不开单元测试的环节,就 github 上的主流前端项目而言,基本都有相应的单元测试模块. 就 React 的项目来说,一套完整的单元测试能在在后续迭代更新中回归错误时候给与警 ...
- React JS的基本用法[ES5,纯前端写法]
1.配置webpack npm install -g webpack #webpack的cli npm install -g webpack-dev-server #webpack自带的服务器 npm ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack踩坑之路——构建基本的React+ES6项目
转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...
- 前端React开发入门笔记
什么是React React是一个JavaScript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面. Hello world <!DOCTYPE html> ...
- React News Site 新闻站
Learn React & Webpack by building the Hacker News front page from https://github.com/theJian/bui ...
- webpack配置ES6 + react套装开发
配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, l ...
随机推荐
- getcwd() 和 os.path.realpath () 的区别
http://lemfix.com/topics/7 getcwd()获取当前目录:其他文件调用时,会根据当前文件的位置获取目录,不同的文件调用,值是不一样的. os.path.realpath()获 ...
- SpringMVC之参数绑定
1.Controller package com.tz.controller; import org.springframework.beans.factory.annotation.Required ...
- Nginx之负载节点状态监测
前言 nginx做负载均衡性能很好,但是负载中的节点有异常怎么处理呢? 当然是nginx发现某一个节点为异常节点后自动将请求转移至其他节点直至转移到一个正常节点. 为了实现这一步有如下两个解决方案可供 ...
- 【OpenCv-Python】Getting Started with Images
1.1读入图像 使用函数 cv2.imread() 读入图像.这幅图像应该在此程序的工作路径,或者给函数提供一个完整的路径,第二个参数是要告诉函数应该如何读取这幅图片. cv2.IMREAD_COLO ...
- Java反射,泛型在Json中的运用
最近项目中遇到了Json数据自动获取的功能,不然令人想起java的反射,已经很长时间没复习java了正好一块连java的这一块内容一起过一遍.java中的反射无疑就相当于java开发者的春天,在众多的 ...
- 基于abp框架的数据库种子数据初始化
目录 基于abp框架的数据库种子数据初始化 1.背景 2.参照 3.解决方案 3.1 初始化数据 3.2 依赖注入方法容器里获取数据库上下文 3.3 封装创建初始化数据列表方法 3.4 数据库中没有的 ...
- Linux-基本操作(登入登出,图形化界面,命令行界面)
命令行界面登录 (1)命令行登录界面 安装好Centos后,系统启动默认进入的是图形化界面,可以通过如下命令修改进入命令行界面: 命令行登录:systemctl set-default multi ...
- js轮询及踩过的坑
背景 下午四点,天气晴朗,阳光明媚,等着下班产品:我希望页面上的这个数据实时变化开发:···,可以,用那个叫着WebSocket的东西,再找一个封装好框架,如:mqtt(感觉自己好机智)产品:要开发好 ...
- .NET Core 3.x之下的配置框架
一.配置框架的核心类库 首先我们使用.NET Core的配置框架需要安装额外的NuGet扩展包,下面是列举最常用的几个扩展包以及所对应的配置功能 NuGet Package Description M ...
- vue cli web pack 全局引入jquery
之前 装过,装 npm i —save jquery 然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...