03-React事件处理 & 生命周期 & Diffing算法
React事件处理
背景
1.通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
比如原生onclick的事件在React中变成了onClick，这么搞是为了更好的兼容性
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
比如，div标签中有input，button等标签，这里面的事件最终都会被委托给最外层的div上
事件委托的原理是事件冒泡，这么做的原因是高效
2.通过event.target得到发生事件的DOM元素对象 ~~~ 不要过度使用ref
受控组件与非受控组件
功能：需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录显示输入的信息
非受控组件（不推荐）
非受控组件主要是用ref来做管理，而ref获取的是DOM，React官方建议少用ref
比如一个表单，点击button进行提交的这个动作，作为H5的默认动作，默认是不阻止提交的，这个就叫非受控组件
<script type="text/babel">
class Login extends React.Component{
handleSubmit=()=>{
//阻止默认的表单提交
event.preventDefault()
// 解构对象，拿到ref设置的DOM
// 其实这是一种现用现取的逻辑，所以是非受控组件
const {username,password} =this
alert(`${username.value},${password.value}`)
}
render(){
return (
<div>
<form action="www.atguigu.com" onSubmit={this.handleSubmit}>
{/*将属性通过ref设置到对象身上，以便使用时获取*/}
用户名<input ref={(c)=>this.username=c} type="text" name="username"></input>
密码<input ref={(c)=>this.password=c} type="password" name="password"></input>
<button>登陆</button>
</form>
</div>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
受控组件（推荐）
页面中所有输入的DOM(input，radio…等等)，输入的时候，就把输入的内容，set到state里面，等需要用的时候，再取出来
而不是像非受控组件一样，等到需要用的时候，再去现获取。而且非受控组件写了大量的ref属性，在React看来也是不推荐的写法（类似vue双向绑定）
例子：
稍加修改，我们把数据暂存到state里面，用state来暂存可以达到同样的效果
如果是多个的属性，用ref获得到大量的DOM元素就会很乱，不如统一扔进state更方便
最后代码：
<script type="text/babel">
class Login extends React.Component{
//初始化一下state，如果不写也可以
state={
username:"",
password:""
}
// 管理表单中的n多个属性
saveUsername=(event)=>{
//set的时候用this.setState({key:value})
this.setState({username:event.target.value})
}
savePassword=(event)=>{
// 注意要用setState的API，如果是this.state就会被认为是更新操作
this.setState({password:event.target.value})
}
showValue=(event)=>{
//阻止提交后发生跳转
event.preventDefault()
// 解构，这时就得到的属性，而不是之前的DOM了
const {username,password}=this.state
//所以就不再需要再像ref一样去DOM.value，因为直接获取到的就是属性，而不是DOM
console.log(username,password)
}
render(){
return (
<div>
<form onSubmit={this.showValue}>
{/*每次change的时候都会实时同步到state里面*/}
用户名<input onChange={this.saveUsername} type="text" name="username"></input>
密码<input onChange={this.savePassword} type="password" name="password"></input>
<button>登陆</button>
</form>
</div>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"))
</script>
着重注意一下这里，其实就是ref 解构出来DOM和state 解构出来属性上的区别
柯里化概念
只有函数才有柯里化
高阶函数: 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
- 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
- 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有: Promise、setTimeout、arr.map()等等
函数的柯里化: 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
高阶函数——函数柯里化
上面的内容其实不难发现，有很大优化空间
比如：
如果有大量的属性，那么复用性很差，有大量冗余，所以不建议这么搞
// 管理表单中的n多个属性
saveUsername=(event)=>{
//set的时候用this.setState({key:value})
this.setState({username:event.target.value})
}
savePassword=(event)=>{
// 注意要用setState的API，如果是this.state就会被认为是更新操作
this.setState({password:event.target.value})
}
<input onChange={this.saveUsername} type="text" name="username"></input>
理所当然的就想着抽共同调用，抽共通的话就需要把当前的key的名字传进去
重点来了
从这样
<input onChange={this.saveUsername} type="text" name="username"></input>
到这样
<input onChange={this.saveUsername("username")} type="text" name="username"></input>
会有一个问题，就是this.saveUsername是一个属性this.saveUsername("username")是一个函数，而这个函数是没有返回值的！
这样就会导致onChange得到的函数return一个undefined。这里的undefined是因为没有标记return。
所以怎么办呢，就是把函数的return用箭头函数改造一下！我让return有返回值，但是返回一个空的箭头处理，即有了返回值，又有了处理。
// 管理表单中的n多个属性
saveValue = (value) => {
//这个event是React自动传入，我们无法手动set，所以不能在方法里传入
return (event) => {
this.setState({ [value]: event.target.value });
};
};
//调用时传入key
<input onChange={this.saveUsername("username")} type="text" name="username"/>
这里为什么value要用[ ]套一下？
this.setState({ [value]: event.target.value });
这里的value用[]套一下是因为它是当前对象的一个变量，而不是一个字符串。在JavaScript中，当你使用方括号（[]）来访问对象的属性时，如果属性名是一个变量，那么你需要将变量放在方括号内。这样，你就可以动态地访问和设置对象的属性值。
换句话说，这个方括号（[]），直接把value从字符串转换成对象的一个属性了
贴上完整代码：
<!--将JSX转换成JS用的依赖，因为浏览器不认识JSX，只认识JS-->
<script type="text/babel">
class Login extends React.Component {
//初始化一下state，如果不写也可以
state = {
username: "",
password: "",
};
// 管理表单中的n多个属性
saveValue = (value) => {
//这个event是React自动传入，我们直接取值即可
return (event) => {
this.setState({ [value]: event.target.value });
};
};
render() {
return (
<div>
<form>
用户名
<input
onChange={this.saveValue("username")}
type="text"
name="username"
></input>
密码
<input
onChange={this.saveValue("password")}
type="password"
name="password"
></input>
<button>登陆</button>
</form>
</div>
);
}
}
ReactDOM.render(<Login />, document.getElementById("test"));
</script>
不用柯里化的写法
不用柯里化对其进行改造，也就是不再采用上面的return箭头函数
关键在于在标签里就把event传进去
改造一下，此时event就直接传入方法了：
<input onChange={(event) => {this.saveValue("username", event)} type="text" name="username" ></input>
saveValue = (value, event) => {
this.setState({ [value]: event.target.value });
};
测试效果是一样的，好用
全部代码：
<script type="text/babel">
class Login extends React.Component {
//初始化一下state，如果不写也可以
state = {
username: "",
password: "",
};
// 管理表单中的n多个属性
saveValue = (value, event) => {
this.setState({ [value]: event.target.value });
};
render() {
return (
<div>
<form>
用户名
<input
onChange={(event) => {
this.saveValue("username", event);
}}
type="text"
name="username"
></input>
密码
<input
onChange={(event) => {
this.saveValue("password", event);
}}
type="password"
name="password"
></input>
<button>登陆</button>
</form>
</div>
);
}
}
ReactDOM.render(<Login />, document.getElementById("test"));
</script>
React生命周期
React生命周期可以分为旧版和新版，这里旧版生命周期并非弃用，新版只是在旧版生命周期的上面，废弃了三个API，新增了两个API，所以还是有学习旧版生命周期的必要性。
旧版生命周期
可以看到，可以分为两大部分，分别为挂载初始化时和组件更新时
render函数贯穿两大部分，因为无论是初始化，还是组件更新，都需要重新渲染，diffing差分等等。
每个部分都有对应的函数供我们使用。
初始化阶段API（由ReactDOM.render()触发—初次渲染）
主要集中于这四个API，无论代码的顺序如何，都会按照这个生命周期的顺序进行执行。
-
1、
constructor()
完成了React数据的初始化，state设值等等。 -
2、
componentWillMount()
组件已经完成初始化数据，但是还未渲染DOM时执行的逻辑，主要用于服务端渲染，网络请求等。 -
3、
render()
组件开始渲染真实DOM。 -
4、
componentDidMount()
组件第一次渲染完成时执行的逻辑，此时DOM节点已经生成了。
代码：
<script type="text/babel">
class Login extends React.Component {
constructor(Props) {
super(Props);
console.log("constructor 执行");
}
componentWillMount() {
console.log("componentWillMount 执行");
}
componentDidMount() {
console.log("componentDidMount 执行");
}
render() {
console.log("render 执行");
return <div>123</div>;
}
}
ReactDOM.render(<Login />, document.getElementById("test"));
</script>
执行可以发现，按照生命周期的顺序输出
更新阶段API（由组件内部this.setSate()或父组件重新render触发）
一般来说，更新阶段API都是在属性变更时触发，比如state属性变化，页面上组件变化，就会触发更新阶段的API
-
1、componentWillReceiveProps(nextProps)
接收父组件新的props时，重新渲染组件执行的逻辑，括号里的参数可以选择接收之后打印一下。注意，这个API在初次接收的时候是不会更新的，只有第二次接收之前才会触发 -
2、shouldComponentUpdate(nextProps, nextState)
在setState以后，state发生变化，组件会进入重新渲染的流程时执行的逻辑。在这个生命周期中return false可以阻止组件的更新，主要用于性能优化。 -
3、componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true以后，组件进入重新渲染的流程时执行的逻辑。 -
4、render()
页面渲染执行的逻辑，render函数把jsx编译为函数并生成虚拟dom，然后通过其diff算法比较更新前后的新旧DOM树，并渲染更改后的节点。 -
5、componentDidUpdate(prevProps, prevState)
重新渲染后执行的逻辑。
父子组件传值例子：
定义了两个类组件（A组件 , B组件），B组件在A组件内使用，A组件向B组件传值，每次只要值更新，就会触发更新生命周期函数
<script type="text/babel">
class A extends React.Component {
// 给state默认值
state = {
car: "宝马",
};
// 更新传入值
changeCar = () => {
this.setState({ car: "奥迪" });
};
render() {
return (
<div>
<div>A组件</div>
<button onClick={this.changeCar}>更新组件，给B传值触发更新</button>
{"B组件传入A的state属性"}
<B car={this.state.car} />
</div>
);
}
}
class B extends React.Component {
render() {
return <div>{this.props.car}</div>;
}
}
ReactDOM.render(<A />, document.getElementById("test"));
引出API
在这个传值的过程中会触发很多生命周期API，挨个试验一下
- 1、componentWillReceiveProps(nextProps)
接收父组件新的props时，重新渲染组件执行的逻辑，括号里的参数可以选择接收之后打印一下。注意，这个API在初次接收的时候是不会更新的，只有第二次接收之前才会触发
- 2、shouldComponentUpdate(nextProps, nextState)
参数不传也完全可以
setState操作就会触发这个钩子，，state发生变化，组件会进入重新渲染的流程时执行的逻辑。在这个生命周期中return false或不指定返回内容（默认undefined） 可以阻止组件的更新，相当于更新组件的阀门。
稍微修改一下代码，手动return true，就可以继续更新组件了
shouldComponentUpdate() {
console.log("shouldComponentUpdate 执行了！");
return true;
}
- 3、componentWillUpdate(nextProps, nextState)
参数不传也完全可以
shouldComponentUpdate返回true以后，组件进入重新渲染的流程时执行的逻辑。通俗讲就是渲染前的钩子 - 4、render()
页面渲染执行的逻辑，render函数把jsx编译为函数并生成虚拟dom，然后通过其diff算法比较更新前后的新旧DOM树，并渲染更改后的节点。 - 5、componentDidUpdate(prevProps, prevState)
参数不传也完全可以
重新渲染后执行的逻辑。通俗讲就是渲染完毕后的钩子
代码（这里只有更新阶段钩子）
<script type="text/babel">
class A extends React.Component {
// 给state默认值
state = {
car: "宝马",
};
// 更新传入值
changeCar = () => {
this.setState({ car: "奥迪" });
};
shouldComponentUpdate() {
console.log("A标签的 shouldComponentUpdate 执行了！");
return true;
}
componentWillUpdate() {
console.log("A标签的 componentWillUpdate 执行了！（组件渲染前）");
return false;
}
componentDidUpdate() {
console.log("A标签的 componentDidUpdate 执行了！（组件渲染完毕）");
return false;
}
render() {
console.log("A标签的 render 执行了！");
return (
<div>
<div>A组件{this.state.car}</div>
<button onClick={this.changeCar}>更新A组件</button>
</div>
);
}
}
ReactDOM.render(<A />, document.getElementById("test"));
</script>
组件卸载（由ReactDOM.unmountComponentAtNode()触发）
最后一个API，在组件卸载之前触发
- componentWillUnmount()
组件卸载方法：ReactDOM.unmountComponentAtNode()
组件的卸载前执行的逻辑，比如进行“清除组件中所有的setTimeout、setInterval等计时器”或“移除所有组件中的监听器removeEventListener”等操作。
旧版生命周期总结
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个，不渲染没法显示
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
新旧生命周期对比
新版本生命周期相对于旧版本，废弃了三个带will的API（componentWillMount()，componentWillReceiveProps()，componentWillUpdate()）
新增了两个API static getDerivedStateFromProps()，getSnapshotBeforeUpdate()
注意：对于已经过时的API不会马上废弃，而是在控制台进行Warning提醒，并且在后续的React版本中，如果非要使用过时的API，就必须在API的前缀上加入UNSAFE_前缀，作为提醒。
比如，从React17版本开始就得加入前缀：
注意，这里的API UNSAFE并不是说这个API就会有安全问题，而是说在未来的预计更新中有概率出现问题。
比如现在切换到React 17版本，再使用过期API就会有提示
在17版本下，使用过时的componentWillMount，PS:这里选的是不需要条件就可以触发的API，另外两个过时的API触发都需要条件
componentWillMount() {
console.log("componentWillMount执行");
}
这几个UNSAFE_ 的API本身用的频率就很低，所以了解一下即可
新版生命周期
初始化阶段API
- 1、
constructor()
完成了React数据的初始化，state设值等等。之前写过就不赘述了
- 2、
static getDerivedStateFromProps()
首先这个组件是静态的，如果不用static，就会报错。看控制台报错，说明这个方法不属于对象，需要用static来进行声明
组件挂载阶段render前的最后一次调用，并且在初始挂载及后续更新时都会被调用。适用于第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子)。返回一个state就更新state，返回一个null就不做更新动作
可以传入props和state
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}
如果这个位置返回一个固定的state的对象，那么这个return的值就会一直影响state，导致其无法更新，因为其return的值是一个固定的state。那肯定就更新不了state了。
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps", props, state);
return {"key":"value"};
}
举一个props影响state的例子，用react的官方例子：
- 3.
render()
组件挂载依靠这个api，不render就不会重新渲染，之前说过，这里不赘述了
- 4.
componentDidMount()
组件挂载完毕之后触发的，也就是render之后
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
更新阶段API
主要集中在这5个钩子
- 1.
getDerivedStateFromProps()
贯穿于组件挂载阶段和更新阶段的API，React 会在初始挂载和后续更新时调用 render 之前调用它。它应该返回一个对象来更新 state，或者返回 null 就不更新任何内容。
比如我想做一个点击按钮就+1的，更新state就会触发组件更新，就会触发这个API
<script type="text/babel">
//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为：{count}</h2>
<button onClick={this.add}>点我+1</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>
- 2.
shouldComponentUpdate(nextProps, nextState)
和老版本的那个一样，当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。默认返回为true,返回false则阻止更新
控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下
在之前的触发state更新的基础上加入API，查看更新时效果
shouldComponentUpdate(props, state) {
console.log("shouldComponentUpdate 执行", props, state);
// return false阻止更新
return false;
}
如果改为return true，那么就会没有问题，继续让state更新
shouldComponentUpdate(props, state) {
console.log("shouldComponentUpdate 执行", props, state);
// return true继续更新
return true;
}
- 3.
render()
这个没啥好说的， 前面的"阀门API"如果调用了，并且都return true了 render就会重新执行，如果不调用那就无所谓了，不会影响render()。
如果反过来， 前面的"阀门API"如果调用了，并且return false了，render后续就无法执行。
- 4.
getSnapshotBeforeUpdate()
在最后一次渲染（提交到dom节点）之前调用，getSnapshotBeforeUpdate(prevProps,prevState,)，这两个参数就是DOM更新前的参数。
在更新之前获取快照，返回值传递给componentDidUpdate(prevProps,prevState,?snapshotValue)的snapshotValue上面。这个"快照"指的是在组件更新之前捕获的某个状态state或数据props的瞬时影像，可以取这个快照里对象的某一个属性，也可以return一个任意的数值。
如果单用这个getSnapshotBeforeUpdate()，是不行的，要搭配componentDidUpdate()使用，要接收参数的
如果单用getSnapshotBeforeUpdate()的话，控制台就会报警
两个搭配在一起使用
//在更新之前,render之后获取快照
getSnapshotBeforeUpdate(prevProps,prevState){
console.log('getSnapshotBeforeUpdate');
return 'atguigu'
}
//组件挂载完毕的钩子
componentDidUpdate(prevProps,precState,snapshot){
console.log('componentDidUpdate 执行！',"getSnapshotBeforeUpdate传入的参数",snapshot);
}
- 5.
componentDidUpdate()
组件更新后触发的函数，和旧版本一样，这里先讨论单独使用componentDidUpdate()的场景
触发一下组件更新操作，触发API
如果是和getSnapshotBeforeUpdate()配合使用的话，我们将获取到其返回值
// // 在更新之前,render之后获取快照
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate");
return "atguigu";
}
// //组件挂载完毕的钩子
componentDidUpdate(prevProps, precState, snapshot) {
console.log("componentDidUpdate 执行 组件更新完毕", snapshot);
}
点击更新操作
最后验证一下新版本生命周期钩子的执行顺序
组件卸载（由ReactDOM.unmountComponentAtNode()触发）
- componentWillUnmount()
在组件卸载之前触发
组件卸载方法：ReactDOM.unmountComponentAtNode()，但是已经在18版本被取代
例子：
<script type="text/babel">
class Count extends React.Component {
componentWillUnmount() {
console.log("componentWillUnmount 执行，组件即将卸载");
}
unMount=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById("test"))
}
render() {
return <div><button onClick={this.unMount}>卸载组件</button></div>;
}
}
//渲染组件
ReactDOM.render(<Count />, document.getElementById("test"));
</script>
单击button，组件就会卸载，在真正卸载之前就会触发componentWillUnmount()执行
虚拟DOM与DOM Diffing算法
颗粒度：DOM Diffing算法对比的最小粒度是标签，且逐层对比
- diffing算法应用在 react / vue 中，用于比较虚拟DOM和真实DOM。
- 虚拟DOM中采用的算法，把树形结构按照层级分解，只比较同级元素，不同层级的节点只有创建和删除操作。
- diffing算法会从根节点开始，一层层的向下比较，如果在某一层的某个节点发现不同了，他就会直接替换这个节点下面的所有子树。
- 渲染真实DOM所消耗的性能是很大的，很多操作都会导致页面重新渲染。 通过diff算法对比新旧vdom之间的差异，可以最小化的执行dom操作，从而提高代码性能。
Diffing算法简单解析