从原生JavaScript到React深入理解
目录
- 从头开始理解 React
- 原生 JavaScript 和 DOM
- React 的基础
- 咱老百姓也能学会的 JSX
从头开始理解 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 = <h1 className="title">I am Groot</h1>;
由于 JSX 代码将使用 转换为调用 React.createElement，因此您需要导入 React，即使它似乎没有被使用。
使用 JSX，您可以非常快速地以声明方式创建大部分 DOM，而 React 只会看到对React.createElement. 由于 JSX 元素只是对 的调用 React.createElement，因此 children 仍然是常规属性。因此，您也可以像这样编写前面的示例：
import React from 'react'; const element = <h1 className="title" children="I am Groot"/>;
借助 JSX，您可以通过花括号访问变量：
import React from 'react';
const title = 'title';
const text = 'I am Groot';
const element = <h1 className={title} children={text}/>;
当然，我们也可以将变量命名为我们想要操作的属性
import React from 'react';
const className = 'title';
const children = 'I am Groot';
const element = <h1 className={className} children={children}/>;
这将允许我们使用扩展语法来获得更简洁的代码
import React from 'react';
const props = {
className: 'title',
children: ['I am Groot']
};
const element = <h1 {...props}/>;
最后，我们可以像以前一样在 DOM 中渲染这个元素 React.createElement。
import React from 'react';
import ReactDOM from 'react-dom';
const props = {
className: 'title',
children: ['I am Groot']
};
ReactDOM.render(<h1 {...props}/>, document.getElementById('app'));
现在我们已经使用 JSX 通过 React 渲染了我们的第一块虚拟 DOM，我们准备好看看如何使用 React 构建一个基本的应用程序。
奔跑吧，去用 React 组件开发更多动态代码。
以上就是从原生JavaScript到React深入理解的详细内容，更多关于原生JavaScript到React的资料请关注我们其它相关文章！
相关推荐
-
Android React Native原生模块与JS模块通信的方法总结
Android React Native原生模块与JS模块通信的方法总结 前言: 在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式. 方式一:通过Callbacks的方式 说起Callbacks大家都不陌生,它是最常用的设计模式之一.无论是Java,Object-c,C#,还是JavaScript等都会看到Callbacks的身影. 原生模块支持Callbacks类型的参数,该Callbacks对应JS中的f
-
深入理解React Native原生模块与JS模块通信的几种方式
每种语言都有自己的设计理念.语法.运行环境,这也导致了不同语言间相互交流通信时必须要有中介来翻译,如JAVA与C/C++通过JNI来交流.OC与C/C++需要在.mm文件混编.而JAVA/OC与Lua通信时需要通过C/C++语言来做中介.那么在React-Native中JSX是如何与底层模块进行通信的呢?这里主要以iOS系统来做说明. 原理 通信本质上是信息的交流,具体到计算机语言则是数据的流动.应用中数据在React-Native与原生模块间的流动与共享,完成了与用户的交互,达成了应用的目标.
-
ReactNative-JS 调用原生方法实例代码
第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule
-
再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘
-
React Native JSI实现RN与原生通信的示例代码
目录 什么是JSI JSI有什么不同 在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法 原生调用JS 原生调用带参数的JS方法 在原生端调用js的函数参数 总结 问题 参考资料 什么是JSI React Native JSI (JavaScript Interface) 可以使 JavaScript 和 原生模块 更快.更简单的通信.它也是React Native 新的架构体系中Fabric UI层 和 Turbo 模块的核心部分. JSI有什么不同 JSI 移除了原生代
-
基于React.js实现原生js拖拽效果引发的思考
一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置
-
从原生JavaScript到React深入理解
目录 从头开始理解 React 原生 JavaScript 和 DOM React 的基础 咱老百姓也能学会的 JSX 从头开始理解 React 作者:Stéphane Bégaudeau 翻译原文 https://www.sbegaudeau.com/2018/10/01/from-vanilla-javascript-to-react.html React 是一个用于构建用户界面的 JavaScript 框架.它可用于通过动态操作页面内容来创建 JavaScript 应用程序.浏览器已经提供
-
原生javascript模仿win8等待提示圆圈进度条
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数
-
如何制作自己的原生JavaScript路由
前言 当你想到路由时,通常会想到类似react之类的库.但实际上,这些库和框架仍然使用vanillaJavaScript.那么该怎么实现呢? 我希望这个"JavaScript路由教程"能够帮你了解如何用原生js写出自己的路由. 简介 我遇到了很多出于各种原因想要自己创建路由的人.既然你看到本文,那意味着你可能也是其中的一个! 最重要的是,使用vanillajsrouter可以减少你对框架的依赖. 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己
-
原生Javascript实现继承方式及其优缺点详解
目录 前言 原型继承 优点 构造函数继承 优点 缺点 组合式继承 寄生式组合继承 总结 前言 最近在复习javascript的一些基础知识,为开启新的征程做准备.所以开始记录一些自己学习的内容. 那今天的主题是 js的原生继承方式 废话少说,上代码! 首先是我们的父类代码. 在这里我们创建一个Person的类作为父类,它的构造函数需要2个参数name和age. 然后我们在它的原型上添加一个sayHi的方法. //父类 function Person (name, age) { this.name
-
原生javascript实现文件异步上传的实例讲解
效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>
-
原生javascript实现的全屏滚动功能示例
本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num
-
javascript基础语法——全面理解变量和标识符
关于javascript,第一个比较重要的概念是变量,变量的工作机制是javascript的基本特性.实际上,变量是标识符的一种.本文将详细介绍变量和标识符 定义 标识符(Identifier)就是一个名字,用来对变量.函数.属性.参数进行命名,或者用做某些循环语句中的跳转位置的标记 //变量 var Identifier = 123; //属性 (new Object).Identifier = 'test'; //函数及参数 function IdentifierName(Identifie
-
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF
-
原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据
-
原生Javascript和jQuery做轮播图简单例子
接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较. jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮