从原生JavaScript到React深入理解


Posted in Javascript onJuly 23, 2022

从头开始理解 React

作者:Stéphane Bégaudeau

翻译原文 https://www.sbegaudeau.com/2018/10/01/from-vanilla-javascript-to-react.html

React 是一个用于构建用户界面的 JavaScript 框架。它可用于通过动态操作页面内容来创建 JavaScript 应用程序。浏览器已经提供了在页面中创建元素的 API,即 DOM,所以新手可能想知道 React 带来了什么以及它与 DOM 的关系。

原生 JavaScript 和 DOM

在 JavaScript 中,就像在大多数编程语言中一样,您将可以访问具有各种对象和函数的全局范围,您可以操纵这些对象和函数来构建您的应用程序。在 Web 环境中运行的 JavaScript 应用程序中,您将有权访问文档对象模型 (DOM) API。如果您在基于节点的应用程序中使用 JavaScript,您将无法访问 DOM,但您可以导入替代实现,例如JSDOM。

DOM 是一个简单的 API,可让您以几乎任何您想要的方式操作页面的 HTML 文档。由于全局document 对象,您可以开始使用它。

从 document 这里开始,您可以轻松地创建新元素、修改它们的属性,甚至将它们添加为其他元素的子元素。多亏了 DOM,您可以通过编程方式创建任何 HTML 文档,即使这样做会非常冗长。

在下面的示例中,我们将以编程方式在 HTML 文档中创建一个简单的标题。

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

为此,我们将创建一个h1元素,该元素将插入到 HTML 页面的正文中。

// The document object is accessible since it is in the global scope
const h1Element = document.createElement('h1');
h1Element.setAttribute('class', 'title');
const textElement = document.createTextNode('I am Groot');
h1Element.appendChild(textElement);
// document.getElementById('app') will retrieve the div with the identifier app
document.getElementById('app').appendChild(element);

上面的代码首先创建一个新属性,然后向该元素h1添加一个class带有值为title的新属性。 它还创建一个简单的文本节点并将文本 'I am Groot' 添加为元素h1的子元素。最后,它使用 HTML 文档将 h1 的标签添加到 div 中。app 执行此代码后,生成的 HTML 文档将如下所示:

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 class="title">I am Groot</h1>
    </div>
  </body>
</html>

借助 DOM,我们还可以通过 className 属性直接操作元素的类属性(因为名称 class 是 JavaScript 中的保留关键字)。因此,以下代码将产生完全相同的结果。

const h1Element = document.createElement('h1');
// h1Element.setAttribute('class', 'title');
h1Element.className = 'title';
const textElement = document.createTextNode('I am Groot');
h1Element.appendChild(textElement);
document.getElementById('app').appendChild(element);

React 的基础

大多数 React 教程会让你从直接使用 React 的所有奇迹开始。我们将采用另一种方法,因为我们将从编写一些你可能永远不会再编写的 React 代码开始,以便更好地理解 React 的工作方式。

React 的创建考虑了 Web 应用场景,因此,在其核心,它的一些 API 感觉就像 DOM。为了说明这一点,我们将看一下最重要的 React API 之一,React.createElement.

要使用 React 操作 DOM,您将需要两个依赖项 React 和 ReactDOM. React.createElement将让您创建一个廉价且快速的数据结构,称为虚拟 DOM,代表您的用户界面的结构。ReactDOM将在您的 Web 应用程序的真实 DOM 中呈现这个虚拟 DOM。

React.createElement将需要三个参数来创建虚拟 DOM 的元素:

  • 要创建的元素的名称
  • 它的属性
  • 它的孩子
import React from 'react';
const name = 'h1';
const props = { className: 'title' };
const children = 'I am Groot';
const element = React.createElement(name, props, children);

React.createElement 也可以接受包含要创建的元素的所有子元素的数组。

import React from 'react';
const name = 'h1';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement(name, props, children);

参数 children 也是元素的常规属性,因此它可以是 props 对象的一部分。

import React from 'react';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = React.createElement('h1', props);

为了在 DOM 中渲染这个元素,我们需要选择它在 DOM 中的渲染位置,在我们的例子中是div带有标识符app并告诉 ReactDOM 渲染它。

import React from 'react';
import ReactDOM from 'react-dom';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = React.createElement('h1', ...props);
ReactDOM.render(element, document.getElementById('app'));

此处显示的所有代码示例都可以通过将它们与未打包版本的 React 和 Babel 一起使用来进行测试。这样的配置应该只用于简单的测试,因为它们没有像生产构建那样优化。在这种特定情况下,应删除 和 的导入(此处均作为全局变量公开react)。react-dom

<!DOCTYPE html>
<html>
  <head>
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
    const props = {
      className: 'title',
      children: ['I am Groot']
    };
    const element = React.createElement('h1', props);
    ReactDOM.render(element, document.getElementById('app'));
    </script>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

咱老百姓也能学会的 JSX

虽然我们可以使用这种方法创建 Web 应用程序的所有页面,但它仍然非常冗长。为了使操作 DOM 变得容易,React 提供了一种名为JSX的简单而强大的语言。

预处理器使用 JSX 在构建期间将其转换为常规 JavaScript。一个常规的 React 项目使用预处理器来将 JSX 代码转换为对 React.createElement. 因此,JSX 永远不会被 React 直接解释,你可以在没有一行 JSX 的情况下使用 React。因此,下面的两段代码完全相同。首先,以编程方式使用 React:

import React from 'react';
const props = { className: 'title' };
const children = ['I am Groot'];
const element = React.createElement('h1', props, children);

或使用 JSX 声明:

import React from 'react';
const element = &lt;h1 className="title"&gt;I am Groot&lt;/h1&gt;;

由于 JSX 代码将使用 转换为调用 React.createElement,因此您需要导入 React,即使它似乎没有被使用。

使用 JSX,您可以非常快速地以声明方式创建大部分 DOM,而 React 只会看到对React.createElement. 由于 JSX 元素只是对 的调用 React.createElement,因此 children 仍然是常规属性。因此,您也可以像这样编写前面的示例:

import React from 'react';
const element = &lt;h1 className="title" children="I am Groot"/&gt;;

借助 JSX,您可以通过花括号访问变量:

import React from 'react';
const title = 'title';
const text = 'I am Groot';
const element = &lt;h1 className={title} children={text}/&gt;;

当然,我们也可以将变量命名为我们想要操作的属性

import React from 'react';
const className = 'title';
const children = 'I am Groot';
const element = &lt;h1 className={className} children={children}/&gt;;

这将允许我们使用扩展语法来获得更简洁的代码

import React from 'react';
const props = {
  className: 'title',
  children: ['I am Groot']
};
const element = &lt;h1 {...props}/&gt;;

最后,我们可以像以前一样在 DOM 中渲染这个元素 React.createElement。

import React from 'react';
import ReactDOM from 'react-dom';
const props = {
  className: 'title',
  children: ['I am Groot']
};
ReactDOM.render(&lt;h1 {...props}/&gt;, document.getElementById('app'));

现在我们已经使用 JSX 通过 React 渲染了我们的第一块虚拟 DOM,我们准备好看看如何使用 React 构建一个基本的应用程序。

奔跑吧,去用 React 组件开发更多动态代码。

以上就是从原生JavaScript到React深入理解的详细内容,更多关于原生JavaScript到React的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
angular简介和其特点介绍
Jan 29 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 #Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 #Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 #Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 #Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 #Javascript
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
You might like
php字符串操作针对负值的判断分析
2016/07/28 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
javascript this详细介绍
2016/09/19 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
简单了解django文件下载方式
2020/02/10 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
实习自我评价怎么写
2013/12/02 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技