第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>
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
