2021-07-19 react的基础知识

---

一、react概述

react是什么？
react主要是用来编写HTML页面，或构建web应用
从MVC角度来看，react仅仅是视图层（V），并非提供了完整的M和C的功能
特点：
  1. 声明式
  react负责渲染UI，并在数据变化时更新UI。react相当于编写HTML代码，所以声明一个react元素代码如下：

const jsx = 
	<div>
		<h1>Hello World 动态数据变化：{count}</h1>
	</div>

  2.基于组件
  可以说，react中最重要的就是组件，我们学习react就是为了学习react的组件。在下图中，每一个框就是一个组件，我们复用这些组件并将它们渲染到页面上，就构成了一个完整的页面

  3.学习一次，随处使用
  意思就是我们学会之后，不仅可以开发web应用，还可以开发移动端应用，就像Android和iOS的APP，甚至于可以运用到VR应用中

二、react的基本使用

1.react的安装

安装命令：npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能等

2.react的使用

安装完成react和react-dom两个js包之后，我们可以看到目录中依赖已经装好，而且在package.json文件中可以看到两个文件的版本号，接下来我们就可以在项目中使用文件，让我们打开index.html文件进行操作

第一步：引入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>

第二步：创建react元素
创建元素是我们用到的是React.createElement()方法，该方法的参数：
  第一个参数：创建元素的名称，例如：h1、p等
  第二个参数：元素的属性，可为null值，例如：title、class等
  第三个及其以后参数：元素的子节点

<script>
const title = React.createElement('h1',null,'Hello World!')
</script>

第三步：渲染react元素到页面中
渲染页面用到的方法是ReactDOM.render()方法，该方法的参数是：
  第一个参数：要渲染的react元素
  第二个参数：挂载点

<!-- 挂载点 -->
<div id="root"></div>
<!-- 引入js文件 -->
<!-- 注意引入顺序，先引入react、再引入react-dom -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 创建react元素
const title = React.createElement('h1',null,'Hello World!')
// 将react元素渲染到页面
ReactDOM.render(title,document.getElementById('root'))
</script>

三、react脚手架

1.初始化项目

命令：npx create-react-app my-app
my-app是项目名称

2.启动项目

命令：npm start

3.在脚手架中使用react

第一步：导入react和react-dom两个js文件
  打开项目中src目录下的index.js文件

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

第二步：创建一个react对象

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建react元素
const title = React.createElement('h1',null,"HelloWorld")

第三步：将react元素渲染到页面上

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建react元素
const title = React.createElement('h1',null,"HelloWorld")

// 渲染react元素
ReactDOM.render(title.document.getElementById('root'))

因为脚手架的index.html文件中已经自动创建了root，所以我们不必自己去创建

四、JSX

1.createElement的问题

缺点：
  --繁琐不简洁
  --不直观，无法一眼看出来所描述的结构
  --不优雅，用户体验不爽

const title = React.createElement('h1',null,
	React.createElement('p',null,
		React.createElement('span',null,'Hello'))
)

如以上代码，蹭蹭嵌套，及其繁琐，所以就有了JSX

2.JSX简介

JSX是JavaScript的简写，表示在JavaScript代码中写HTML格式的代码
优势：
  声明式语法更加直观
  与HTML结构相同
  降低了学习成本
  提升了开发效率

3.使用步骤

第一步：使用JSX语法创建react元素

const title = <h1>HelloWorld</h1>

第二步：使用ReactDOM.render()方法渲染react元素到页面中（上述已经写过，自行查看）

4.注意

- react元素的属性名使用驼峰命名法
- 特殊属性名：class→className、for→htmlFor、tabindex→tabIndex

const title = <h1 class='title'>HelloWorld</h1>

使用上述代码，将会报如下图的错误
根据错误我们就可以看出来，我们的属性名不应该这么写，正确应如下：

const title = <h1 className='title'>HelloWorld</h1>

- 没有子节点的react元素可以用(/>)结束

const title = <h1 className='aaa'>HelloWorld<span /></h1>

当我们将span以/>结尾时，并不会报错，当我们查看结构时，也是有span这个标签的

- 推荐使用小括号包裹JSX，从而避免js中的自动插入分号陷阱

const title = (<h1 className='aaa'>HelloWorld<span /></h1>)

5.嵌入js表达式

const name = 'jack'
const dv = (
  <div>你好，我叫：？？？</div>
)

如上述代码，如果我们要让name显示在三个问号的位置，我们应该怎么做？
这时候就需要了解语法{JavaScript表达式}
这时候我们只需要将上述代码改变成<div>你好，我叫：{name}</div>
注意：在vue当中，我们的数据渲染使用的是{{}}，但是在这里我们使用的是{}

6.条件渲染

条件渲染，无非就是，在某个元素满足一个条件时，进行一部分操作，不满足这个条件时，进行另一部分操作，就相当于if/else逻辑，让我们在代码中看一下

const isLoading = true
const loadData = () => {
	if(isLoading){
		return <div>loading</div>
	}
	return <div>数据加载完成</div>
}
const title = (
	<h1>
		条件渲染：
		{loadData()}
	</h1>
)
ReactDOM.render(title.document.getElementById('root'))

当isLoading为true时，页面上渲染的就是loading，当isLoading为false时，页面上渲染的就是数据加载完成
当然，既然有if/else，当然也会有三元运算符，他跟if/else的效果是相同的

const loadData = () => {
	return isLoading ? (<h1>loading</h1>) : (<h1>数据加载完成</h1>)
}

还有一个就是逻辑与运算符，但是逻辑与运算符中，他不会像if/else和三元运算符一样满足条件显示loading，不满足条件显示其他，逻辑与运算法数据逻辑中断，只能控制满足条件显示，不满足条件不显示

const loadData = () => {
	return isLoading && (<h1>满足条件</h1>)
}

7.列表渲染

列表渲染时主要使用map()方法来遍历数组
在ul中遍历list数组的每一项，将每一项的名字通过li标签展示出来

const list = [
	{id:1,name:'aaa'},
	{id:2,name:'bbb'},
	{id:3,name:'ccc'},
]
const title = (
	<ul>
		{list.map(item => <li>{item.name}</li>)}
	</ul>
)
ReactDOM.render(title.document.getElementById('root'))

此时的代码，会将数组每一项中的name展示出来，但是控制台会报错，如下图
这个错误的原因是因为我们遍历时没有key值，我们应该添加一个key值，而且保证key的值是唯一的，注意：map()遍历谁，就给谁添加key值，所以将上述代码改为：

{list.map(item => <li key={item.id}>{item.name}</li>)}

8.样式处理

样式处理主要分为：
  行内样式——style
  类名——className

// 行内样式
const title = (
	<h1 style={{color:'red',backgroundColor:'skyBlue'}}>
		HelloWorld
	</h1>
)
// 外层花括号：因为使用的是JSX语法，JSX语法中嵌入任何js变量、表达式、对象都要用花括号{}扩起来
// 内层花括号：JSX如果用到行内样式时，这个行内样式必须是一个js对象，即{color:'red',backgroundColor:'skyBlue'}是一个对象，所以用花括号{}扩起来。
// 类名
const title = (
	<h1 className="title">
		HelloWorld
	</h1>
)
// 使用类名时，需要将相应的css文件导入进来

哦吼~