React基础入门（一）

1、React简介

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

描述介绍
用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

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

React高效的原因
1、使用虚拟(virtual)DOM，不总是直接操作页面真实DOM；
2、DOM Diffing算法，最小化页面重绘；

2、React的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

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

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

2.1、创建虚拟DOM的两种方式

1、纯JS方式（一般不用）

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

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

	<script type="text/javascript" > 
		//1.创建虚拟DOM（纯js创建过于复杂）
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

2、JSX方式（JSX相当于JS写虚拟DOM的语法糖）

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

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

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

关于虚拟DOM：
1、本质是Object类型的对象（一般对象）；
2、虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性；
3、虚拟DOM最终会被React转化为真实DOM，呈现在页面上；
在这里插入图片描述

2.2、jsx语法规则

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

写法：var ele = <h1>Hello JSX!</h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

4、标签名任意：HTML标签或其它标签
5、标签属性任意：HTML标签属性或其它

基本语法规则
1、定义虚拟DOM时，不要写引号；
2、标签中混入JS表达式时要用{}；
3、样式的类名指定不要用class，要用className；
4、内联样式，要用style={{key:value}}的形式去写；
5、只有一个根标签；
6、标签必须闭合；
7、标签首字母：
(1)若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

<script type="text/babel" >
	const myId = 'aTgUiGu'
	const myData = 'HeLlo,rEaCt'
	
	//1.创建虚拟DOM
	const VDOM = (
		<div>
			<h2 className="title" id={myId.toLowerCase()}>
				<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
			</h2>
			<h2 className="title" id={myId.toUpperCase()}>
				<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
			</h2>
			<input type="text"/>
		</div>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

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

3、模块与组件、模块化与组件化的理解

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

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

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

组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用；
在这里插入图片描述

4、React面向组件编程

安装React开发者工具调试
在这里插入图片描述

4.1、React定义组件两种方式

1、函数式组件

<script type="text/babel">
	//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，随后呈现在页面中。
	*/
</script>

2、类式组件

<!-- 准备好一个“容器” -->
<div id="test"></div>

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

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

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

4.2、组件三大核心属性1：state

理解
1、state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)；
2、组件被称为"状态机"，通过更新组件的state来更新对应的页面显示(重新渲染组件)；
3、相当于Vue中的data；

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

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

3、切勿直接修改state数据，直接state会重新渲染内容；
4、使用setState通过this.setState修改完数据后，并不会立即修改DOM里面的内容，react会在这个函数内部的所有设置状态改变后，统一对比虚拟DOM对象，然后在统一修改，提升性能；

案例
点击文字，天气产生变化

<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
	
	//构造器调用几次？ ———— 1次
	constructor(props){
		super(props)
		console.log('constructor', this);
		//初始化状态
		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)不可直接更改，下面这行就是直接更改！！！
		//this.state.isHot = !isHot //这是错误的写法
	}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>

state简单写法

<script type="text/babel">
// 1、创建组件
class Weather extends React.Component {
  // 初始化状态
  state = { isHot: false, wind: '风' }
  
  render() {
    const { isHot, wind } = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
  }
  
  // 自定义方法————要用赋值语句的形式+箭头函数
  changeWeather = () => {
    const isHot = this.state.isHot
    this.setState({ isHot: !isHot })
  }
}

// 2、渲染组件到页面
ReactDOM.render(<Weather/>, document.getElementById('test))
</script>

4.3、组件三大核心属性2：props

理解
1、每个组件对象都会有props(properties的简写)属性；
2、组件标签的所有属性都保存在props中；

作用
1、通过标签属性从组件外向组件内传递变化的数据；
2、组件内部不要修改props数据，props为只读属性；

props基本使用

// 创建组件
class Person extends React.Component {
  render() {
    const { name, age, sex } = this.props
    return (
	  <ul>
	    <li>姓名:{name}</li>
	    <li>年龄:{age + 1}</li>
	    <li>性别:{sex}</li>
	  </ul>
	)
  }
}

// 渲染组件
ReactDOM.render(<Person name="tom" age={19} sex="男">, document.getElementById('test1'))
ReactDOM.render(<Person name="jack" age={20} sex="女">, document.getElementById('test2'))

// 扩展属性: 将对象的所有属性通过props传递
const p = { name: '张三', age: 20, sex: '男' }
ReactDOM.render(<Person {...p}/>, document.getElementById('test3'))

props传参进行限制

第一种方式（React v15.5 开始已弃用）：
在这里插入图片描述
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<!-- 引入prop-types，用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>

	<script type="text/babel">
		//创建组件
		class Person extends React.Component{
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错，因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age+1}</li>
					</ul>
				)
			}
		}
		//对标签属性进行类型、必要性的限制
		Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
		}
		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		//渲染组件到页面
		ReactDOM.render(<Person name={100} speak={speak}/>,document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))

		const p = {name:'老刘',age:18,sex:'女'}
		// console.log('@',...p);
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
		ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

		function speak(){
			console.log('我说话了');
		}
	</script>
</body>

props简写方式

<script type="text/babel">
	//创建组件
	class Person extends React.Component{

		constructor(props){
			super(props)
			console.log('constructor',this.props);
			// 希望通过this访问props: 构造器与super都传递props
			// 直接访问props: 构造器传递props即可
			
			//构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props
			// console.log(props);
		}

		//对标签属性进行类型、必要性的限制
		static propTypes = {
			name:PropTypes.string.isRequired, //限制name必传，且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
		}

		//指定默认标签属性值
		static defaultProps = {
			sex:'男',//sex默认值为男
			age:18 //age默认值为18
		}
		
		render(){
			// console.log(this);
			const {name,age,sex} = this.props
			//props是只读的
			//this.props.name = 'jack' //此行代码会报错，因为props是只读的
			return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age+1}</li>
				</ul>
			)
		}
	}

	//渲染组件到页面
	ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>

函数组件使用props（默认第一个参数就是props）

<script type="text/babel">
	//创建组件
	function Person (props){
		const {name,age,sex} = props
		return (
				<ul>
					<li>姓名：{name}</li>
					<li>性别：{sex}</li>
					<li>年龄：{age}</li>
				</ul>
			)
	}
	Person.propTypes = {
		name:PropTypes.string.isRequired, //限制name必传，且为字符串
		sex:PropTypes.string,//限制sex为字符串
		age:PropTypes.number,//限制age为数值
	}

	//指定默认标签属性值
	Person.defaultProps = {
		sex:'男',//sex默认值为男
		age:18 //age默认值为18
	}
	//渲染组件到页面
	ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>

4.4、组件三大核心属性3：refs与事件处理

理解
组件内的标签可以定义ref属性来标识自己

三种组件标签获取方式：
1、字符串形式的ref

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		//展示左侧输入框的数据
		showData = ()=>{
			const {input1} = this.refs
			alert(input1.value)
		}
		//展示右侧输入框的数据
		showData2 = ()=>{
			const {input2} = this.refs
			alert(input2.value)
		}
		render(){
			return(
				<div>
					<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
					<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

2、回调形式的ref

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		//展示左侧输入框的数据
		showData = ()=>{
			const {input1} = this
			alert(input1.value)
		}
		//展示右侧输入框的数据
		showData2 = ()=>{
			const {input2} = this
			alert(input2.value)
		}
		render(){
			return(
				<div>
					<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
					<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

回调ref中回调执行次数的问题
在这里插入图片描述
上面代码属于内联形式的回调函数，在更新时候会执行两次；
如果想处理这种问题，写成如下方式可解决；

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{

		state = {isHot:false}

		showInfo = ()=>{
			const {input1} = this
			alert(input1.value)
		}

		changeWeather = ()=>{
			//获取原来的状态
			const {isHot} = this.state
			//更新状态
			this.setState({isHot:!isHot})
		}

		saveInput = (c)=>{
			this.input1 = c;
			console.log('@',c);
		}

		render(){
			const {isHot} = this.state
			return(
				<div>
					<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
					
					// 1、内联形式的ref回调函数，更新会执行两次
					{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
					
					// 2、class的绑定函数形式的ref，可避免更新执行两次的问题
					<input ref={this.saveInput} type="text"/><br/><br/>
					<button onClick={this.showInfo}>点我提示输入的数据</button>
					<button onClick={this.changeWeather}>点我切换天气</button>
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

正常工作中，内联ref的写法较多，一般会忽略更新执行两次的问题（问题不大，了解即可）

3、createRef创建ref容器

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		/* 
		React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
		 */
		myRef = React.createRef()
		myRef2 = React.createRef()
		//展示左侧输入框的数据
		showData = ()=>{
			alert(this.myRef.current.value);
		}
		//展示右侧输入框的数据
		showData2 = ()=>{
			alert(this.myRef2.current.value);
		}
		render(){
			return(
				<div>
					<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
					<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

React事件处理

<script type="text/babel">
	//创建组件
	class Demo extends React.Component{
		/* 
		(1).通过onXxx属性指定事件处理函数(注意大小写)
			a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
			b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
		(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
		 */
		//创建ref容器
		myRef = React.createRef()
		myRef2 = React.createRef()

		//展示左侧输入框的数据
		showData = (event)=>{
			console.log(event.target);
			alert(this.myRef.current.value);
		}

		//展示右侧输入框的数据
		showData2 = (event)=>{
			// 通过event.target即可获取到值，无需通过ref的形式获取，避免ref滥用情况
			alert(event.target.value);
		}

		render(){
			return(
				<div>
					<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
					<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
					<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
				</div>
			)
		}
	}
	//渲染组件到页面
	ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

4.4、React受控组件和非受控组件

受控组件
1、表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似；
2、受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验；
3、受控组件只有继承React.Component才会有状态；
4、受控组件必须要在表单上使用onChange事件来绑定对应的事件；

import React, { Component } from 'react'
export default class Shoukong extends Component {
    // 这样的写法也是声明在实例上的对象
    state = {
        username: "ff",
       // 给组件状态设置默认值，在实时修改时进行校验
    }
    
    // e为原生的事件绑定对象
    handleChange = (e) => {
        // 获取原生对象上的属性
        let name = e.target.name;
        this.setState({
            username: e.target.value
        })
    }
 
    render() {
        return (
            <div>
                <p>{this.state.username}</p>
                用户名：<input
                    type="text"
                    value={this.state.username}
                    onChange={this.handleChange} />
            </div>
        )
    }
}

非受控组件
在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性
react会自动将输入框中输入的值放在实例的ref属性上

import React, { Component } from 'react'
export default class Feishou extends Component{
	constructor(){
	    super();
	    // 在构造函数中创建一个引用
	    this.myref=React.createRef();
	}
	
	handleSubmit = (e) => {
	    // 阻止原生默认事件的触发(刷新)
	    e.preventDefault();
	    console.log(this.myref.current.value);
	}
	
	render() {
	    return (
	        <form onSubmit={this.handleSubmit}>
	            {/* 自动将输入框中输入的值放在实例的myref属性上 */}
	           <input
	                type="text"
	                ref={this.myref}
	            />
	             <button>提交</button> {/* 手动提交 */}
	        </form>
	    )
	}
}

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

对比受控组件和非受控组件的输入流程：
非受控组件：用户输入A => input 中显示A
受控组件：用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A

官方强烈推荐使用受控组件，因为它能更好的控制组件的生命流程。

注意：
1、受控组件的两个要点：

组件的value属性与React中的状态绑定
组件内声明了onChange事件处理value的变化

2、非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用；
3、尽可能使用受控组件；
4、受控组件是将状态交由React处理，可以是任何元素，不局限于表单元素；
5、对于有大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智；
6、在受控组件中，数据流是单向的(state是变化来源)，因此在改变state时都应该使用setState，而不要强制赋值；
7、Refs不能用于函数式组件，因为函数式组件没有实例；
8、在函数式组件内部，是可以使用Refs的；

5、生命周期

5.1、初了解

简介：生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子

案例：组件挂载界面之后，文字透明度开始发生循环变化

<script type="text/babel">
  class Life extends React.Component {
    state = { opacity: 1 }

    // 组件挂载
    componentDidMount() {
      console.log('组件挂载成功')
      this.timer = setInterval(() => {
        let { opacity } = this.state
        opacity -= 0.1
        if (opacity <= 0) opacity = 1

        this.setState({opacity})
      }, 300)
    }

    death = () => {
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 组件卸载
    componentWillUnmount() {
      console.log('组件卸载');
      clearInterval(this.timer)
    }

    render() {
      console.log('render');
      const { opacity } = this.state
      return (
        <div>
          <h2 style={{opacity}}>文字透明度循环变化</h2>
          <button onClick={this.death}>消失</button>
        </div>
      )
    }
  }

  // 组件渲染
  ReactDOM.render(<Life/>, document.getElementById('test'))
</script>

componentDidMount：组件挂载时触发一次；

componentWillUnmount：组件卸载时触发一次；

5.2、旧版 - 生命周期

在这里插入图片描述

<script type="text/babel">
//创建组件
class Count extends React.Component{
	/* 
		1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
			1.	constructor()
			2.	componentWillMount()
			3.	render()
			4.	componentDidMount() =====> 常用
							一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
							
		2. 更新阶段: 由组件内部this.setSate()或父组件render触发
			1.	shouldComponentUpdate()
			2.	componentWillUpdate()
			3.	render() =====> 必须使用的一个
			4.	componentDidUpdate()
			
		3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
			1.	componentWillUnmount()  =====> 常用
							一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
	*/
	//构造器
	constructor(props){
		console.log('Count---constructor');
		super(props)
		//初始化状态
		this.state = {count:0}
	}

	//加1按钮的回调
	add = ()=>{
		//获取原状态
		const {count} = this.state
		//更新状态
		this.setState({count:count+1})
	}

	//卸载组件按钮的回调
	death = ()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('test'))
	}

	//强制更新按钮的回调
	force = ()=>{
		this.forceUpdate()
	}

	//组件将要挂载的钩子
	componentWillMount(){
		console.log('Count---componentWillMount');
	}

	//组件挂载完毕的钩子
	componentDidMount(){
		console.log('Count---componentDidMount');
	}

	//组件将要卸载的钩子
	componentWillUnmount(){
		console.log('Count---componentWillUnmount');
	}

	//控制组件更新的“阀门”
	shouldComponentUpdate(){
		console.log('Count---shouldComponentUpdate');
		return true
	}

	//组件将要更新的钩子
	componentWillUpdate(){
		console.log('Count---componentWillUpdate');
	}

	//组件更新完毕的钩子
	componentDidUpdate(){
		console.log('Count---componentDidUpdate');
	}

	render(){
		console.log('Count---render');
		const {count} = this.state
		return(
			<div>
				<h2>当前求和为：{count}</h2>
				<button onClick={this.add}>点我+1</button>
				<button onClick={this.death}>卸载组件</button>
				<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
			</div>
		)
	}
}

//渲染组件
ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

界面初始化，打印如下：
Count—constructor
Count—componentWillMount
Count—render
Count—componentDidMount

数据界面更新，打印如下：
Count—shouldComponentUpdate
Count—componentWillUpdate
Count—render
Count—componentDidUpdate

forceUpdate函数强制更新，打印如下：
Count—componentWillUpdate
Count—render
Count—componentDidUpdate

卸载组件，打印如下：
Count—componentWillUnmount

<script type="text/babel">
//创建组件
//父组件A
class A extends React.Component{
	//初始化状态
	state = {carName:'奔驰'}

	changeCar = ()=>{
		this.setState({carName:'奥拓'})
	}

	render(){
		return(
			<div>
				<div>我是A组件</div>
				<button onClick={this.changeCar}>换车</button>
				<B carName={this.state.carName}/>
			</div>
		)
	}
}

//子组件B
class B extends React.Component{
	//组件将要接收新的props的钩子
	componentWillReceiveProps(props){
		console.log('B---componentWillReceiveProps',props);
	}

	//控制组件更新的“阀门”
	shouldComponentUpdate(){
		console.log('B---shouldComponentUpdate');
		return true
	}
	//组件将要更新的钩子
	componentWillUpdate(){
		console.log('B---componentWillUpdate');
	}

	//组件更新完毕的钩子
	componentDidUpdate(){
		console.log('B---componentDidUpdate');
	}

	render(){
		console.log('B---render');
		return(
			<div>我是B组件，接收到的车是:{this.props.carName}</div>
		)
	}
}

//渲染组件
ReactDOM.render(<A/>,document.getElementById('test'))
</script>

界面初始化，打印如下：
B—render

父组件传参数据变化，打印如下：
B—componentWillReceiveProps {carName: “奥拓”}
B—shouldComponentUpdate
B—componentWillUpdate
B—render
B—componentDidUpdate

5.2、新版 - 生命周期

在这里插入图片描述

<script type="text/babel">
//创建组件
class Count extends React.Component{
	/* 
		1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
			1.	constructor()
			2.	getDerivedStateFromProps 
			3.	render()
			4.	componentDidMount() =====> 常用
						一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
									
		2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
			1.	getDerivedStateFromProps
			2.	shouldComponentUpdate()
			3.	render()
			4.	getSnapshotBeforeUpdate
			5.	componentDidUpdate()
						
		3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
			1.	componentWillUnmount()  =====> 常用
						一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
	*/
	//构造器
	constructor(props){
		console.log('Count---constructor');
		super(props)
		//初始化状态
		this.state = {count:0}
	}

	//加1按钮的回调
	add = ()=>{
		//获取原状态
		const {count} = this.state
		//更新状态
		this.setState({count:count+1})
	}

	//卸载组件按钮的回调
	death = ()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('test'))
	}

	//强制更新按钮的回调
	force = ()=>{
		this.forceUpdate()
	}
	
	//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
	static getDerivedStateFromProps(props,state){
		console.log('getDerivedStateFromProps',props,state);
		return null
	}

	//在更新之前获取快照
	getSnapshotBeforeUpdate(){
		console.log('getSnapshotBeforeUpdate');
		return 'atguigu'
	}

	//组件挂载完毕的钩子
	componentDidMount(){
		console.log('Count---componentDidMount');
	}

	//组件将要卸载的钩子
	componentWillUnmount(){
		console.log('Count---componentWillUnmount');
	}

	//控制组件更新的“阀门”
	shouldComponentUpdate(){
		console.log('Count---shouldComponentUpdate');
		return true
	}

	//组件更新完毕的钩子
	componentDidUpdate(preProps,preState,snapshotValue){
		console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
	}
	
	render(){
		console.log('Count---render');
		const {count} = this.state
		return(
			<div>
				<h2>当前求和为：{count}</h2>
				<button onClick={this.add}>点我+1</button>
				<button onClick={this.death}>卸载组件</button>
				<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
			</div>
		)
	}
}

//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>

界面初始化，打印如下：
Count—constructor
getDerivedStateFromProps {count: 199} {count: 0}
Count—render
Count—componentDidMount

数据界面更新，打印如下：
getDerivedStateFromProps {count: 199} {count: 1}
Count—shouldComponentUpdate
Count—render
getSnapshotBeforeUpdate
Count—componentDidUpdate {count: 199} {count: 0} atguigu

forceUpdate函数强制更新，打印如下：
getDerivedStateFromProps {count: 199} {count: 1}
Count—render
getSnapshotBeforeUpdate
Count—componentDidUpdate {count: 199} {count: 1} atguigu

卸载组件，打印如下：
Count—componentWillUnmount

5.4、getSnapShotBeforeUpdate的使用场景

需求：滚动框内每隔一秒新增一条新闻数据，内容溢出时可滚动。当下拉到某一条新闻数据时，不会因为新增数据发生位置滚动。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_getSnapShotBeforeUpdate的使用场景</title>
	<style>
		.list{
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}
		.news{
			height: 30px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

	<script type="text/babel">
		class NewsList extends React.Component{
			state = {newsArr:[]}

			componentDidMount(){
				setInterval(() => {
					//获取原状态
					const {newsArr} = this.state
					//模拟一条新闻
					const news = '新闻'+ (newsArr.length+1)
					//更新状态
					this.setState({newsArr:[news,...newsArr]})
				}, 1000);
			}

			getSnapshotBeforeUpdate(){
				// 获取到更新前的滚动高度
				return this.refs.list.scrollHeight
			}

			componentDidUpdate(preProps,preState,height){
				// 最新的滚动高度 - 上一次的高度 = 单条新增数据的高度
			    // scrollTop 内容未溢出时为0 
				this.refs.list.scrollTop += this.refs.list.scrollHeight - height
			}

			render(){
				return(
					<div className="list" ref="list">
						{
							this.state.newsArr.map((n,index)=>{
								return <div key={index} className="news">{n}</div>
							})
						}
					</div>
				)
			}
		}
		ReactDOM.render(<NewsList/>,document.getElementById('test'))
	</script>
</body>
</html>

5.5、新、旧生命周期变化

即将废弃的钩子：
1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

新增的钩子：
1、getDerivedStateFromProps：若state的值在任何时候都取决于props，那么可以使用此钩子；

2、getSnapshotBeforeUpdate：在更新之前获取快照（获取更新前数据）；

6、Diff算法

基本原理图
在这里插入图片描述
key值的作用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>key的作用</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
	/*
   经典面试题:
      1). react/vue中的key有什么作用？（key的内部原理是什么？）
      2). 为什么遍历列表时，key最好不要用index?
      
			1. 虚拟DOM中key的作用：
					1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

					2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 
												随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

									a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
												(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
												(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

									b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
												根据数据创建新的真实DOM，随后渲染到到页面
									
			2. 用index作为key可能会引发的问题：
								1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
												会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

								2. 如果结构中还包含输入类的DOM：
												会产生错误DOM更新 ==> 界面有问题。
												
								3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
									仅用于渲染列表用于展示，使用index作为key是没有问题的。
					
			3. 开发中如何选择key?:
								1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
								2.如果确定只是简单的展示数据，用index也是可以的。
   */
	
	/* 
		慢动作回放----使用index索引值作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=0>小张---18<input type="text"/></li>
					<li key=1>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=0>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

	-----------------------------------------------------------------

	慢动作回放----使用id唯一标识作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=3>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>


	 */
	class Person extends React.Component{

		state = {
			persons:[
				{id:1,name:'小张',age:18},
				{id:2,name:'小李',age:19},
			]
		}

		add = ()=>{
			const {persons} = this.state
			const p = {id:persons.length+1,name:'小王',age:20}
			this.setState({persons:[p,...persons]})
		}

		render(){
			return (
				<div>
					<h2>展示人员信息</h2>
					<button onClick={this.add}>添加一个小王</button>
					<h3>使用index（索引值）作为key</h3>
					<ul>
						{
							this.state.persons.map((personObj,index)=>{
								return <li key={index}>{personObj.name}---{personObj.age}<input type="text"/></li>
							})
						}
					</ul>
					<hr/>
					<hr/>
					<h3>使用id（数据的唯一标识）作为key</h3>
					<ul>
						{
							this.state.persons.map((personObj)=>{
								return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text"/></li>
							})
						}
					</ul>
				</div>
			)
		}
	}

	ReactDOM.render(<Person/>,document.getElementById('test'))
</script>
</body>
</html>

7、额外知识拓展

7.1、类的基本知识

<script type="text/javascript" >
	/* 
		总结：
			1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
			2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
			3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
	*/
	//创建一个Person类
	class Person {
		//构造器方法
		constructor(name,age){
			//构造器中的this是谁？—— 类的实例对象
			this.name = name
			this.age = age
		}
		//一般方法
		speak(){
			//speak方法放在了哪里？——类的原型对象上，供实例使用
			//通过Person实例调用speak时，speak中的this就是Person实例
			console.log(`我叫${this.name}，我年龄是${this.age}`);
		}
	}

	//创建一个Student类，继承于Person类
	class Student extends Person {
		constructor(name,age,grade){
			super(name,age)
			this.grade = grade
			this.school = '尚硅谷'
		}
		//重写从父类继承过来的方法
		speak(){
			console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
			this.study()
		}
		study(){
			//study方法放在了哪里？——类的原型对象上，供实例使用
			//通过Student实例调用study时，study中的this就是Student实例
			console.log('我很努力的学习');
		}
	}

	const student = new Student('张三',9, 3)
	console.log(student);
	student.speak()
	
	class Car {
		constructor(name,price){
			this.name = name
			this.price = price
			// this.wheel = 4
		}
		//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
		a = 1
		wheel = 4
		static demo = 100
	}
	const c1 = new Car('奔驰c63',199)
	console.log(c1);
	console.log(Car.demo);
</script>

7.2、原生事件绑定

<body>
	<button id="btn1">按钮1</button>
	<button id="btn2">按钮2</button>
	<button onclick="demo()">按钮3</button>

	<script type="text/javascript" >
		const btn1 = document.getElementById('btn1')
		btn1.addEventListener('click',()=>{
			alert('按钮1被点击了')
		})

		const btn2 = document.getElementById('btn2')
		btn2.onclick = ()=>{
			alert('按钮2被点击了')
		}

		function demo(){
			alert('按钮3被点击了')
		}

	</script>
</body>

7.3、展开运算符

<script type="text/javascript" >
	let arr1 = [1,3,5,7,9]
	let arr2 = [2,4,6,8,10]
	console.log(...arr1); //展开一个数组
	let arr3 = [...arr1,...arr2]//连接数组
	
	//在函数中使用
	function sum(...numbers){
		return numbers.reduce((preValue,currentValue)=>{
			return preValue + currentValue
		})
	}
	console.log(sum(1,2,3,4));

	//构造字面量对象时使用展开语法
	let person = {name:'tom',age:18}
	let person2 = {...person}
	//console.log(...person); //报错，展开运算符不能展开对象
	person.name = 'jerry'
	console.log(person2);
	console.log(person);

	//合并
	let person3 = {...person,name:'jack',address:"地球"}
	console.log(person3);
</script>

// 打印如下：
// 1 3 5 7 9
// 1 3 5 7 9 2 4 6 8 10
// 10
// {name: "tom", age: 18}
// {name: "jerry", age: 18}
// {name: "jack", age: 18, address: "地球"}