React JS 学习(一) React 介绍
由于文章较长, 如果你没有耐着性子看完, 可以直接去 React 官网, 官方文档是英文的, 也有中文的, React 中文文档, 不过版本较低.
进入 React 的世界
React 是什么?
- React 是由 FaceBook 出品的JavaScript 框架. 用于创建交互式用户界面.
- React 由于运用了 Virtual Dom 技术, Reactjs 在调用 setState 的时候会先更新 virtual dom , 然后和实际 dom 比较, 如果有新的数据, 则更新实际 dom.
- 这种设计思路, 使得更新 dom 的次数少, 更新的内容少, 性能相对会更好.
- React 通过 jsx 生成系统原生的UI, 由于 iOS 和 Android 的 UI 组件相似, 可以通过复用大部分的UI, 维护 UI 的状态.
- 可用于Web程序, App, 命令行工具.
为什么学习React?
如果你需要借助 React Native 来开发跨平台的 App, 那么你就需要学习 React. RN 是 React 的扩展, 专门用来开发 App 的.
在 2018 年的 StackOverflow 开发者调查中, 我们可以发现
Node.js 和 AngularJS 仍然是此类别中最常用的技术(Web 开发)，React 和 .Net Core 对许多开发人员也很重要.
TensorFlow 是 Stack Overflow 上发展最快的技术之一, React 也是开发者比较愿意使用的框架.
如果你想了解历年来在 Stack Overflow 上的开发者调查, 可以看这里. 有意思的是, 在2018年参与调查的开发者中, India 占 13.95%, China 占 1.05 %. 我好像没参加.
使用 React
准备开发环境
官方提供的工具 create-react-app , 用于构建 web app.
通过这个工具, 我们可以学习 React 的使用.
- 安装Node, JS运行环境
brew install node
检查node版本, create-react-app 的运行需要至少6.0版本
node -v
- 安装create-react-app
npm install create-react-app -g
带-g 是全局安装
- 创建项目 (由于 npm 的命名规则, 所以项目名不能有大写. - . -)
create-react-app test-project
创建完成后, 通过进入工程目录下, 查看配置文件
cat package.json
可以看到一些依赖的文件, 和快速运行, 调试的脚本
在依赖库中, react 是 React 的核心库, react-dom 提供与 DOM 相关的功能, react-scripts 则是用于快速执行脚本.
- 启动项目(yarn是npm的优化版本)
yarn start
此时会构建一个本地服务器, 并自动打开浏览器.
image.png
- 创建第一个组件
import React, {Component} from 'react';
class Welcome extends Component {
render() {
return <h1> Hello, World! </h1>
}
}
export default Welcome
将新创建的组件加入到我们的主页面中.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './Welcome'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<Welcome />
</header>
</div>
);
}
}
export default App;
- 在当前项目根目录执行以下命令, 运行代码.
yarn start
最终效果
image.png
到这里, 我们已经运行起来了一个 HelloWorld 项目.
React 工作原理
在上面我们展示了如何运行一个 React 项目, 下面我们来聊一下其内部的工作原理.
在 官方文档 中, 我们可以下载一段 Helloworld 代码, 用来简单演示如何将 React 添加到 Website 中. 下载完毕后, 在本地创建一个 html 文件, 直接用浏览器打开即可.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</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>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
-
代码中使用了三段 JS ,
react.development.js是 React 开发版核心代码,react-dom.development.js是处理 Dom 相关功能,babel.min.js用于处理将 JSX 转化为标准的 JavaScript 代码. -
这是一段 HTML 代码, 有一点不同的是, 在 JavaScript 代码里写着类似 XML 格式的代码, 我们称之为 JSX. 比如
<h1>Hello, world!</h1>, 由于用了<script type="text/babel">标签, 会通过 Babel 编译器转换成标准的 JavaScript 代码. -
ReactDOM.render 用于将模板转为 HTML 语言，并插入指定的 DOM 节点.
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
上述代码的作用是将 <h1>Hello, world!</h1> 插入到元素 id 为 root 的容器中.
既然 JSX 代码会被 Babel 编译器转成 JavaScript 代码, 那么我们可以将转化后的代码直接利用起来, 在 Babel 的在线编译工具上可以查看 JSX 被转化后的代码.
为了让效果更明显, 我们多添加几个标签
使用 JSX
ReactDom.render(
<div>
<div>
<div>Hello, world!</div>
</div>
</div>,
document.getElementById('root')
);
Babel 转化后
ReactDom.render(
React.createElement(
'div',
null,
React.createElement(
'div',
null,
React.createElement(
'div',
null,
'Hello, world!'
)
)
), document.getElementById('example')
);
转化后的代码中有一些 null, 这些其实是因为没有设置 className 这些属性.
再回头看我们开始创建的 React App 项目.
在项目的入口, src/index.js 文件中.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
其实就执行了一个方法.
ReactDOM.render(<App />, document.getElementById('root'));
App 是我们创建的 React 组件, document 是文件对象, 通过 getElementByIdReact 方法获取到根节点.
ReactDOM.render 将组件添加到 Dom 节点上, 然后渲染显示内部的内容.
这就是一个网页.
后记
本篇文章说了很多次 Dom, 那么Dom 究竟是什么. 更准确点, 我们在这里讨论的是 HTML DOM.
DOM, Document Object Model, 即文档对象模型. 它是 W3C (万维网联盟）的标准.
W3C 文档对象模型 (DOM) 是中立于平台和语言的接口, 它允许程序和脚本动态地访问和更新文档的内容, 结构和样式.
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型.
- XML DOM - 针对 XML 文档的标准模型.
- HTML DOM - 针对 HTML 文档的标准模型.
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法.
