【React基础】基本环境搭建

阅读量：625 次

发布时间：2019-03-13

本文共 1039 字，大约阅读时间需要 3 分钟。

React的基本概念及开发环境搭建

React的基本概念

React是Facebook开发的一个JS库，最初设计用于应对传统MVC框架在复杂应用中的扩展性不足的问题。它通过 declarative 的方式简化了状态管理和数据绑定，为开发者提供了更高效的开发体验。

React的特点

无模板：React不依赖于特定的模板语言，开发者可以自由选择使用哪种工具。

非MVC框架：React不是传统的MVC框架，它更注重状态管理和数据流。

响应式：React能够自动检测到数据变化并更新视图。

轻量级：React的核心库非常小，能够在任何现代浏览器中运行。

React的原理

React的核心原理是通过虚拟DOM（Virtual DOM）实现高效的 DOM操作。它将真实的DOM结构抽象为一个JS对象，通过diff算法（一种高效的差异检测算法）逐步更新只发生变化的部分。

虚拟DOM：确保只对界面上真正发生变化的部分进行实际的DOM操作。

diff算法：逐层次地比较节点，生成最小的变化集合。

这种方式大大减少了重复的DOM操作，提升了性能。

React的发布时间

React于2013年发布，由Facebook开源。

React开发环境的搭建

引入工具

React核心文件：react.js

React DOM文件：react-dom.js，通常放在react.js之后引入。

Babel：用于转换 JSX 语法为浏览器可理解的 JavaScript。

安装方法

通过 npm 包管理器安装：

npm i react --savenpm i react-dom --savenpm i @babel/standalone --save

操作步骤

初始化项目：

npm init -y

这将生成一个 package.json 文件。

引入文件到 HTML：将 react.js、react-dom.js 和 babel.js 引入到 HTML 文件中。

配置DOM根节点：

这个节点是 React渲染的入口。

使用 JSX 语法：在 script 标签中设置 type="text/babel"，并编写 JSX 代码：

const myDom = hello, world
;ReactDOM.render(myDom, document.getElementById("demoReact"));

效果展示

在浏览器中，您将看到一个简单的 "hello, world" 标题。

转载地址：http://cxjaz.baihongyu.com/

你可能感兴趣的文章

Python set([]) 如何检查两个对象是否相等?一个对象需要定义哪些方法来自定义它?

Python setup.py：数据文件无法复制目录：不存在或不是常规文件

Python setuptools sdist：仅安装版本化文件

Python Shell下使用matplotlib

Python Slice How-to，我知道Python Slice，但我怎么才能使用内置的Slice对象呢？

python socket分包发送数据

python socket模块_Python socket模块实现TCP服务端客户端

Python SOCKS5代理客户端HTTPS

Python Soc网络分析：通过使用函数迭代列表来计算机会网络

python转换已转义的字符串

Python Sphinx自动摘要：成员函数的自动列表

Python SQL和NoSQL数据库操作实战

python stdout flush_sys.stdout.flush（）方法的用法

python string 运算

Python str与bytes之间的转换

Python subprocess ffmpeg

python subprocess Permission denied Errno 13

Python subprocess.call - 将变量添加到 subprocess.call

Python Subprocess.Popen 从一个线程

Python subprocess.Popen 作为 Windows 上的不同用户