React学习笔记

React学习笔记目录

React学习笔记

---

前言

本人由b站观看尚硅谷2021版React技术全家桶全套完整版 整理而成，不得不说张天禹老师讲的非常非常非常的好，想要学习react的话强烈推荐：
链接: link.

一、React简介？

1.1官网

1. 英文官网: https://reactjs.org/
2. 中文官网: https://react.docschina.org/

注：个人觉得官方文档可以当词典一样使用在自己哪个概念不清晰或其他不懂的地方看可以跟加深自己的印象

1.2.介绍描述

(1) React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库(只关注于视图)
(2) 由Facebook开源

1.3. React的特点

(1) 声明式编码
(2) 组件化编码
(3) React Native 编写原生应用
(4) 高效（优秀的Diffing算法）

1.4. React高效的原因

(1) 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
(2) DOM Diffing算法, 最小化页面重绘

二、React基本使用

1.引入

1.1外部引入react所需js文件（不推荐）

// 引入react核心库
<script type="text/javascript" src="/react.development.js"></script>
//引入react-dom，用于支持react操作DOM
<script type="text/javascript" src="/react-dom.development.js"></script>
//引入babel，用于将jsx转为js
<script type="text/javascript" src="/babel.min.js"></script>

1.2搭建本地开发环境（搭建脚手架）

(1) 确保你安装了较新版本的 Node.js。
(2)

	npx create-react-app my-app
	cd my-app
	npm start

注：第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

2.相关的js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库

3. 虚拟DOM与真实DOM

1. React提供了一些API来创建一种 “特别” 的一般js对象
    const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
    上面创建的就是一个简单的虚拟DOM对象
2. 虚拟DOM对象最终都会被React转换为真实的DOM
3. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

渲染虚拟DOM(元素)

1. 语法: ReactDOM.render(virtualDOM, containerDOM)
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明
   (1) 参数一: 纯js或jsx创建的虚拟dom对象
   (2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

4. JSX

1. 全称: JavaScript XML
2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
3. 作用: 用来简化创建虚拟DOM
   (1) 写法：var ele =

   Hello JSX!

   
   (2) 注意1：它不是字符串, 也不是HTML/XML标签
   (3) 注意2：它最终产生的就是一个JS对象
4. 标签名任意: HTML标签或其它标签
5. 标签属性任意: HTML标签属性或其它
6. babel.js的作用

1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

JSX语法规则

1.定义（创建）虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={ {key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
注：一定注意区分：【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

三、模块和组件

1.模块与组件

1.1 模块

(1) 理解：向外提供特定功能的js程序, 一般就是一个js文件
(2) 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
(3) 作用：复用js, 简化js的编写, 提高js运行效率

1.2 组件

(1) 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
(2) 为什么要用组件： 一个界面的功能更复杂
(3) 作用：复用编码, 简化项目编码, 提高运行效率

2.模块化与组件化

2.1 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

2.2 组件化

当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

3.React中定义组件

3.1 函数式(声明)组件

例：//1.创建函数式组件
		function MyComponent(){
			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

3.2 类式组件

//1.创建类式组件
		class MyComponent extends React.Component {
			render(){
				//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
				//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
				console.log('render中的this:',this);
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

注：1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

3.3 渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM, 并解析为真实DOM
3. 插入到指定的页面元素内部

4.组件实例三大属性之一：state(重点）

4.1 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

4.2注意

(1) 组件中render方法中的this为组件实例对象
(2) 组件自定义的方法中this为undefined，如何解决？

(a)	强制绑定this: 通过函数对象的bind()
(b)	箭头函数

(3). 状态数据，不能直接修改或更新

4.3代码示例

//1.创建组件
		class Weather extends React.Component{
			//构造器调用几次？ ———— 1次
			constructor(props){
				console.log('constructor');
				super(props)
				//初始化状态
				this.state = {isHot:false,wind:'微风'}
				//解决changeWeather中this指向问题,也可以在调用出直接使用
				this.changeWeather = this.changeWeather.bind(this)
			}
			//render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
			render(){
				console.log('render');
				//读取状态
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}
			//changeWeather调用几次？ ———— 点几次调几次
			changeWeather(){
				//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
				//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
				//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
				console.log('changeWeather');
				//获取原来的isHot值
				const isHot = this.state.isHot
				//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
				this.setState({isHot:!isHot})
				console.log(this);

				//严重注意：状态(state)不可直接更改&#