[JavaScript知识库]React基本使用、React脚手架的使用

目录

React概述

是什么

React的特点

React的基本使用

虚拟DOM

React的安装

React的使用

React脚手架的使用

使用react脚手架初始化项目

在脚手架中使用react

React概述

是什么

是一个用于构建用户界面的JavaScript库，旨在简化可视化界面的开发。

React是Facebook开发并于2013年发布。它基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面。React核心是组件，组件的设计提高了代码的复用率，降低了测试的难度和代码复杂度。

React的特点

声明式设计：React采用声明式范式，可以轻松描述应用。

高效：React通过对DOM的模拟,最大限度地减少与DOM的交互。

灵活：React可以与已知的库或框架很好地配合。

使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。

组件复用：通过React构建组件使得代码易于复用，组合复用多个组件可以实现完整的页面功能。

单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。

React的基本使用

虚拟DOM

React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟DOM是相对于实际DOM而言的。

在react、vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树及其层级结构，那么每次 dom 的更改就变成了对 js 对象的属性的增删改查，这样就可以避免频繁的DOM操作带来的性能下降问题。

React的安装

安装命令：npm i react react-dom

react包是核心，它提供创建元素、组件等功能；react-dom包提供DOM相关功能等。

React的使用

1、引入react和react-dom两个js文件。

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2、创建React元素

3、渲染React元素到页面中

<div id="root"></div>
<script>
    const title = React.createElement('h1', null, 'Hello React')
    ReactDOM.render(title, document.getElementById('root'))
</script>

//关于React.createElement()的说明
// 返回值：React元素
// 第一个参数：要创建的React元素名称
// 第二个参数：该React元素的属性
// 第三个及其以后的参数：该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')

//关于ReactDOM.render()的说明
// 第一个参数：要渲染的React元素
// 第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))

React脚手架的使用

react脚手架意义：create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。

使用react脚手架初始化项目

安装create-react-app? ：cnpm install -g create-react-app

创建项目： create-react-app my-app

安装包：yarn add 包名称? （也可以使用npm安装）

进入项目所在目录：cd my-app

启动项目：npm start

在脚手架中使用react

1、导入react和react-dom两个包；

import React from 'react'
import ReactDOM from 'react-dom'

2、调用React.createElement()方法创建react元素；

3、调用ReactDOM.render()方法渲染react元素到页面中。