zoukankan      html  css  js  c++  java
  • 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的releaseReact 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

  • 相关阅读:
    添加linux alias
    vs2019 switch语句快捷键列出枚举 及常用快捷键
    generic 泛型使用
    华为云 安装centos8.2
    linux 安装redis,mysql,netcore
    react按需加载
    工具类注册基本写法
    vue项目使用深拷贝
    react+less+antd 复习搭建(一)
    python 1 cmd进入工作
  • 原文地址:https://www.cnblogs.com/chenwenhao/p/12548263.html
Copyright © 2011-2022 走看看