React 和 ReactDOM 的区别
<p>如果你是 React 的初学者，一定会对 React 和 ReactDOM 感到迷惑。为什么要分成两个包呢？害得我还要引入两次，说好的减轻开发人员负担呢，这丫的在搞什么飞机。带着这个疑问，我们一起来康康 React 的“野心”。<br></p>
<h3 id="reactdom独立的历史原因">ReactDOM独立的历史原因</h3>
<p>React 在v0.14之前是没有 ReactDOM 的，所有功能都包含在 React 里。从v0.14(2015-10)开始，React 才被拆分成React 和 ReactDOM。为什么要把 React 和 ReactDOM 分开呢？因为有了 ReactNative。React 只包含了 Web 和 Mobile 通用的核心部分，负责 Dom 操作的分到 ReactDOM 中，负责 Mobile 的包含在 ReactNative 中。<strong>具体参考v0.14的release</strong>：React v0.14 - React Blog。<strong><br></strong><br>ReactDom 只做和浏览器或DOM相关的操作，例如：ReactDOM.render() 和 ReactDOM.findDOMNode()。如果是服务器端渲染，可以 ReactDOM.renderToString()。React 不仅能通过 ReactDOM 和Web页面打交道，还能用在服务器端SSR，移动端ReactNative和桌面端Electron。</p>
<p>e.g：<br>Web端React代码</p>
<pre><code class="language-javascript">import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>
<h1>Hello React</h1>
</div>
)
ReactDom.render(<App/>, document.getElementById('root'));
</code></pre>
<p>移动端的ReactNative代码：</p>
<pre><code class="language-javascript">import React from 'react';
import {Text, View} from 'react-native';
const WelcomeScreen = () => (
<View>
<Text>Hello ReactNative</Text>
</View>
);
</code></pre>
<p>相同的是都需要<code>import React from 'react'</code>。<br>而Web应用需要<code>import ReactDOM from 'react-dom'</code>；<br>Mobile应用需要<code>import {Text, View} from 'react-native'</code><br>
</p>
<h3 id="reactapi">React API</h3>
<p><code>React</code>是 React 库的入口，你可以使用<code><script></code>或者<code>import React from 'react'</code>方式引入。<br>
</p>
<h4 id="组件">组件</h4>
<p>使用 React 组件可以将 UI 拆分为独立且复用的代码片段，每部分都可独立维护。你可以通过子类 <code>React.Component</code> 或 <code>React.PureComponent</code> 来定义 React 组件。</p>
<ul>
<li><code>React.Component</code></li>
<li><code>React.PureComponent</code></li>
</ul>
<p>React 组件也可以被定义为可被包装的函数<code>React.memo</code>。</p>
<ul>
<li><code>React.memo</code></li>
</ul>
<p></p>
<h4 id="创建-react元素">创建 React 元素</h4>
<p>强烈建议使用 JSX 来编写你的 UI 组件。因为每个 JSX 元素都是调用 <code>React.createElement()</code> 的语法糖。像下面这样：</p>
<pre><code class="language-javascript">import React from 'react'
function A() {
// ...other code
return <h1>前端桃园</h1>
}
</code></pre>
<p>等价于：</p>
<pre><code class="language-javascript">import React from 'react'
function A() {
// ...other code
return React.createElement("h1", null, "前端桃园");
}
</code></pre>
<p>上面的代码经过 babel 转化，会变成下面的代码。因为从本质上讲，JSX 只是为 <code>React.createElement(component, props, ...children)</code> 函数提供的语法糖。</p>
<p></p>
<h4 id="转换元素">转换元素</h4>
<p><code>React</code> 提供了几个用于操作元素的 API：</p>
<ul>
<li><code>cloneElement()</code></li>
<li><code>isValidElement()</code></li>
<li><code>React.Children</code></li>
</ul>
<p></p>
<h4 id="fragments">Fragments</h4>
<p><code>React</code> 还提供了用于减少不必要嵌套的组件。</p>
<ul>
<li><code>React.Fragment</code></li>
</ul>
<p></p>
<h4 id="refs">Refs</h4>
<ul>
<li><code>React.createRef</code></li>
<li><code>React.forwardRef</code></li>
</ul>
<p></p>
<h4 id="suspense">Suspense</h4>
<p>Suspense 使得组件可以“等待”某些操作结束后，再进行渲染。目前，Suspense 仅支持的使用场景是：通过 <code>React.lazy</code> 动态加载组件。它将在未来支持其它使用场景，如数据获取等。</p>
<ul>
<li><code>React.lazy</code></li>
<li><code>React.Suspense</code></li>
</ul>
<p></p>
<h4 id="hooks">Hooks</h4>
<p>Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 拥有专属文档章节和单独的 API 参考文档：</p>
<ul>
<li>基础 Hook
<ul>
<li><code>useState</code></li>
<li><code>useEffect</code></li>
<li><code>useContext</code></li>
</ul>
</li>
<li>额外的 Hook
<ul>
<li><code>useReducer</code></li>
<li><code>useCallback</code></li>
<li><code>useMemo</code></li>
<li><code>useRef</code></li>
<li><code>useImperativeHandle</code></li>
<li><code>useLayoutEffect</code></li>
<li><code>useDebugValue</code><br>
</li>
</ul>
</li>
</ul>
<h3 id="reactdomapi">ReactDOM API</h3>
<p>可以使用<code><script></code>或者<code>import React from 'react'</code>方式引入。</p>
<p><code>react-dom</code> 的 package 提供了<strong>可在应用顶层使用的 DOM（DOM-specific）方法</strong>，如果有需要，你可以把这些方法用于 React 模型以外的地方。不过一般情况下，大部分组件都不需要使用这个模块。</p>
<ul>
<li><code>render()</code></li>
<li><code>hydrate()</code></li>
<li><code>unmountComponentAtNode()</code></li>
<li><code>findDOMNode()</code></li>
<li><code>createPortal()</code><br>
</li>
</ul>
<h3 id="总结">总结</h3>
<p>React 成为一个独立的核心包之后，可以很方便的做扩展。<strong>React 只实现了逻辑上的核心基础功能。而基于不同平台或是场景的功能则由扩展包来实现</strong>。例如，用与浏览器的ReactDOM，用于APP的 ReactNative，用于测试的 React-art，用于ssr的next.js 等等，你也可以基于 React 写出自己的一套渲染方案。这就是拆分的好处，核心部分复用，各自平台差异性各自实现。</p>
<p>参考：<br>为什么react和react-dom要分成两个包？<br>React顶层API</p><br><br>
来源：https://www.cnblogs.com/chenwenhao/p/12548263.html
頁:
[1]