React 基础知识

React 基础

一、 React概述

1.1 什么是React

React是一个用于构建用户界面的JavaScript库.
用户界面: HTML页面(前端)
React主要用来写HTML页面,或构建Web应用
如果从MVC的角度来看. React仅仅是视图层(V) , 也就是只负责视图的渲染,而并非提供了
完整的M和C的功能。
React起源于Facebook的内部项目,用来架设Instagram的网站，并于2013年5月开源

1.2 react 的特点

1.声明式

你只需要描述UI ( HTML )看起来是什么样.就跟写HTML一样
React负责渲染UI。并在数据变化时更新UI

const jsx = <div>
<h1>Hello React! 动态数据：{count}</h1>
</div>

2.基于组件

• 组件是React最重要的内容
• 组件表示页面中的部分内容
• 组合、复用多个组件,可以实现完整的页面功能

3. 使用

• 使用React可以开发Web应用
• 使用React可以开发移动端原生应用( react-native )
• 使用React可以开发VR(虚拟现实)应用(react360)

二、 React基本使用

2.1 React的安装

安装命令： npm i react react-dom

• react包是核心,提供创建元素、组件等功能
• react-dom包提供DOM相关功能等

2.2 React的使用

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

 <!-- 1 引入js文件 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

1. 创建 React 元素
2. 渲染React元素到页面中

<div id="root"></div>
<script>
    // 2 创建react元素
    // 参数一：元素名称
    // 参数二：元素属性
    // 参数三：元素的子节点
    const title = React.createElement('h1', null, 'Hello React')

    // 3 渲染react元素
    // 参数一：要渲染的react元素
    // 参数二：挂载点
    ReactDOM.render(title, document.getElementById('root'))
  </script>

2.3 方法说明

• 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脚手架的使用

3.1 React脚手架意义

1. 脚手架是开发现代Web应用的必备。
2. 充分利用Webpack. Babel. ESLint 等工具辅助项目开发。
3. 零配置,无需手动配置繁琐的工具即可使用。
4. 关注业务,而不是工具配置。

3.2 使用React脚手架初始化项目

1. 初始化项目，命令：npx create-react-app my-app

1. npx命令介绍

• npm v5.2.0引入的一条命令
• 目的：提升包内提供的命令工具的使用体验
• 原来：先安装脚手架包，再使用这个包中提供的命令
• 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

3.3 在脚手架中使用React

1. 导入react和react-dom两个包

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

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

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

React基础总结

1. React是构建用户 界面的JavaScript库。
2. 使用react时.推荐使用脚手架方式。
3. 初始化项目命令: npx create-react-app my-app。
4. 启动项目命令: yarnstart (或npm start) 。
5. React.createElement0 方法用于创建react元素(知道)。
6. ReactDOM.render0 方法负责渲染react元素到页面中。

四、 JSX的基本使用

4.1 create Element()的问题

1. 繁琐不简洁
2. 不直观,无法一眼看出所描述的结构
3. 不优雅，用户体验不爽

JSX

4.2 JSX简介

JSX是JavaScript XML的简写，表示JavaScript代码中写XML（XTML）格式的代码

优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

4.3 使用步骤

1. 使用JSX语法创建react元素

// 使用JSX语法,创建react元素
const title = <h1>Hello JSX</h1>

1. 使用ReactDOM.render()方法渲染react元素到页面中

// 渲染创建好的React元素
ReactDOM.render(title,root)

小结

1. 推荐使用JSX语法创建React元素
2. 写JSX就跟写HTML一样，更加直观、友好
3. JSX语法更能体现React的声明式特点（描述UI长什么样子）
4. 使用步骤：

// 1 使用JSX创建react元素
const title = <h1>Hello JSX<h1/>
// 2 渲染创建react元素
ReactDOM.render(title,root)

为什么脚手架中可以使用JSX语法？

1. JSX不是标准的 ECMAScript语法.它是ECMAScript的语法扩展。
2. 需要使用babel编译处理后,才能在浏览器环境中使用。
3. create-react: app脚手架中已经默认有该配置,无需手动配置。
4. 编译JSX语法的包为: @babel/preset-react。

4.4 注意点

1. React元素的属性名使用驼峰命名法
2. 特殊属性名 : class -> className. for -> htmlFor. tabindex -> tablndex.
3. 没有子节点的React元素可以用/> 结束。
4. 推荐:使用小括号包裹JSX , 从而避免JS中的自动插入分号陷阱。

// 使用小括号包裹 JSX
const dv = (
	<div>Hello JSX</div>
)

4.5 JSX中使用JavaScript表达式

嵌入JS表达式

• 数据存储在JS中
• 语法：{JavaScript表达式}
• 注意：语法中是单大括号，不是双大括号

const name = 'Jack'
const dv = (
	<div>你好，我叫:???</div>
)
const name = 'Jack'
const dv = (
	<div>你好,我叫:{name}</div>
)

五、React组件

5.1 组件介绍

• 组件是React的一等公民，使用React就是在用组件
• 组件表示页面中的部分功能
• 组合多个组件实现完整的页面功能
• 特点：可复用、独立、可组合

5.2 组件的两种创建方式

1. 使用函数创建组件

• 函数组件：使用JS的函数(或箭头函数)创建的组件
• 约定1：函数名必须以大写字母开头
• 约定2：函数组件必须有返回值，表示该组件的结构
• 如果返回值为null，表示不渲染任何内容
• 使用函数名作为组件标签名

function Hello() {
	return(
		<div>这是我的第一个函数组件!</div>
	)
}
ReactDOM.render(<Hello />, document.querySelector('#root'))

2. 使用类创建组件

• 类组件：使用Es6的class创建的组件
• 约定1：类名称也必须以大写字母开头
• 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法和属性
• 约定3：类组件必须提供render()方法
• 约定4：render()方法必须有返回值,表示该组件的结构

class Hello extends React.Component {
	render() {
	return <div>Hello Class Component!</div>
	}
}
ReactDOM.render(<Hello />,document.querySelector('#root'))

3. 抽离为独立JS文件

1. 创建Hello.js
2. 在Hello.js中导入React
3. 创建组件(函数或类)
4. 在Hello.js中导出该组件
5. 在index.js中导入Hello组件
6. 渲染组件

// index.js
import Hello from './Hello'
// 渲染导入的Hello组件
ReactDom.render(<Hello />, document.querySelector('#root'))

// Hello.js
import React from 'react'
class Hello extends React.Component {
	render() {
	return <div>Hello class Component!</div>
	}
}
// 导出Hello组件
export default Hello

5.3 事件处理

1. 事件绑定

• React事件绑定语法DOM事件语法相似
• 语法：on+事件名称=（事件处理程序）,比如：onClick={()=>{}}
• 注意：React事件采用驼峰命名法,比如：onMouseEnter、onFocus

六、组件的生命周期

6.1 组件的生命周期概述

• 意义:组件的生命周期有助于理解组件的运行方式。完成更复杂的组件功能、分析组件错误原因等
• 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
• 生命周期的每个阶段总是伴随着-些方法调用 ,这些方法就是生命周期的钩子函数。
• 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
• 只有类组件才有生命周期。

6.2 生命周期的三个阶段

1. 创建时(挂载阶段)

• 执行时机：组件创建时(页面加载时)
• 执行顺序

2. 更新时(更新阶段)

• 执行时机:1.setstate() 2.forceUpdate() 3. 组件接受到新的props
• 说明: 以上三者任意一种变化,组件就会重新渲染
• 执行顺序

3. 卸载时(卸载阶段)

• 执行时机