[JavaScript知识库] React学习资料整理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React学习资料整理 -> 正文阅读

[JavaScript知识库]React学习资料整理

1.react的简单使用

<!DOCTYPE html>
<html lang=en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<title>React的简单使用</title>
	<body>
	 	<div id="root"></div>
	 	<script type="text/babel">
	 	// 创建组件
	 	class Person extends React.Component{
	 		render(){
	 			return (
	 				<div>
	 					<h1> Hello {this.props.name} </h1>
	 				</div>
	 					)
	 				}
	 		}
	 	// 渲染组件
	 	ReactDOM.render(<Person name="张三"/>,document.getElmentById('root'))
	 		</script>
	 	</body>
	</html>

2.创建虚拟DOM的到页面的两种方式

方式1（推荐）

// JSX 的语法格式
<script type="text/baebl">
	// 1.创建虚拟DOM
	const VDOM = <h1> hello world </h1>
	// 此处一定不能写引号，因为不是字符创
	// 2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('root'))
</script>

方式2

// js的语法格式
<script type="text/javascript">
	// 1.创建虚拟DOM 
	const VDOM = React.createElement('h1',{id:'title'},'hello,world')
	// 2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('root'))
</script>

关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需正式DOM那么多属性
JSX的语法规则：
1.定义虚拟DOM时，不能写引号
2.标签混入js表达式时需要用{}
3.样式的类名指定不要用class，要用className
4.内联样式，style需要{{}}，对象包含对象，font-size 要用fonSize
5.只能有一个根容器标签
6.单标签必须加 / ，标签必须闭合，举例：<input /> <h1></h1>
7.标签首字母：
(1)、若小写字母开头，则将该标签转为html 中同名元素标签，若html中无该对应的同名元素，则报错
(2)、若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

3.js语句（代码）与js表达式的区别

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
表达式举例：
a
a + b
demo()
arr.map()
function test(){}
2.js语句（代码）
语句举例：
if(){}
for(){}
switch(){case:xxx}

4.模块与组件

1.模块：
理解：向外提供特定功能的js程序，一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用js，简化js的编写，提高js的运行效率
定义：当应用的js都以模块来编写的，这个应用就是一个模块化的应用
2.组件：
理解：用来实现局部功能效果的代码和资源的集合（HTML/css/image）
为什么：一个界面的功能更复杂。
作用：复用编码，简化项目编码，提高运行效率
定义：当应用是以多组件的方式实现，这个应用就是一个组件化的应用

5.创建组件的两种方式

1.函数式创建组件：

<script type="text/babel">
	// 1.创建函数式组件
	function MyCompontent(){
	console.log(this)
	// 此处的this是undefined,因为babel编译的时候开启了严格模式
	return <h2>我是用函数定义的组件</h2>
	}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent />,document.getElementById('root'))
</script>

函数式创建组件过程分析：
a.react解析组件标签，找到了MyComponent组件
b.发现组件使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM随后呈现在页面中。
2.类的复习

// 创建一个类
class Person{
	// 构造器方法
	constructor(name,age){
		// 构造器中的this是谁？类的实例对象
		this.name = name
		this.age =age
	}
	// 类中的一般方法
	speak(){
	console.log(`我叫${this.name}`)
	// 一般方法speak方法放在了哪里？
	// 答：类的原型对象上，供实例使用
	// 通过Person实例调用speak时，speak中的this就是Person实例
	}	
}
	// 创建一个Person的实例对象
	const p1 = new Person('张三',18)
	p1.speak()
	// 创建一个Student类，继承了Person类
	class Student extends Person{
	constructor(name,age,grade){
		super(name,age) // 调研父类的构造器，注意：必须在最开始
		this.grade = grade
		}
	}
	// 创建一个Student类的实例对象
	const s1 = new Student('小张',18,3)
	s1.speak()

类复习总结：
1.类中的构造器不是必须写的，要对实例进行初始化操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，A类构造器中的super是必须要调用的
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。

类式创建组件

<script type="text/babel">
	// 创建类式组件
	class MyComponent extends React.Component{
	// render 方法是放在哪里的？MyComponent的原型对象上，供实例对象使用
	render(){
	<h2>我是类定义的组件</h2>
	 }
	}
	// 渲染组件到页面
	ReactDOM.render(<MyComponent />,documentById('root'))
</script>

类式创建组件，执行ReactDOM.render(<MyComponent />,document.getElementById(‘root’))之后，分析过程：
1.react解析组件标签，找到了MyComponent组件
2.发现组件是使用类定义的，随后new出来该实例，并通过该实例调用到原型上的render方法
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面当中，render中的this是谁？MyComponent的实例对象。
小练习：点击h1标签切换今天天气怎么样？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
  <div id="root"></div>
  <script type="text/babel">
  	// 1.类式创建组件
  	class Weather extends React.Component{
  		constructor(props){
			super(props)
			// 初始化状态
			this.state = {
			isHot:false
			}
		}
		// 赋值箭头函数的this指向该实例对象中this
		changeWeather = ()=>{
			this.setState({
				isHot:!this.state.isHot
			})
		}
		render(){
		// 读取状态
		  const {isHot} = this.state
		  return(
		  <h1 onClick={this.changeWeather}>
			今天天气很{isHot ? '炎热' :'凉爽'}
			</h1>
			)
		}
  	}
  	// 渲染组件
  	ReateDOM.render(<Weather />, document.getElementById('root'))
  </script>
  </body>
  </html>

6.props的使用方式

类的创建组件方式：

<script type="text/babel">
 // 1.创建组件
 class Person extends React.Component{
 	render(){
 	console.log(this)
 	const {name,sex,age} = this.props
 	return (
 	<ul>
 		<li>姓名：{name}</li>
 		<li>性别：{sex} </li>
 		<li>年龄：{age} </li>
 	</ul>
 	)
   }
 }
 // 渲染组件到页面
 ReactDOM.render(<Person name="TOM" sex="男" age="18" />,document.getElementById('root'))
</script>

扩展：

// 数组求和
function sum(...numbers){
	return numbers.reduce((preValue,currentValue)=>{
	return preValue +currentValue
	})
}
console.log(sum(1,2,3,4)
// 对象复制（深拷贝）
// 第一种
let person2 = {...person}
// 第二种
let person2 = JSON.stringfy(person)
person2 = JSON.parse(person2)

props的限制：
第一种类式创建组件的方式限制：

// 比普通的react引入多了下面的ptopType
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script type="text/babel">
	// 1.创建组件
	class Person extends React.Component{
		render(){
			const {name,age,sex} = this.state
			return (
				<ul>
					<li>姓名：{name} </li>
					<li>性别：{sex} </li>
					<li>年龄：{age} </li>
				</ul>
				)
			}
		}
	// 对标签属性进行类型、必要性的限制
	Person.propTypes = {
		name:PropTypes.string.isRequired,
		sex:PropTypes.string,
		age:PropType.number
	}
	// 对指定标签默认值的设置
	Person.defaultProps = {
		sex:'未知',
		age:18
		}
	// 2.渲染组件
	ReactDOM.render(<Person name="TOM" />,document.getElementById('root'))

第二种简写方式（放置组件内部）

// 比普通的react引入多了下面的propType
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script typw="text/babel">
	// 1.创建组件
	class Person extends React.Component{
		// 对组件标签属性进行类型、必要性的限制
		static propTypes = {
			name:PropTypes.string.isRequired,
			sex:PropsTypes.string,
			age:PropTypes.number
			}
		// 指定标签默认值的设置
		static defaultProps = {
		sex:'未知',
		age:18
		}
		render(){
			const {name,age,sex} = this.state
			return (
				<ul>
					<li>姓名： {name} </li>
					<li>性别：{sex} </li>
					<li>年龄：{age} </li>
				<ul>
				)
			}
		}
		// 2.渲染组件
		ReactDOM.render(<Person name="tom" />,document.getElmentById('root'))
	</script>

扩展知识：
类式组件的构造器与props
构造器是否接收props,是否传递给super，取决于：是否希望在构造器中通过this访问props

constructor(props){
	super(props)
	console.log('constructor',this.props)
}

函数创建组件限制props方式：

// 函数式创建组件
function Person(props){
    // props参数其中React已经将组件传递进入的参数进行了统一收集
    return (
    const {name,age,sex} = props
	 <ul>
        	<li>姓名：{name}</li>  
			<li>性别：{sex} </li>
			<li>年龄：{age} </li>
      </ul>
    )
}
    // 对标签属性进行类型、必要性的限制
    Person.propTypes = {
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number
    }
	// 对指定标签默认值的设置
	Person.defaultProps = {
    sex:'未知',
    age:18
	}
	ReactDOM.render(<Person name="TOM" sex="男" age=18 / >,document.getElementById('root'))