【React笔记】-1-React基础知识与概念

最新推荐文章于 2024-06-19 16:36:39 发布

我不是小滑块

最新推荐文章于 2024-06-19 16:36:39 发布

阅读量406

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53478983/article/details/124754972

版权

React基础知识与概念

一、react简介
二、jsx语法规则
- 1、规则
- 2、区别`js语句(代码)`与`js表达式`
三、两种组件定义区别、组件与模块理解
四、react面向组件编程
五、生命周期
六、react中的key

此笔记为本人学习React时观看尚硅谷2021版React技术全家桶全套完整版整理而成。
预备知识：HTML+CSS+JS、Webpack、Ajax、Promise、Axios

一、react简介

1. 官网链接:中文官网
2. 用于动态创建用户界面的JavaScript(只关注视图)
3. 由FaceBook开源

1、react的特点

声明式编程
组件化编程
React Native编写原生应用
高效(优秀的Diffing算法)

2、react高效的原因

使用虚拟(virtual)DOM，不直接操作页面真实DOM
DOM Diffing算法，最小化页面重绘
注意：React并不会提高渲染速度，反而可能会增加渲染时间，真正高效的原因是它能有效减少渲染次数

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

在创建虚拟DOM之前，先要做好如下的准备工作

    <!-- 准备好一个‘容器’ -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom扩展库，用于支持react操作DOM -->
    <script src="../js/react-dom.development.js"></script>

a.js创建虚拟DOM(不推荐)

//1.创建虚拟DOM，创建嵌套格式的DOMS
const VDOM=React.createElement('h1',{id:'title'},React.crteateElement('span',{},'hello React'))
//2.渲染虚拟DOM到页面上
ReactDOM.render(VDOM,document.getElementById('test'))

b.jsx创建虚拟DOM

//1.创建虚拟DOM
const VDOM=(//此处一定不可以加引号，因为不是字符串
	<h1 id='title'>
		<span>Hello React</span>
	</h1>
)
//2.渲染虚拟DOM到页面上
ReactDOM.render(VDOM,document.geyElementById('test')

可以看到，上下两种方式，明显jsx的写法更好，当出现多重嵌套时，js创建的方法会使我们的变成出现很大的麻烦
但是jsx其实也只是帮我们做了一层编译，当我们写完jsx代码后，最终会被编译成js的书写方式

4、关于虚拟DOM

本质是Object类型的对象(一般对象)
虚拟DOM比较‘轻’，真实DOM比较‘重’，因为虚拟DOM是在React内部使用，无需真实DOM上那么多属性
虚拟DOM最终会被React转化为真实DOM，呈现在页面上

二、jsx语法规则

JSX是一种JavaScript的语法扩展，是一种嵌入式的类似于XML的语法，常应用于React架构中，但也不仅限于此。应该说JSX因React框架而流行。

1、规则

定义虚拟DOM时，不要写引号
标签中混入js表达式时要用{}
样式的类名指定不要用class，要用className
内联样式，要用style={{key:value}}的形式(双括号代表对象，单括号代表表达式)去写
只有一个根标签(整个虚拟DOM在外层有且仅有一个容器包裹)
标签必须闭合
标签首字母若以小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
标签首字母若以大写字母开头，react就去渲染对应组件，若组件没有定义，则报错

2、区别`js语句(代码)`与`js表达式`

三、两种组件定义区别、组件与模块理解

1、react中定义组件

a.函数式声明组件

执行了ReactDOM.render(…之后，发生了什么？

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

b.类式组件

执行了ReactDOM.render(…之后，发生了什么？

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

组件中的render是放在哪里的？
MyComponent的原型对象上，供实例使用
组件中的render中的this是谁？
MyComponent的实例对象 <=> MyComponent组件实例对象

2、模块与模块化

a.模块

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

b.模块化

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

3、组件与组件化

a.组件

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

b.组件化

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

四、react面向组件编程

1. 使用React开发者工具调试：React Developer Tools
2. 注意：

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

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

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

1、组件三大属性1:state

a.理解

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

b.强烈注意

组件中的render方法中的this为组件实例对象
组件自定义方法中的this位undefined，如何解决？

强制绑定this：通过函数对象的bind()
箭头函数推荐

状态数据，不能直接修改或更新

c.代码示例

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

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

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

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

2、组件三大属性2:props

a.理解

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

b.作用

通过标签属性从组件外向组件内部传递变化的数据
注意：组件内部不要修改props数据

c.代码示例

类组件使用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'))

函数组件使用props

//创建组件
function Person (props){
	const {name,age,sex} = props
	return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			</ul>
		)
}
//此处限制可以换成typrScript
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'))

3、组件三大属性3:refs

a.理解

组件内的标签可以定义ref来表示自己

b.代码示例

字符串形式的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

/**下面的this指的是组件实例,我直接this.input1 = c 意思是给实例上的input1赋值,之后直接通过调用打印得到*/
//展示左侧输入框的数据
	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>
		)
	}
}

createRef创建ref容器(最推荐的)

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

4、事件处理与收集表单数据

a.事件处理

通过onXXX属性指定事件处理函数(注意大小写)

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

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

b.表单组件的分类

就形式上来说，受控组件就是为了某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件

受控组件

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

非受控组件

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

5、高阶函数与函数柯里化

a.高阶函数

如果一个函数符合下两个规范中的任何一个，那么该函数就称为高阶函数
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
2.若A函数，调用的返回值依然是一个函数，那么A就可称之为高阶函数

b.函数的柯里化

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

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

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

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

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

五、生命周期

1.组件从创建到死亡它会经历一些特定的阶段
2.React组件包含一系列钩子函数(生命周期回调函数)，会在特定时刻调用
3.我们在定义组件时，会在特定时刻的生命周期回调函数中，做特定的工作

1、react生命周期(旧)

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

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

a)constructor()
b)componentWillMount()
c)render()
d)componentDidMount()==>常用，组件将要渲染

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

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

a)shouldComponentUpdate()组件是否更新
b)componentWillUpdate()组件将要更新
c)render()—>必须使用的一个
d)componentDidUpdate()组件已经更新完成

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

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

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

2、react生命周期(新)

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

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

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

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

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

3、重要的钩子

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

4、即将废弃的钩子

componentWillMount
componentWillReceiveProps
componentWillUpdate

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

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

六、react中的key

经典面试题：
1).react/vue中的key有什么作用？(key的内部原理是什么？)
2).为什么遍历列表时，key最好不要用index？

1、虚拟DOM中key的作用

简单的说:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用
详细的说:当状态当中的数据发生变化时,react会根据新数据生成新的虚拟DOM,随后React进行新虚拟DOM与旧虚拟DOM的diff比较,比较规则如下:
旧虚拟DOM中找到了与新虚拟DOM相同的key：

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

b)若虚拟DON中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：
根据数据创建新的真实DOM,随后渲染到页面

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

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

会产生没有必要的真实DOM更新 ==>界面效果没问题,但是效率低
如果结构中还包含输入类的DOM:

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

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

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>

我不是小滑块

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React笔记】-1-React基础知识与概念

React基础知识与概念一、react简介1、react的特点2、react高效的原因3、创建虚拟DOM的两种方式a.js创建虚拟DOM(不推荐)b.jsx创建虚拟DOM4、关于虚拟DOM二、jsx语法规则1、规则2、区别`js语句(代码)`与`js表达式`三、两种组件定义区别、组件与模块理解1、react中定义组件a.函数式声明组件b.类式组件2、模块与模块化a.模块b.模块化3、组件与组件化a.组件b.组件化四、react面向组件编程1、组件三大属性1:statea.理解b.强烈注意c.代码示例正常的用
复制链接

扫一扫