第1章: React入门
1.1 React简介
- React官网
React
由FaceBook
开源,用于动态构建用户界面的JS
库(只关注于视图)
1.1.1 React特点
- 声明式编码(告诉“机器"想要什么,让机器去做,类似 Array.map方法)
- 组件化编码, 页面中的都可以拆成小组件进行展示
- 可编写原生应用(React Native)
- 高效:
① 通过使用虚拟DOM的技术,不直接操作页面真实的DOM;
② 通过diff算法找出最小更新的部分,实现精细化最小量更新以达到最小页面重绘和回流
1.2 React的基本使用
在使用React之前,需要介绍与React相关的三个相关js库。
react.js
: React核心库react-dom.js
: 提供操作DOM的react扩展库babel.min.js
: 解析JSX语法代码转为JS代码的库
1.2.3 创建虚拟DOM的两种方式
- 纯JS方式
<script type="text/javascript" > //1.创建虚拟DOM const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React')) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script>
- JSX方式
<script type="text/babel" > /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = ( /* 此处一定不要写引号,因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1> ) //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test')) </script>
- 注意事项: script中的type一定要变成
text/babel
,因为浏览器是不认识jsx语法的,需要通过babel转换成纯JS代码才能运行
1.2.4 虚拟DOM与真实DOM
- React提供了
createEelement
来创建虚拟DOM对象,最终会被React转换为真实的DOM - 编码时只需操作React的虚拟DOM相关数据,React在底层会转换成真实的DOM
- 虚拟DOM本质是
Object类型
的对象(一般对象);虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性。虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
1.3 什么是JSX
- 全称:
JavaScript XML
, 类似于XML
的JS扩展语法,JS + XML本质是React.createElement(component, props, ...children)
方法的语法糖 - 简化创建虚拟DOM,既不是字符串,也不是HTML/XML标签,最终禅城的就是JS对象
- 语法规则:
(1) 遇到<
开头的代码,以标签的语法解析,html
同名标签转换为html
同名元素,其他标签特别解析;若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
(2) 定义虚拟DOM时,不要写引号。
(3) 标签中混入JS表达式时要用{},注意: 一定只能是表达式,不能是语句。
(4) 样式的类名指定不要用class,要用className
。
(5)内联样式,要用style={{key:value}}
的形式去写。
(6)标签必须闭合且只有一个根标签
1.3.1 渲染虚拟DOM元素
- 语法
ReactDOM.render(virtualDOM, containerDOM)
- 作用: 将虚拟DOM元素渲染到页面的真实容器DOM中显示
1.4 扩展
1.4.1 扩展之表达式和语句
-
js语句(代码)与js表达式
表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方,下面这些都是表达式:(1). a (2). a+b (3). demo(1) (4). arr.map() (5). function test () {}
语句(代码): 下面这些都是语句(代码):
(1).if(){} (2).for(){} (3).switch(){case:xxxx}
1.4.2 扩展之模块与组件、模块化与工程化的理解
- 模块:将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起,块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信。
- 模块化:当项目中的js都是以模块来进行编写,那么就是模块化应用。常见如:
CommonJS
、AMD
、ESModule
、CMD
- 模块化的好处:
(1)避免命名冲突
(2)更好分离,按需加载
(3) 复用性和可维护性 - 组件:将一段UI样式和其对应的功能作为独立的整体去看待。代码和资源的集合(html/css/js/image等)
- 组件化:当项目中都采用多组件的方式实现
第二章 React面向组件编程
2.1 基本使用
2.1.1 使用React开发者工具调试
React Developer Tools
2.1.2 组件分类
-
函数式组件
执行ReactDOM.render(<MyComponent/>
以后,
① 首先React解析组件标签,找到了MyComponent组件;
② 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中<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组件;
② 发现组件是使用类定义的,随后new出来该类的实例(创建组件实例对象),并通过该实例调用到原型上的render方法。
③ 将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。<script type="text/babel"> //1.创建类式组件 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>
2.1.3 开发组件注意事项
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
2.2 组件三大核心属性之state
2.2.1 基本含义
- satate是组件对象最重要的属性,值可以是包含多个key-value的组合
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
2.2.2 注意事项
- 组件中的render方法中的this为组件实例对象,通常render会被调用1+n 次,只要state有值发生变化,render就会被重新调用
- 组件自定义的方法中this为undefined
① 强制绑定this,通过函数对象的bind(返回一个函数)
② 箭头函数 - 状态数据不能直接修改或者更新
//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'))
2.3 组件三大核心属性之props
- 只有这个属性在函数组件里有
2.3.1 props理解
- 每个组件对象都会有props(properties)属性
- 组件标签里的所有属性都保存在props中
2.3.2 作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改props数据,单向数据流
2.3.3 对props进行操作
- 内部读取某个属性值
this.props.name
- 利用
prop-types库
进行限制,并且设置属性值
1 .yarn add prop-types
//对标签属性进行类型、必要性的限制 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 }
- 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
- 组件类的构造函数
constructor(props){ //构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过this访问props // console.log(props); super(props) console.log('constructor',this.props); }
2.4 组件三大核心属性之ref与事件处理
2.4.1 ref理解
- 组件内部的标签可以定义ref属性来标识自己,类似于dom操作
2.4.2 使用
- 字符串形式的ref,字符串ref,效率不高
// 定义 <input ref = "input1"> // 使用 const {input1} = this.refs
- 回调形式的ref,回调ref中回调执行次数得问题: 会出现两次
class Demo extends React.Component{
//展示左侧输入框的数据
showData = ()=>{
const {input1} = this
alert(input1.value)
}
render(){
return(
<div>
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button> 
</div>
)
}
}
- createRef创建ref容器
React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
// 定义
myRef = React.createRef()
// 组件里使用
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
2.4.3 事件处理
- 通过
onXxx
属性指定事件处理函数(注意大小写)
(1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件,为了有更好的兼容性
(2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) - 通过
event.target
得到发生事件的DOM元素对象,不要过度使用ref
2.5 收集表单数据
2.5.1 表单组件分类
- 受控组件: 原生的
onChange
事件,随着输入可以拿到最新的值,在这里可以改变state里的值;随着输入值的改变,将其维护到状态里去(利用onChange
),需要用的时候从状态里取出来;这就类似于vue的双向数据绑定;建议用受控组件,因为非受控组件会创建很多ref
//创建组件
class Login extends React.Component{
//初始化状态
state = {username:'', //用户名}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username: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"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
- 非受控组件: 所有输入类的dom,现用现取,就是非受控组件, 通过ref去取。
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名是:${username.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input ref={c => this.username = c} type="text" name="username"/>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
2.5.2 高阶组件之函数柯里化
场景: 比如表单里为了统一收集数据,那么可以一个函数,但是react封装的方法都必须接收一个函数,所以就用到了高阶函数
定义:
如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
(1)若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
(2)若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。
常见的高阶函数有:Promise
、setTimeout
、arr.map()
等等
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存表单数据到状态中
// 利用高阶函数,因为onXX必须接收一个函数,所以要返回一个函数
saveFormData = (dataType)=>{
// 为了把dataType传递出去给调用返回函数的地方使用
return (event)=>{this.setState({[dataType]:event.target.value})
}
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是:${username},你输入的密码是:${password}`)
}
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>
)
}
}
2.5.3 不用柯里化实现收集数据
<form onSubmit={this.handleSubmit}>
用户名:<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
密码:<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
<button>登录</button>
</form>
//保存表单数据到状态中
saveFormData = (dataType,event)=>{
this.setState({[dataType]:event.target.value})
}
2.6 组件的生命周期
2.6.1 生命周期的理解
- 组件从创建到卸载会经历一些特定的阶段
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作
2.6.2 生命周期流程图(旧)
- 初始化阶段: 由ReactDOM.render()触发—初次渲染
(1)constructor(): 构造器
(2)componentWillMount(): 即将挂载
(3)render(): 初始化渲染,状态更新之后调用调用次数是1+n次
(4) componentDidMount(): 组件挂载完毕 ==>常用,一般在这个钩子中做一些初始化的事情,比如: 开启定时器和网络请求,类似于Vue里的mounted
- 更新阶段: 由组件内部this.setSate()或父组件重新render触发
(1)shouldComponentUpdate()
:setState
时调用,返回的是true,允许更改,否则不允许;更新操作就停止了. 组件优化的时候会使用到这个生命周期,但是后续提供了pureComponent
(2)componentWillUpdate()
:forceUpdate()
(强制更新,就是比setState少走一个环节)时调用,组件将要更新的钩子
(3)render()
: 更新完成之前调用
(4)componentDidUpdate()
: 组件更新完毕的钩子
(5)componentWillReceiveProps
: 组件将要接收新的props的钩子,父组件一旦render,就会响应这个钩子函数;第一次传的不算。
- 利用setState会经过以下阶段
shouldComponentUpdate
=>componentWillUpdate
=>render
=>componentDidUpdate
- 卸载组件: 由
ReactDOM.unmountComponentAtNode()
触发
(1)componentWillUnmount(),做一些收尾工作,比如,关闭定时器,取消订阅
2.6.3 生命周期流程图(新)
在React17.0.2
提出了新的生命周期函数,废弃了三个生命周期函数(componentWillMount,componentWillReceiveProps,componentWillUpdate),新增了两个生命周期函数(getDerivedStateFromProps和getSnapshotBeforeUpdate)。
Derived:衍生的
-
初始化阶段: 由ReactDOM.render()触发—初次渲染
(1)constructor()
(2)getDerivedStateFromProps
(3)render()
(4)componentDidMount() -
更新阶段: 由组件内部this.setSate()或父组件重新render触发
(1)getDerivedStateFromProps:不常用,从props中得到派生的状态;使用场景:如果state的值的初始化以及更新全部都取决于props
(2)shouldComponentUpdate()
(3)render()
(4)getSnapshotBeforeUpdate: 在更新之前获取快照;render只后,更新之前调用。捕获dom的一些信息,比如滚动位置;这样在componentDidUpdate里的第三个参数就可以取到了
(5)componentDidUpdate() -
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
(1)componentWillUnmount()
2.6.5 常用钩子函数
- render:初始化渲染或更新渲染调用
- componentDidMount:开启监听, 发送ajax请求
- componentWillUnmount:做一些收尾工作, 如: 清理定时器
2.7 虚拟DOM和DOM Diff算法
2.7.1 原理图
2.7.2 react/vue中的key有什么作用?(key的内部原理是什么?)
为什么遍历列表时,key最好不要用index?
- 虚拟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,随后渲染到到页面 - 用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM:会产生错误DOM更新 ==> 界面有问题,因为input没有被重新渲染。
- 注意:如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。
- 开发中如何选择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> // value=测试
更新后的数据:
{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> // value=测试,发现key值一样,只做了更新操作
<li key=2>小李---19<input type="text"/></li>
// 从以上可以看出,因为逆序,导致key全部都不一样,所以都要重新比对。
-----------------------------------------------------------------
慢动作回放----使用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>