共计 4826 个字符,预计需要花费 13 分钟才能阅读完成。
从头开始了解 React
作者:Stéphane Bégaudeau 于 2018 年 10 月 1 日
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 组件开发更多动静代码。