共计 2562 个字符，预计需要花费 7 分钟才能阅读完成。
作者：Samer Buna
翻译：疯狂的技术宅
原文：https://medium.com/edge-coder…
未经容许严禁转载
这道题的答案有点简单。
首先要搞清楚 element 和 component 是不是一回事？
从技术上来说，ReactDOM 不会在 DOM 中渲染 React 组件或 React 元素。它渲染 由其组件实例反对的 DOM 元素。对于类组件来说这是正确的。然而对于函数组件，ReactDOM 仅渲染 DOM 元素。函数组件没有实例（能够通过 this 拜访），因而在应用函数组件时，ReactDOM 会渲染由函数返回的元素所生成的 DOM 元素。
你须要在这里了解的是，React 元素不同于 DOM 元素。React 元素只是 HTML 元素、React 组件或它们的混合的“形容”。
好吧，一个更好的面试题可能应该这样问：当你在 JSX 中应用 <MyComponent/> 之类的货色时，它是组件、元素还是实例？
这是一个 元素，但不是 DOM 元素，而是一个 React 元 素。因为任何 JSX 标签都会被转换为 React.createElement 再去调用。
然而要想让 React 持续应用这个 React 元素的话，必须调用一个函数或从一个类中创立实例。
你可能会在一些 React 教程中看到 组件（component）、元素（element） 和 实例（instance） 这些词。我在这里混用这些词是不对的，然而我认为 React 的初学者须要理解它们的区别。React 官网博客上有一篇文章专门阐明这些概念，但我认为这些内容对于初学者来说还远远不够。
以下是这些术语的简略定义：
- React Component 是模板，蓝图，全局定义的。能够是 函数 或类（带有渲染性能）。
- React Element 是从组件中 返回 的货色。这个对象实际上形容了组件所代表的 DOM 节点。对于函数组件来说，此元素是函数返回的对象。对于类组件，元素是组件的渲染函数返回的对象。React 元素不是咱们在浏览器中所看到的。它们只是内存中的对象，咱们无奈对其进行任何更改。
- React 在其外部通过创立、更新和销毁 instance 来找出须要渲染给浏览器的 DOM 元素树。应用类组件时，通常将其浏览器渲染的 DOM 元素称为组件实例。你能够渲染同一组件的多个实例。实例是你在基于类的组件外部应用的
this关键字。你不须要手动从类创立实例，只须要记住它就在 React 的内存中即可。 - 基于函数的 React 元素没有实例。一个函数组件依然能够被屡次渲染，然而 React 不会将本地实例与每个渲染相关联。它只是用函数的调用来确定要为该函数渲染的 DOM 元素。
最重要的是，ReactDOM 不会在浏览器中渲染组件，也不会渲染元素（这里的术语 元素 代表 React.createElement 的返回值）。它也不渲染实例。它只渲染 DOM 元素。
可怜的是，应用术语 组件 既指模板又指通过模板应用的任何一种实例或者调用，这仿佛是很广泛的。人们对此感到困惑很失常，这挺苦楚的。
What’s the story here?
这是什么故事？
每个 React 利用都从一个应用 React element 的 render 调用开始。上面以 reactjs.org 官网提供的 HelloMessage 案例作为例子，我对这个例子略微做了一些批改，使其具备了函数组件：
const Today = () => (<div>Today is {new Date().toDateString()}</div>
);class HelloMessage extends React.Component {render() {
return (
<React.Fragment>
<div>Hello {this.props.name}</div>
<Today />
</React.Fragment>
);
}
}ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);第一个 React 元素是咱们在 ReactDOM.render 调用中开始的元素：
<HelloMessage name="Taylor" /> // 这是 React element这个 React 元素形容了要渲染的 DOM 树应该以 HelloMessage 组件和值等于 Taylor 的 prop name 开始。
当初答复问题：HelloMessage 是什么？
每当 React 元素形容一个 React 组件时（就像下面的 React 元素一样），React 应用该组件将形容替换为组件返回的内容。这时它将会为基于类的组件创立一个实例，并将该实例的援用保留在内存中。它不会为基于函数的组件创立任何内容。它只是调用它们。
从 HelloMessage 组件返回的是一个形容 React.Fragment 组件的 React 元素。
答复问题：React.Fragment 是什么？
React 会继续一直的缩小这些组件的未知形容，直到只存在无效的 DOM 节点。React.Fragment 的形容被翻译成 2 个 React 元素，一个形容 div，另一个形容 Today 组件。
答复问题：代码中的 Today 什么是？
它调用 Today 函数来找出最初一个问题。Today 函数返回形容一个 div 的 React 元素。
至此，virtual 树中蕴含了所有形容 DOM 节点的 React 元素。React 通过一致性比拟算法找出要在浏览器中更新的内容。用组件实例所转换的树节点保留批改该实例的能力。
本文首发微信公众号：前端先锋
欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章
欢送持续浏览本专栏其它高赞文章：
- 深刻了解 Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13 个帮你进步开发效率的古代 CSS 框架
- 疾速上手 BootstrapVue
- JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
- WebSocket 实战：在 Node 和 React 之间进行实时通信
- 对于 Git 的 20 个面试题
- 深刻解析 Node.js 的 console.log
- Node.js 到底是什么？
- 30 分钟用 Node.js 构建一个 API 服务器
- Javascript 的对象拷贝
- 程序员 30 岁前月薪达不到 30K，该何去何从
- 14 个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩大插件
- Node.js 多线程齐全指南
- 把 HTML 转成 PDF 的 4 个计划及实现
- 更多文章 …