React系统学习笔记--超基础--超详细--超简洁--React面向组件编程（二）

鱼仔是个NaN

已于 2022-11-05 16:35:33 修改

阅读量144

点赞数

分类专栏： # React 文章标签： react.js javascript 前端框架

于 2022-11-04 21:23:32 首次发布

本文链接：https://blog.csdn.net/m0_55644132/article/details/127696715

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Part Ⅱ：React面向组件编程

1 基本理解和使用

使用React开发者工具调试

React Developer Tools

注意点

组件名必须是首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签 < />

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

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

1.1 React中定义组件

函数式声明组件

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

执行了ReactDOM.render(<MyComponent/>…之后，发生了什么

React解析组件标签，找到了MyComponent组件
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

类式组件(下面的实例都是指类组件)

<script type="text/babel">
	//1.创建类式组件
	//必须继承Component类，必须要写render，必须有返回值
	class MyComponent extends React.Component {
		render(){
			//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
			//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
			console.log('render中的this:',this);
			return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<MyComponent/>,document.getElementById('test'))
</script>

执行了ReactDOM.render(<MyComponent/>…之后，发生了什么

React解析组件标签，找到了MyComponent组件
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中

简单组件和复杂组件

有状态的组件是复杂组件，无状态的组件是简单组件

状态驱动页面：数据放在组件的状态里，数据的改变就会驱动页面的展示

状态state是组件实例身上的

2 组件实例的三大属性之一：state

2.1 state的理解

state是组件对象最重要的属性，值是对象(可以包含多个key:value的组合)
组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)
数据放在state中，state驱动页面展示！state驱动页面展示！state驱动页面展示！

2.2 注意点

组件中的render方法中的this为组件实例对象

组件自定义方法中this为undefined（作为回调去使用），如何解决?

强制绑定this:通过函数对象的bind()
this.changeWeather = this.changeWeather.bind(this)，这样子写之后调用的就是实例对象自身上的方法，而不是挂在原型上
赋值语句 + 箭头函数推荐

状态数据，不能直接修改或者更新，需要用setState更新

类中的方法基本都是作为事件的回调去使用的，所以搞清楚this

要想使用就要在构造器里面写很多方法的this.changeWeather = this.changeWeather.bind(this)，这样太繁琐了（简化掉构造器，保住或者叫拿到this----简化写法）

2.3 代码示例

正常的用函数对象的bind()

<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
			//绑定事件不用写括号，不然就是把返回值交给onClick，我们是要把整个回调函数交给onClick
			//这边现在调用的changeWeather方法是实例自身上的
			return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
		}

		//changeWeather调用几次？ ———— 点几次调几次
		changeWeather() {
			//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
			//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用this应该是window
			//但类中的方法默认开启了局部的严格模式，所以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>

简写方式：赋值语句的形式+箭头函数，重要！重要！重要！

类里面写赋值语句，是放在自身实例身上的，再将方法写成箭头函数，箭头函数的this就是实例对象，就可以把构造器简化掉

（我们写构造器目的是为了自定一些初始化属性，现在把属性写成赋值语句放在类里面，就直接有了state）

//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'))

3 组件实例的三大属性之一：props

3.1 props的理解

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

3.2 props的作用与注意

通过标签属性从组件外向组件内传递变化的数据
注意：组件内部不要修改props数据，props是只读的
如果传入的数据太长，捞回来的对象数据，然后可以写成{...p}传入
可以对传入的数据类型进行限制，如果不传也可以指定默认值
给类自身加属性，不是给类的实例加，用静态static

3.3 代码示例

类组件使用props，最基本的使用方式

//创建组件
class Person extends React.Component{
	render(){
		// console.log(this);
		const {name,age,sex} = this.props
		return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age+1}</li>
			</ul>
		)
	}
}
//渲染组件到页面
ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,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'))
//...p在原生js本身是错误的，但是{...p}可以，相当于复制了一个对象。在react中的{}作为分隔符使用，但是我们引入了react加上babel就可以直接分解对象，也就是可以直接写...p，但是注意仅可以作为标签的属性使用，不是随便可以使用的

//对传入数据的类型进行限制，此处限制可以换成typrScript
<script type="text/javascript" src="../js/prop-types.js"></script>
Person.propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串---16版本之后不在React上面取了，引入prop-types依赖包
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
	speak:PropTypes.func,//限制speak为函数
}

//不传的话，指定默认标签属性值
Person.defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

//props简写，把类型限制和默认值写在类里面
static propTypes = {
	name:PropTypes.string.isRequired, //限制name必传，且为字符串
	sex:PropTypes.string,//限制sex为字符串
	age:PropTypes.number,//限制age为数值
}

static defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

函数组件使用props，因为函数可以接收参数

//创建组件
function Person (props){
	const {name,age,sex} = props
	return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			</ul>
		)
}

//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
//函数的类型限制要写在外面

4 组件实例的三大属性之一：refs

4.1 refs的理解

组件内的标签可以定义ref来标识自己，类似于原生的id，refs收集的是真实dom节点

4.2 代码示例

字符串形式的ref(不推荐,将被淘汰)存在问题：效率不高

//展示左侧输入框的数据
	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>
		)
	}
}

回调形式的ref，把真实dom节点存储在组件实例this身上，回调直接写成内敛函数没什么影响

/**下面的this指的是组件实例,我直接this.input1 = c 意思是给实例上的input1赋值,之后直接通过调用打印得到*/
//回调函数的内联写法，会有问题，就是更新数据会重新调用两次函数，第一次传入null，第二次才是传入dom节点，这个是每次更新生成新的函数
//展示左侧输入框的数据
	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>
		)
	}
}

//回调函数写成class的绑定函数，就不会频繁调用，不会生成新的函数
saveInput = (c)=>{
	this.input1 = c;
	console.log('@',c);
}

render(){
	return(
		<div>
			<input ref={this.saveInput} type="text"/><br/><br/>
			<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
			<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
		</div>
	)
}

createRef创建ref容器最推荐的

/*React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/
//用几个就要创建几个容器，一个容器只能放一个ref标识的节点
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
    // 取出保存在容器里的节点
	alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = ()=>{
	alert(this.myRef2.current.value);
}
render(){
	return(
		<div>
             {/*把ref所在的节点存储到刚才实例身上生成的容器myRef里面*/}
			<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>
	)
}

5 事件处理与收集表单数据

5.1 事件处理

通过onXxx属性指定事件处理函数(注意大小写)（原生：onclick，React：onClick）

React使用的是自定义(合成事件,而不是使用的原生DOM事件) ----为了更好的兼容性
React中的事件是通过事件委托的方式处理的(委托给组件最外层的元素)----为了更高效

通过event.target得到发生事件的DOM元素对象 -----不要过度使用ref

//不过度使用ref：发生事件的元素正好是我要操作的元素时，就可以避免使用ref（受控组件可以发生事件与操作的元素不同）
//失去焦点的时候react会帮你调用这个函数，并把事件对象event传进去
//就可以拿到发生事件的事件源event.target，event.target就是input框
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} type="text" placeholder="失去焦点提示数据" />&nbsp;
		</div>
	)
}

5.2 表单组件的分类

受控组件，输入类的dom，随着你的输入，就会把东西维护到状态里面取，用的时候从状态里面取出来（不写ref）

state = {//初始化状态
	username:'', //用户名
	password:'' //密码
}

//保存用户名到状态中
saveUsername = (event)=>{
	this.setState({username:event.target.value})
}

//保存密码到状态中
savePassword = (event)=>{
	this.setState({password:event.target.value})
}

//表单提交的回调
handleSubmit = (event)=>{
	event.preventDefault() //阻止表单提交
	const {username,password} = this.state
	alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}

render(){
	return(
		<form onSubmit={this.handleSubmit}>
			用户名：<input onChange={this.saveUsername} type="text" name="username"/>
			密码：<input onChange={this.savePassword} type="password" name="password"/>
			<button>登录</button>
		</form>
	)
}

非受控组件，现用现取，需要ref

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>
	)
}

6 高阶函数与函数柯里化

受控组件中保存输入数据到状态的箭头函数写了太多遍，要是东西很多，写一堆箭头函数

写一个函数saveFormData(‘username’)，并告诉它参数

onChange={this.saveFormData(‘username’)}，这样写的意思是将saveFormData的返回值作为onChange的回调，如果返回值是一个函数就美好了，返回的这个函数才是真正的回调
在这里插入图片描述

不要说函数回调写不写括号，总结一句话就是，一定要把一个函数交给XXX作为回调

saveFormData就是一个高阶函数（返回值是函数）

//保存表单数据到状态中
saveFormData = (dataType) => {
	return (event) => {
		//基本功 对象里面读取变量[]
		this.setState({ [dataType]: event.target.value })
	}
}

render() {
	return (
		<form onSubmit={this.handleSubmit}>
			用户名：<input onChange={this.saveFormData('username')} type="text" name="username" />
			密码：<input onChange={this.saveFormData('password')} type="password" name="password" />
			<button>登录</button>
		</form>
	)
}

6.1 高阶函数

如果一个函数符合下面两个规范中的任何一个，那该函数就是高阶函数

若A函数,接受的参数是一个函数,那么A就可以称之为高阶函数
若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数

常见的高阶函数有:Promise、setTimeout、arr.map()等等

6.2 函数的柯里化

通过函数调用继续返回函数的方式，实现对此接受参数最后统一处理的函数编码形式

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

6.3 不用函数柯里化实现事件的绑定

直接使用回调函数，因为他本身就是以一个函数为返回值

<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>

7 生命周期

组件从创建到死亡它会经历一些特定的阶段

React组件中包含一系列钩子函数(生命周期回调函数)，会在特定的时刻调用

我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作

7.1 React生命周期(旧)

在这里插入图片描述

各个生命周期钩子调用顺序

初始化阶段：由ReactDOM.render()触发

constructor()
compinentWillMount()
render()
componentDidMount() ==>常用

一般在componentDidMount()钩子中做一些初始化的事情，如：开启定时器，发送网络请求，订阅消息等

更新阶段：由组件内部的this.setState()或者父组件的render触发

三条路线之一：setState()路线

shouldComponentUpdate() 组件应该更新，不写的话底层会自动补一个，且返回值是true，自己写记得要返回值
componentWillUpdate() 组件将要更新
render() ===>必须使用的一个
componentDidUpdate() 组件将要更新

三条路线之二：forceUpdate()路线：

forceUpdate()强制更新：不对状态做修改也想更新组件，跳过shouldComponentUpdate()

三条路线之三：父组件render

在子组件中写componentWillReceiveProps构子，意思就是子组件将要接收传递过来的参数时调用（注意：第一次传的时候不调用！！！），也可以接收到props参数

卸载组件：由ReactDOM.unmountComponentAtNode(卸载节点上的组件)触发

componentWillUnmount() ===>常用 组件将要卸载

一般在这个钩子中做一些首位的事情，如：关闭定时器，取消订阅等

7.2 React生命周期(新)

在这里插入图片描述

三个构子以UNSAFE_开头：UNSAFE_compinentWillMount()，UNSAFE_componentWillReceiveProps()，UNSAFE_componentWillUpdate()

记法：带will的构子都希望加UNSAFE_，除了将要卸载（这三个都是不推荐使用的钩子）

为什么要加这些前缀：被很多人误解和滥用，尤其之后要发布新的异步渲染中，这将导致错误。加前缀就是提高使用成本

在这里插入图片描述

小结：旧的生命周期将要废弃三个钩子，新的增加2个钩子

初始化阶段：由ReactDOM.render()触发 —初次渲染

constructor()
getDerivedStateFromProps() 从Props获得派生状态===>不常用

getDerivedStateFromProps()不是给实例用的，所以定义成类中的静态方法，且需要返回值：状态对象或null，可以接收参数正是props和state

而且要是返回状态对象，那么不会触发更新了，以返回的对象为主；如果return的对象不是自己写的，而是接收的props，那么这个就是从Props获得派生状态的解释，简单来说就是用了这个钩子之后，state的值取决于传入的props且影响更新

render()
componentDidMount() ====>常用

更新阶段：由组件内部的this.setState()或者父组件的render触发

getDerivedStateFromProps() 从Props获得派生状态
shouldComponentUpdate() 组件应该更新
render()
getSnapshotBeforeUpdate() 在更新前获得快照

getSnapshotBeforeUpdate()需要返回一个快照值或null，任何值当可以作为快照值，return给componentDidUpdate

获取快照的意思：在组件即将更新到页面之前咔嚓一些张做点操作

在这里插入图片描述

componentDidUpdate()

componentDidUpdate()接收三个参数(preProps,preState,snapshotValue)，最后一个参数就是getSnapshotBeforeUpdate钩子传来的

卸载组件:由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount() ===>常用

7.3 重要的钩子

render：初始化渲染或者更新渲染调用
componentDidMount() ：开启监听：发送ajax请求
componentWillUnmount()：做一些收尾工作，如：清理定时器

7.4 即将废弃的钩子

componentWillMount
componentWillReceiveProps
componentWillUpdate

ps:现在使用会出现警告，之后版本可能需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃,不建议使用

推测React团队认为提高使用成本将会间接影响我们，让我们去适应新的钩子，所以加上这个

8 React/VUE中的key

经典面试题:

React/VUE中的key有什么作用（key的内部原理是什么）
为什么遍历列表时，key最好不要用index

8.1 虚拟DOM中key的作用

简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用

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

旧虚拟DOM中找到了与新虚拟DOM相同的key：

  若虚拟DOM中内容没变，直接使用之前的真实DOM

  若虚拟DON中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

旧虚拟DOM中未找到与新虚拟DOM相同的key：

  根据数据创建新的真实DOM，随后渲染到页面

8.2 用index作为key可能会引发的问题

若对数据进行:逆序添加,逆序删除等破坏顺序操作：

  会产生没有必要的真实DOM更新 ==>界面效果没问题，但是效率低

如果结构中还包含输入类的DOM

  会产生错误DOM更新 ===>界面有问题

注意：

  如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

8.3 开发中如何选择key

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等
如果确定只是简单的展示诗句，用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>