React详解（基础知识）——react学习part01

哈喽……

已于 2023-11-14 10:35:57 修改

阅读量108

点赞数

文章标签： react.js 学习笔记

于 2023-11-14 09:57:28 首次发布

本文链接：https://blog.csdn.net/weixin_46515434/article/details/134029141

版权

React详解（基础知识）——react学习part01

react简介
React的使用
React面向组件编程
React生命周期
- 5.1react生命周期（旧）
虚拟DOM与DOM Diffing算法
React应用（基于脚手架）
消息订阅与发布
扩展知识——Fetch
- fetch的出现
- 使用

react简介

1.官网

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

2.介绍描述

1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源

3.React的特点

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

4.React高效的原因

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

React的使用

1.基本使用

在这里插入图片描述

1.1创建虚拟DOM的两种方式

1.纯JS方式（项目中一般不使用）

const VDOM = React.createElement('标签名',{id:'xx'，color:'xxx'},'标签体')

2.jsx方式

const VDOM = (
        <h1>
            <span>Hello,React</span>
        </h1>)

1.2渲染虚拟DOM

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

1.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变化而更新界。
4.虚拟DOM本质上就是一个Object对象，虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在使用，无需真实DOM上那么多的属性。

2.React JSX

2.1JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟DOM
1)写法：var ele = <h1>Hello JSX!</h1>
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
语法规则
1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2)遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
3）定义虚拟DOM时，不要写引号
4）标签中混入JS表达式时要用{}，注意是JS表达式，而不是JS语句。
5）样式的类名指定不要用class，要用className
6）标签必须闭合
7）标签首字母：若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
babel.js的作用
1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
注意
注意区分JS语句和JS表达式
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
（1）a
（2）a+b
（3）demo(1)
（4）arr.map()
（5）function test(){}
2.JS语句，下面这些都是语句（代码）
（1）if()
（2）for()
（3）switch(){case:xxx}

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

3.1模块

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

3.2组件

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

3.3模块化

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

3.4组件化

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

React面向组件编程

4.1函数式组件

<body>
    <!-- 1.准备一个容器 -->
    <div id="test"></div>
    <!-- 2.引入库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">   //此处一定要写成babel
    // 3.创建函数式组件
    function MyComponent(){
        console.log(this) //此处的this是undefined，因为babel编译后开启了严格模式
        return <h2>我是一个函数式组件（适用于简单组件的定义）</h2>
    }
    // 4.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))    //注意：这里的组件名首字母需要大写，组件需要闭合
    </script>
</body>

在这里插入图片描述
组件渲染
执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后发生了什么？
1.React解析组件标签，找到了MyComponent组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面上

4.2类式组件

4.2.1对类基本知识的小复习

<script type="text/javascript" >
		//创建一个Person类
		class Person {
			//构造器方法
			constructor(name,age){
				//构造器中的this是谁？—— 类的实例对象
				this.name = name
				this.age = age
			}
			//一般方法
			speak(){
				//speak方法放在了哪里？——类的原型对象上，供实例使用
				//通过Person实例调用speak时，speak中的this就是Person实例，注意是通过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('我很努力的学习');
			}
		}
		
		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>

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

4.2.2类式组件的定义

<body>
    <!-- 1.准备一个容器 -->
    <div id="test"></div>
    <!-- 2.引入库 -->
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">   //此处一定要写成babel
    // 3.创建类式组件
   class MyComponent extends React.Component{
    render(){
        // render是放在哪里的？——MyComponent的原型对象上，供实例使用
        // render中的this是谁？——MyComponent的实例对象上，也可以说是MyComponent组件实例对象
        return <h2>我是一个类式组件（适用于复杂组件的定义）</h2>
    }
   }
    // 4.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    </script>
</body>

组件渲染
执行了ReactDOM.render(<MyComponent/>,document.getElementById('test'))之后发生了什么？
1）React解析组件标签，找到了MyComponent组件。
2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3）将render返回的虚拟DOM转为真实DOM，随后趁现在页面上。

4.3组件实例的三大核心属性

4.3.1state属性

初识state属性

<script type="text/babel">
		//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，所以需要修改changeWeather中this的指向
				
				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>

简写形式，开发中使用到的

<script type="text/babel">   //此处一定要写成babel
        // 1.创建类式组件
        class MyComponent extends React.Component {
            // 初始化状态
           state = {ishot:true}
            render() {
                return <h2 onClick={this.changeWeather}>今天天气{this.state.ishot ? '炎热' : '凉爽'}</h2>
            }
            // 自定义方法，利用箭头函数改变this指向
            changeWeather=()=> {
                this.setState({ishot:!this.state.ishot})
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意
组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind() 放在了实例自身上
b)箭头函数
状态数据，不能直接修改或更新

4.3.2props属性

基本使用

<script type="text/babel">   //此处一定要写成babel
        // 1.创建类式组件
        class MyComponent extends React.Component {
            render() {
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age}</li>
                        <li>性别：{this.props.sex}</li>
                    </ul>)
            }
        }
        // 2.渲染组件到页面
        const p = { name: '李四', age: 25, sex: '男' }
        ReactDOM.render(<MyComponent name="Lili" age="19" sex="男" />, document.getElementById('test'))
        ReactDOM.render(<MyComponent name="rose" age="29" sex="女" />, document.getElementById('test1'))
        ReactDOM.render(<MyComponent {...p} />, document.getElementById('test2'))   //批量传值（注意：对于一个对象是不能直接使用展开运算符的，要在{}中使用，但是注意这里的{}与展开对象时的{}不同，在这里是直接展开了对象，可以这样做的原因是导入了react的依赖包和babel的共同作用，但是也只能在组件上使用）
    </script>

理解
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
作用
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据
对props进行一些限制

<script type="text/babel">   //此处一定要写成babel
        // 1.创建类式组件
        class MyComponent extends React.Component {
            render() {
                // console.log(this)
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age + 1}</li>
                        <li>性别：{this.props.sex}</li>
                    </ul>)
            }

        }
        //对标签属性进行类型、必要性的限制
        MyComponent.propTypes = {
        //使用PropTypes需要引入prop-types.js库
            name: PropTypes.string.isRequired,//限制name必传，且为字符串
            sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
        }
        //指定默认标签属性值
        MyComponent.defaultProps = {
            age: 16,
            sex: '男'
        }
        // 2.渲染组件到页面
        const p = { name: '李四', age: 25, sex: '男' }
        ReactDOM.render(<MyComponent name="Lili" age={19} sex="男" speak={speak} />, document.getElementById('test'))
        ReactDOM.render(<MyComponent name="rose" />, document.getElementById('test1'))
        ReactDOM.render(<MyComponent {...p} />, document.getElementById('test2'))   //批量传值
        function speak() {
            console.log("说话")
        }
    </script>

简写形式将props的限制写进类里面

<script type="text/babel">   //此处一定要写成babel
        // 1.创建类式组件
        class MyComponent extends React.Component {
            // a=100  //给组件实例对象身上添加属性a
            // static b=199  //给MyComponent组件自身身上添加属性b
            //对标签属性进行类型、必要性的限制
        static propTypes = {
            name: PropTypes.string.isRequired,//限制name必传，且为字符串
            sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
        }
        //指定默认标签属性值
        static defaultProps = {
            age: 16,
            sex: '男'
        }
            render() {
                // console.log(this)
                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>年龄：{this.props.age + 1}</li>
                        <li>性别：{this.props.sex}</li>
                    </ul>)
            }

        }
        // 2.渲染组件到页面
        const p = { name: '李四', age: 25, sex: '男' }
        ReactDOM.render(<MyComponent name="Lili" age={19} sex="男" speak={speak} />, document.getElementById('test'))
        ReactDOM.render(<MyComponent name="rose" />, document.getElementById('test1'))
        ReactDOM.render(<MyComponent {...p} />, document.getElementById('test2'))   //批量传值
        function speak() {
            console.log("说话")
        }
    </script>

4.3.3refs属性

理解
组件内的标签可以定义ref属性来标识自己
编码
1.字符串形式的ref
<input ref="input1"/>
获取：this.refs.input1
2.回调形式的ref（放在了组件实例对象身上）
内联回调函数<input ref={(c)=>{this.input1 = c}}
<input ref={(c)=>{this.input2 = c}}

类绑定回调函数

saveInput=(c)=>{
  this.input1 = c
}
render(){
  return <input ref={this.saveInput} type='text'/>
}

获取：const input1 = {this}
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 a="1" b="2"/>,document.getElementById('test'))
	</script>

4.4事件处理

4.4.1基本事件处理

通过onXxx属性指定事件处理函数(注意大小写)
1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件——为了更好的兼容性
2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效
通过event.target得到发生事件的DOM元素对象
（发生事件的元素正好是要操作的元素，就可以使用事件源来处理。）

<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			myRef = React.createRef()
			//展示左侧输入框的数据
			showData = ()=>{
				alert(this.myRef.current.value);
			}
			//展示右侧输入框的数据
			showData2 = (event)=>{
				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} placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>

<input onBlur={this.showData2} placeholder="失去焦点提示数据"/>
注意：这里花括号里调事件的时候不能写成this.showData2()的形式，不能带括号，否则就是还没onBlur就直接执行了showData2这个事件。
onBlur={this.showData2()}的含义就是将showData2的返回值交给了onBlur作为回调，

4.4.2非受控组件

对输入类的DOM，都是现用现取，这样的就叫做非受控组件。

<script type="text/babel">
		// 创建类式组件
        class Login extends React.Component {
            handleSubmit=(event)=>{
                event.preventDefault()   //阻止表单提交，不刷新页面
                const {username,password} = this
                alert(`用户名为：${username.value}，密码为：${password.value}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input ref={c=>this.username=c} type="text" name="username"/>
                        密码：<input ref={c=>this.password=c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

4.4.3受控组件

页面上所有输入类的DOM，随着输入就能把数据维护到状态中去，等需要的时候，直接从状态里取出来就是受控组件。

<script type="text/babel">
		// 创建类式组件
        class Login extends React.Component {
            // 初始化状态
            state = {
                username:'',
                password:''
            }
            getUsername=(event)=>{
                this.setState({
                    username:event.target.value
                })
            }
            getPassword=()=>{
                this.setState({
                    password:event.target.value
                })
            }
            handleSubmit=(event)=>{
                event.preventDefault()
                alert(`用户名为：${this.state.username}，密码为：${this.state.password}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.getUsername} type="text" name="username"/>
                        密码：<input onChange={this.getPassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

高阶函数——柯里化实现以上功能

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等。
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

                       function sum(a){
							return(b)=>{
								return (c)=>{
									return a+b+c
								}
							}
						}

柯里化

<script type="text/babel">
		// 创建类式组件
        class Login extends React.Component {
            // 初始化状态
            state = {
                username:'',
                password:''
            }
            // 保存表单数据到状态中
            getFormSubmit=(dataType)=>{
                return ()=>{
                    // 这个箭头函数是作为onChange的回调的，则它会接收一个参数event，事件源
                    this.setState({[dataType]:event.target.value})
                }
            }
            // 表单提交的回调
            handleSubmit=(event)=>{
                event.preventDefault()
                alert(`用户名为：${this.state.username}，密码为：${this.state.password}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        {/*这样的问题在于有多个input的话就需要写很多个方法，但他们实现的功能确实一样的，解决：高阶函数,
                           每个input都用同一个方法，通过传递进去的参数区分是哪个input
                           用户名：<input onChange={this.getUsername} type="text" name="username"/>
                        密码：<input onChange={this.getPassword} type="password" name="password"/>
                        */}
                        {/*这里getFormSUbmit里传进去的参数名就需要和状态里用户名和密码的名保持一致*/}
                        用户名：<input onChange={this.getFormSubmit('username')} type="text" name="username"/>
                        密码：<input onChange={this.getFormSubmit('password')} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

不用函数柯里化的实现

<script type="text/babel">
		// 创建类式组件
        class Login extends React.Component {
            // 初始化状态
            state = {
                username:'',
                password:''
            }
            // 保存表单数据到状态中
            getFormSubmit=(dataType,value)=>{
                this.setState({[dataType]:value})
            }
            // 表单提交的回调
            handleSubmit=(event)=>{
                event.preventDefault()
                alert(`用户名为：${this.state.username}，密码为：${this.state.password}`)
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        {/*这样的问题在于有多个input的话就需要写很多个方法，但他们实现的功能确实一样的，解决：高阶函数,
                           每个input都用同一个方法，通过传递进去的参数区分是哪个input
                           用户名：<input onChange={this.getUsername} type="text" name="username"/>
                        密码：<input onChange={this.getPassword} type="password" name="password"/>
                        */}
                        {/*这里getFormSUbmit里传进去的参数名就需要和状态里用户名和密码的名保持一致*/}
                        {/*这样不用柯里化的方式就是将一个箭头函数作为了onChange的回调，这样箭头函数里可以接收到参数event事件源*/}
                        用户名：<input onChange={(event)=>{this.getFormSubmit('username',event.target.value)}} type="text" name="username"/>
                        密码：<input onChange={(event)=>{this.getFormSubmit('password',event.target.value)}} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

React生命周期

5.1react生命周期（旧）

在这里插入图片描述

初始化阶段: 由ReactDOM.render()触发—初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件render触发
1 shouldComponentUpdate()
2.componentWillUpdate()
3.render() =====> 必须使用的一个
4.componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

<script type="text/babel">		
		//创建组件
		class Count extends React.Component{
			//构造器
			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>
				)
			}
		}		
		//父组件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(<Count/>,document.getElementById('test'))
	</script>

react生命周期（新）
在这里插入图片描述

虚拟DOM与DOM Diffing算法

在这里插入图片描述
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>

React应用（基于脚手架）

7.1使用create-react-app创建react应用

7.1.1react脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

7.1.2.创建项目并启动

第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react创建react项目
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
（npm i -g yarn 全局安装yarn，然后可以使用yarn start来启动项目）

7.1.3脚手架项目结构

在这里插入图片描述
入口文件index.js

import React from 'react'
import ReactDOM from 'react-dom';
import './index.css'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'))

应用根组件App.js：

import React,{Component} from "react";
import './App.css'
import Hello from "./component/Hello/Hello";
export default class App extends Component {
    render(){
        return(
            <div>
                 <Hello/>
            </div>
           
        )
    }        
}

分组件Hello.js:

import React from "react";
export default class Hello extends React.Component{
    render(){
        return <h2>Hello,React!</h2>
    }
}

一个组件一个文件夹，组件可以使用jsx后缀，组件文件夹下组件名为index时引入的时候可以直接写到文件夹就停，而不用继续往下写
样式的模块化
在这里插入图片描述

7.2脚手架配置代理方法

跨域是请求能发，但数据回不来
方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

方法二

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。

消息订阅与发布

需要使用到工具库

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
1)import PubSub from 'pubsub-js' //引入
2)PubSub.subscribe('delete', function(data){console.log(data) }); //订阅
3)PubSub.publish('delete', data) //发布消息

扩展知识——Fetch

借鉴

fetch的出现

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。Fetch 的出现就是为了解决 XHR 的问题。

使用

//GET请求
fetch(url).then(function(response) {
  return response.json();  //需要使用response.json()来返回一个携带数据的promise对象，response中并不携带数据，知识保存了一些请求url后的信息，成功或失败
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

response中的信息
在这里插入图片描述
async、await写法

search = async()=>{
   try {
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);
  } catch(e) {
    console.log("Oops, error", e);
  }
}
// 注：不要忘记aync函数

哈喽……

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React详解（基础知识）——react学习part01

1.官网1.英文官网: https://reactjs.org/2.中文官网:https://react.docschina.org/2.介绍描述1.用于动态构建用户界面的 JavaScript 库(只关注于视图)2.由Facebook开源3.React的特点1.声明式编码2.组件化编码3.React Native 编写原生应用4.高效（优秀的Diffing算法）4.React高效的原因1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。2.DOM Diff
复制链接

扫一扫