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.创建虚拟DOMconst 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.创建虚拟DOMconst 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.创建虚拟DOMconst 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.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}//changeWeather调用几次？ ———— 点几次调几次changeWeather(){//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefinedconsole.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.statereturn <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>}// 自定义方法————要用赋值语句的形式+箭头函数changeWeather = () => {const isHot = this.state.isHotthis.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.propsreturn (<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} = propsreturn (<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.refsalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = this.refsalert(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} = thisalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = thisalert(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} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(<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>用户名：<inputtype="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属性上 */}<inputtype="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.stateopacity -= 0.1if (opacity <= 0) opacity = 1this.setState({opacity})}, 300)}death = () => {ReactDOM.unmountComponentAtNode(document.getElementById('test'))}// 组件卸载componentWillUnmount() {console.log('组件卸载');clearInterval(this.timer)}render() {console.log('render');const { opacity } = this.statereturn (<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.statereturn(<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.    getDerivedStateFromProps2.  shouldComponentUpdate()3.   render()4.  getSnapshotBeforeUpdate5.   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，那么可以使用getDerivedStateFromPropsstatic 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.statereturn(<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，随后替换掉页面中之前的真实DOMb. 旧虚拟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.stateconst 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 = namethis.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 = gradethis.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 = namethis.price = price// this.wheel = 4}//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1a = 1wheel = 4static 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: "地球"}