jianshu-test

转载请注明出处，未经同意，不可修改文章内容。 **🔥🔥🔥“前端一万小时”两大明星专栏——“[从零基础到轻松就业](https://mp.weixin.qq.com/s?__biz=MzAwMzk0NDYyMQ==\&mid=2247490634\&idx=1\&sn=0544bd6999082c033af9e58286bdb4b8\&chksm=9b322588ac45ac9ec053b20902d7f0a442eda9362c17701ecdf2cd086eedc2e7afc4f5074b94\&token=1371638347\&lang=zh_CN#rd)”、“[前端面试刷题](https://mp.weixin.qq.com/s?__biz=MzAwMzk0NDYyMQ==\&mid=2247490635\&idx=1\&sn=4ac0ec7ee8b864980148c51b1d36bdf5\&chksm=9b322589ac45ac9faa2e62038ddc23794ca1142680ab0ff57b5d25ba7abb801da9b75fd92b64\&token=1371638347\&lang=zh_CN#rd)”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。** *** 涉及面试题： 1. 什么是 JSX？ 2. 元素和组件有什么区别？ 3. 如何在 React 中创建组件？ 4. 何时使用类组件和函数组件？ 5. createElement 和 cloneElement 有什么区别？ 6. 怎样在 React 中写注释？ 7. 如何使用 React 和 ES6 导入和导出组件？ [编号：react_03]
## 1 React 中的组件在之前的文章《前端工程化：① “前端工程化”初识》中，我们对“前端组件化”有了比较详细的了解。本篇，我们直接看项目的代码： ![3-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfd0decf04f5432c87cd818a102d9b94~tplv-k3u1fbpfcp-zoom-1.image) 点开 `index.js` ——这是整个程序的“**入口文件**”，我们看见 `import App from "./App"` 。在 React 中，这个 `App` 其实就是一个小的“组件”。组件 `App` 来自 `App.js` 这个文件，点开 `App.js` 文件，我们详细讲解一下 React 的“组件”是如何被定义的： ```jsx import React from 'react'; function App() { return (

hello, qdywxs.

); } export default App; ``` ❗️**注意：为了更好的学习 React 基础语法，我们将以上代码改写为（这也是之前版本官方的写法，与上边代码效果一样）：**
🔗前置知识：《面向对象编程：③ “继承”和“ ES6 模块化”》 ```jsx // ❗️请按序号依次阅读！ import React, { Component } from "react"; /* 1️⃣首先，引入 Component 基类； 1️⃣-①：注意这里的 ES6 书写方式； 1️⃣-②：至于为什么还要引入一个 React，我们后文会重点提到，这里先不用关注； */ class App extends Component { // 2️⃣通过 ES6 的语法，创建一个 App 继承 Component 这个“基类”； render() { // 3️⃣给这个“App 组件”添加一个 render 方法； return ( // 4️⃣这个 render 方法需要返回一个内容。之所以加 () ，是为了写多行“内容”； /* 5️⃣既然“组件”是页面被拆小的一部分，那么这个“内容”就是这部分需要显示的东西。即 render 方法返回什么，这个“组件”就展示什么内容！ */

hello, qdywxs.

); } } export default App; /* 6️⃣再通过 ES6 语法，将这个组件“导出”。然后又在 src 文件夹中的 index.js 文件里将这个组件引入进去； */ ``` 7️⃣回到上边的 `index.js` 文件： ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // ❗️这里将“组件”引入进来。 ReactDOM.render(, document.getElementById('root')); /* 🏆8️⃣然后通过“第三方模块 ReactDom”的方法 render，来帮助我们将一个“组件”挂载到一个 DOM 节点上。就这里的代码而言，我们是将“App 组件”挂载到 id 为 root 的 DOM 节点上。 */ ``` 9️⃣可以验证一下，“App 组件”是否真如我们分析的一样，已经挂载到 id 为 root 的 DOM 节点上了呢？返回页面，检查元素（确实已挂载）： ![3-2.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e59ff7d465443a9a7558445d08a6240~tplv-k3u1fbpfcp-zoom-1.image) 🔟但是，我们是怎么想到要把“App 组件”挂载到 id 为 root 的 DOM 节点上的呢，这个“节点”是哪里来的呢？打开 `public` 文件夹下的 `index.html` 文件——上篇文章说过，这个文件是我们项目的首页“HTML 模板”： ```html jianshu-test

``` **再回到上边第 7️⃣步的 `index.js` 文件中，回答提问：** ```jsx import React from 'react'; // ❓ // ❓❓❓以下三行代码我们都理解了其用途和整个逻辑，但上边的这一行代码又是什么意思呢，有存在的必要吗？ import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root')); ``` 答： `import React from 'react';` 这行代码必须存在，因为我们在挂载“App 组件”时： `ReactDOM.render(, document.getElementById('root'));` ，我们并没有直接写 `App` ，而是将其书写为犹如“HTML 标签”一样的形式 `` 。这种语法，我们称之为“JSX 语法”。而与之对应的，一旦你在代码中使用了“JSX 语法”，那么你就必须在代码对应的文件里引入 React—— `import React from 'react';` 以便更顺利地“编译”JSX。 **同理，我们返回 `App.js` 文件，回答提问：** ```jsx import React, { Component } from "react"; /* ❓❓❓这里引入 React 又是何意呢？乍一看，仿佛下边的代码并没有用到“JSX 语法”！ */ class App extends Component { render() { return (

hello, qdywxs.

); } } export default App; ``` 答：下边的代码也用了“JSX 语法”，所以必须引入 React。 ```jsx class App extends Component { render() { return ( // ❗️❗️❗️render 方法里的这些犹如 HTML 一样的“标签”，也是“JSX 语法”！

hello, qdywxs.

); } } ``` ## 2 JSX 语法如 `App.js` 中所见，我们使用了“JSX 语法”： ```jsx import React, { Component } from "react"; class App extends Component { render() { return ( // ❗️❗️❗️以下使用了“JSX 语法”：

hello, qdywxs.

); } } export default App; ``` 以前，我们在写这种“元素”的时候（如这里的 `

` 标签），都是在 html 文件中写的。但现在我们需要在 JS 中写一些“HTML 标签”，**在 React 中，我们把需要在 JS 中写的“HTML 标签”称之为“JSX 语法”**。 “JSX 语法”中，我们不仅能使用 HTML 中的所有标签，我们还可以用自己定义的标签。如上边的 index.js 文件中： `ReactDOM.render(, document.getElementById('root'));` 我们使用了自己定义的 `` 标签（即我们创建的“组件”名）。 “JSX 语法”将伴随我们整个 React 的学习和使用，我个人是很喜欢这种方式的，希望你也能喜欢。祝好，qdywxs ♥ you！