React基础知识与概念
此笔记为本人学习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="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<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="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>
</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="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</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>