React学习02 -事件处理、生命周期和diffing算法

文章目录

react事件处理
- - 非受控组件
  - 受控组件
  - 高阶函数
  - 函数柯里化
生命周期
- - 引出生命周期
  - 旧版生命周期
  - 新版生命周期
Diffing算法

react事件处理

1.react通过onXXX属性指定事件处理函数，
a.react使用的是自定义事件，将原生js事件方法重写并改为小驼峰写法，为了更好的兼容性
b.react中的事件是通过事件委托的方式处理的，在给各个标签添加事件时，其实都是加给最外层标签上；

// 原生js使用事件冒泡，将子标签的事件挂在最外层标签上
<ul id="list"><li>item1</li><li>item2</li><li>item3</li>
</ul>
const list = document.getElementById('list');
list.addEventListener('click', (event)=>{if(event.target.tagName === 'LI'){  //通过event.target获取标签元素console.log(event.target.textContent);  // 打印点击的元素内容}
})

2.react通过event.target得到发生事件的DOM元素对象，不要过度使用ref，当发生事件的元素正好的要操作的元素时，可以不使用ref，达到ref的效果。
在调用方法的时候，传递一个event参数，event.target表示的就是当前元素。

class Demo extends React.Component{showData = (event)=>{console.log(event.target); // <input type="text" />console.log(event.target.value); // 输入框的输入的值}render(){return (<input onBlur={this.showData} type="text" />)}
}

非受控组件

拥有输入性标签，比如输入框、单选框、多选框等元素的组件，且标签的值现取现用（比如下面例子中，输入的用户名与密码点击登录需要使用），这样的组件叫做非受控组件。

// 非受控组件示例
class Login extends React.Component{login = ()=>{event.preventDefault(); // 阻止表单提交console.log(this.username.value, this.password.value);}render(){return (<form onSubmit={this.login}><input ref={(a)=>{this.username=a}} type="text" name="username" /><input ref={(a)=>{this.password=a}} type="password" name="password" /><button>登录</button></form>)} // 点击登录后显示用户名与密码，表单提交后默认会跳转页面，所以利用原生事件阻止跳转
}

受控组件

拥有输入性标签，可以将标签的值存储到state里，需要时再拿出来使用的，这样的组件叫做受控组件。

// 受控组件示例
class Login extends React.Component{// 初始化状态state = {username='',password=''}saveUsername = (event)=>{this.setState(username: event.target.value)}savePassword = (event)=>{this.setState(password: event.target.value)}login = ()=>{event.preventDefault(); // 阻止表单提交console.log(this.state.username, this.state.password);}render(){return (<form onSubmit={this.login}><input onChange={this.saveUsername} type="text" name="username" /><input onChange={this.savePassword} type="password" name="password" /><button>登录</button></form>)}  // 使用onCahnge方法，随着标签的值变化，做到state也变化，进而页面也变化，类似vue的双向绑定。
}

建议使用受控组件，可以减少ref的使用。

高阶函数

符合下面两个规范中的任一个的函数，叫做高阶函数。
1.函数接收的参数是一个函数
2.函数返回的是一个函数
常见的高阶函数：Promise, setTimeout, arr.map()得等

// 对象相关的知识，把变量的值作为对象属性的key，要使用[]
let a = 'name';
lei obj = {};
obj.a = 'tom';
console.log(obj); // {a:tom}
obj[a] = 'tom';
console.log(obj); // {a:tom, name:tom}

// 实现只使用一个方法，获取不同的元素值，并存储到state中
class Login extends React.Component{// 初始化状态state = {username='',password=''}saveFormData = (key)=>{console.log(key);return (event)=>{console.log(event.target.value);// this.setState({key:event.target.value}); //这样会给state添加一个属性，{key:输入的值,username='',password=''}this.setState({[key]:event.target.value}); // state={username=输入的值,password=输入的值}} // return的这个函数才是onChange真正的回调}login = ()=>{event.preventDefault(); // 阻止表单提交console.log(this.state.username, this.state.password);}render(){return (<form onSubmit={this.login}><input onChange={this.saveFormData('username')} type="text" name="username" /><input onChange={this.saveFormData('password')} type="password" name="password" /><button>登录</button></form>)}  // 使用onCahnge方法，{}内应该有一个函数作为onChang方法的回调，加了()，在初始化页面的时候就会调用一次saveFormData方法，默认返回undefined，导致onChange方法失效，所以saveFormData需要返回一个函数，才能保持onChange方法的作用
}

函数柯里化

函数里返回函数，外层函数的参数接收，在最内层函数实现统一处理

// 举例，使用函数柯里化实现三数之和
function sum(a){return (b)=>{return (c)=>{return a+b+c}}
}
sum(1)(2)(3)  //6
// 比如上面例子中的saveFormData，外层函数接收key，返回的函数接收event，最后在返回的函数中使用key和event处理数据
saveFormData = (key)=>{return (event)=>{console.log(event.target.value);this.setState({[key]:event.target.value});} 
}

不使用函数柯里化实现onChange传参

class Login extends React.Component{state = {username='',password=''}saveFormData = (key,event)=>{this.setState({[key]:event.target.value}); } login = ()=>{event.preventDefault(); // 阻止表单提交console.log(this.state.username, this.state.password);}render(){return (<form onSubmit={this.login}><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>)} 
}

生命周期

引出生命周期

概念：挂载：mount，卸载：unmount
生命周期回调函数(钩子函数)：componentDidMount、componentWillUnmount、render…

<div id="test"></div>
class Life ectends React.Component{// 移除页面元素removeDiv = ()=>{// claerInterval(this.timer); // 移除定时器，放在componentWillUnmount方法里等效ReactDOM.unmountComponentAtNode(document.getElementById('test')); // 卸载组件}// React在组件挂载完毕时调用componentDidMount(){// 将定时器挂在组件实例对象上，方便移除组件时可以获取到该定时器this.timer = setInterval(()=>{let {opacity} = this.state;opacity -= 0.1;if(opacity<=0) opacity=1;this.setState(opacity:opacity);},200); // 每0.2秒减少0.1的透明度}// React在组件将要被卸载时调用componentWillUnmount(){claerInterval(this.timer); // 移除定时器}// React在初始化渲染、状态更新时调用render(){return (<div><div style={{opacity:this.state.opacity}}>逐渐消失</div><button onClick={this.removeDiv}>点击移除</button></div>)}
}

旧版生命周期

组件从创建到死亡会经历一些特定阶段，React组件包含一系列钩子函数，会在这些特定阶段调用。钩子函数的调用与定义的顺序无关。

旧版生命周期

图片线路1–挂载渲染页面流程

// 由案例查看各个生命周期钩子--图片左侧路线1相关的钩子
class Count extends React.Component{// 构造器constructor(props){console.log('<Count/> - constructor');super(props);this.state = {count:0}}// 组件将要挂载componentWillMount(){console.log('<Count/> - componentWillMount');}add = ()=>{const count = this.state.count;this.setState({count:count+1});}remove = ()=>{ReactDOM.unmounComponentAtNode(document.getElementById('test'));}// 组件渲染更新render(){console.log('<Count/> - render');return (<div><h2>当前求和为：{this.state.count}</h2><button onClick={this.add}>点击+1</button><button onClick={this.remove}>点击卸载组件</button></div>)}// 组件挂载完毕componentDidMount(){console.log('<Count/> - componentDidMount');}// 组件将要卸载componentWillUnmount(){console.log('<Count/> - componentWillUnmount');}
}
// 页面加载完成打印顺序constructor->componentWillMount->render->componentDidMount
// 点击卸载组件按钮执行componentWillUnmount钩子

图片线路2–setState流程

class Count extends React.Component{state = {count:0}add = ()=>{const count = this.state.count;this.setState({count:count+1});}remove = ()=>{ReactDOM.unmounComponentAtNode(document.getElementById('test'));}// 组件渲染更新render(){console.log('<Count/> - render');return (<div><h2>当前求和为：{this.state.count}</h2><button onClick={this.add}>点击+1</button><button onClick={this.remove}>点击卸载组件</button></div>)}// 组件是否能更新，必须有返回值，返回值为true或false，true允许组件更新，false不允许组件更新，不手动写这个方法时，react默认返回trueshouldComponentUpdate(){console.log('<Count/> - shouldComponentUpdate');return true;}// 组件即将更新componentWillUpdate(){console.log('<Count/> - componentWillUpdate');}// 组件完成更新componentDidUpdate(){console.log('<Count/> - componentDidUpdate');}// 组件将要卸载componentWillUnmount(){console.log('<Count/> - componentWillUnmount');}
}
// 点击+1按钮，按顺序打印shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
// 点击卸载组件按钮执行componentWillUnmount钩子

图片线路3–forceUpdate流程
forceUpdate用于state没有更新，还需要更新组件的情况

class Count extends React.Component{state = {count:0}force= ()=>{this.forceUpdate();}// 组件渲染更新render(){console.log('<Count/> - render');return (<div><button onClick={this.force}>点击强制更新</button></div>)}// 组件即将更新componentWillUpdate(){console.log('<Count/> - componentWillUpdate');}// 组件完成更新componentDidUpdate(){console.log('<Count/> - componentDidUpdate');}
} // 点击强制更新按钮，打印顺序componentWillUpdate->render->componentDidUpdate

图片路线4–父组件render流程
父组件的render流程说的是父组件进行render时，子组件会调用的钩子。
componentWillReceiveProps钩子在组件第一次渲染时不会被调用，之后组件被更新才会被调用

class Father extends React.Component{state = {carName:'bmw'}changeCar = ()=>{this.setState({carName:'bench'})}render(){return (<div><h1>父组件</h1><button onClick={this.changeCar}>点击换车</button><Son carName={this.state.carName}/></div>)}
}
class Son extends React.Component{// 组件将要接收参数componentWillReceiveProps(){console.log('<Son/> - componentWillReceiveProps');}render(){console.log('<Son/> - render');return (<div>{this.props.carName}</div>)}// 组件是否能更新shouldComponentUpdate(){console.log('<Son/> - shouldComponentUpdate');return true;}// 组件即将更新componentWillUpdate(){console.log('<Son/> - componentWillUpdate');}// 组件完成更新componentDidUpdate(){console.log('<Son/> - componentDidUpdate');}
} // 第一次渲染时，componentWillReceiveProps不执行，打印顺序：render
// 点击按钮，打印顺序：componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

 // 组件将要接收参数，可以接收props参数componentWillReceiveProps(props){console.log(props); // 按上面的案例，会打印{carName:bench}}

总结
一、初始化阶段：由ReactDOM.render()触发，初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount() ===>常用，一般做初始化，比如开定时器、发送网络请求、订阅消息

二、更新阶段：由组件内部this.setState()或父组件render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render() ===> 必须用
4.componentDidUpdate()
三、卸载组件：由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() ===>常用，一般做收尾，比如关闭定时器、取消订阅

新版生命周期

新版本react(16.x以上)将以下三个函数添加了“UNSAFE_”前缀，因为这些生命周期钩子经常被误用滥用，react推出异步渲染后可能会持续误用滥用，导致出现bug。未来这些钩子可能被弃用。

componentWillMount ==> UNSAFE_componentWillMount
componentWillReceiveProps ==> UNSAFE_componentWillReceiveProps
componentWillUpdate ==> UNSAFE_componentWillUpdate

新版生命周期

对比新旧生命周期图：
在挂载时，新版本取消了componentWillMount，换成了getDrivedStateFormProps，其他的没变。
在更新时，新版本取消了componentWillReceiveProps，换成了getDrivedStateFormProps，取消了componentWillUpdate，新增了getSnapshotBeforeUpdate。
总结，取消了三个Will钩子，新增了getDrivedStateFormProps和getSnapshotBeforeUpdate两个钩子。

getDrivedStateFormProps在render前调用，作为静态方法挂在实例上，且需要返回一个state对象或null。

static getDrivedStateFormProps(){return null;
} // return null时，不影响state及页面初始化和更新
static getDrivedStateFormProps(){return {key:value};
} // return 一个对象时，会将这个对象赋给state，同时更新页面

// 当getDrivedStateFormProps返回一个对象时，初始化和更新后的状态都会按照返回的这个对象去渲染
class Count extends React.Component{state = {count:0}add = ()=>{this.setState(count:this.state.count+1)} // 点击按钮后，count显示999static getDrivedStateFormProps(){return {count:999};} // 初始化页面时，count显示999render(){return (<div><h1>count: {this.state.count}</h1><button onClick={this.add}>点击+1</button></div>)}
}

getDrivedStateFormProps可以接收两个参数，第一个为props，第二个为state。

static getDrivedStateFormProps(props,state){return 对象/null;
}

若state的值在任何时候都取决于props，可以使用getDrivedStateFormProps方法。

static getDrivedStateFormProps(props,state){// ...各种操作return props;
}

getSnapshotBeforeUpdate方法在最近一次渲染提交到DOM之前调用，接收两个参数，第一个为更新前的props，第二个为更新前的state，必须返回一个拍照值或者null，返回的值会作为参数传给componentDidUpdate钩子。

getSnapshotBeforeUpdate(preProps,preState){return 拍照值/null;
}
// componentDidUpdate接收三个参数，更新前的props，更新前的state，拍照值
componentDidUpdate(preProps,preState,snapshotValue){}

class Count extends React.Component{state = {count:0}add = ()=>{this.setState(count:this.state.count+1)} componentDidUpdate(preProps,preState,snapshotValue){console.log(preProps,preState,snapshotValue);} // 点击按钮，打印{},{count:0},shotvaluegetSnapshotBeforeUpdate(preProps,preState){return 'shotvalue';}render(){return (<div><h1>count: {this.state.count}</h1><button onClick={this.add}>点击+1</button></div>)}
}

getSnapshotBeforeUpdate可以在组件发生变化之前从DOM获取信息，可以用来处理滚动位置，比如滚动位置的聊天线程。
总结
一、初始化阶段：由ReactDOM.render()触发，初次渲染
1.constructor()
2.getDrivedStateFormProps()
3.render()
4.componentDidMount() ===>常用，一般做初始化，比如开定时器、发送网络请求、订阅消息

二、更新阶段：由组件内部this.setState()或父组件render触发
1.getDrivedStateFormProps()
2.shouldComponentUpdate()
3.render() ===> 必须用
4.getSnapshotBeforeUpdate()
5.componentDidUpdate()
三、卸载组件：由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() ===>常用，一般做收尾，比如关闭定时器、取消订阅

Diffing算法

diffing算法是react使用render时，遍历每一个元素，做到只更新变化了的元素的一种算法。

// 每秒钟更新span标签里的内容，在输入框内输入内容，可以看到两个输入框不会被更新
state = {date:new Date()}
componentDidMount(){setInterval(()=>{this.setState({date:new Date()})},1000)
}
render(){return (<div><input type="text"/><span>当前时间：{this.state.date.toTimeString()}<input type="text"/></span></div>)
}

经典面试题：react中的key有什么作用？key的内部原理是什么？
key是虚拟DOM的标识，在diff算法里有重要作用。
当状态发生变化时，react会根据新数据生成新虚拟DOM，然后进行新旧虚拟DOM的diff比较。
在旧虚拟DOM里找新虚拟DOM相同的key：
1.没找到，根据新数据创建新DOM，渲染到页面；
2.找到了，对比DOM里的内容是否相同：
a. 内容相同，使用旧虚拟DOM生成的真实DOM；
b. 内容不同，根据新数据创建新DOM，替换原来的真实DOM，渲染到页面；

经典面试题：为什么遍历列表时，key最好不要用index？
使用index作为key，可能会引发的问题：
1.对数据进行破坏顺序的操作，如逆序添加、逆序删除等操作，会产生没有必要的真实DOM更新，页面显示无问题，效率低；
2.如果结构里包含输入类的DOM，会产生错误DOM更新，页面会显示错乱；
3.如果不存在对数据进行破坏顺序的操作，使用Index作为key是没有问题的。

注意，对比的是每一个标签元素，嵌套的标签元素中，若里层元素没有变，外层元素变了，更新的只有外层元素。

class Person extends React.Component{state = {person:[{id:'p1',name:'tom',age:'19'}{id:'p2',name:'jery',age:'20'}]}add = ()=>{const {person} = this.state;const p = {id:'p3',name:'pety',age:'20'}this.setState({person:[p,...person]}); // 将新元素新增到状态数组的最前面}render(){return (<div><button onClick={this.add}>点击+人</button><ul id="ul1">this.state.person.map((p,index)=>{return <li key={index}>{p.name}---{p.age} <input type="text"/></li>})</ul><ul id="ul2">this.state.person.map((p)=>{return <li key={p.id}>{p.name}---{p.age} <input type="text"/></li>})</ul></div>)}
}
/** 页面初始化后，在输入框输入一样的内容，两个列表分别显示以下内容：1.id="ul1"               2.id="ul2"tom---19   tom---19       tom---19  tom---19jery---20  jery---20      jery---20 jery---20  
点击按钮，两个ul分别呈现以下状况：1.id="ul1"               2.id="ul2"pety---20 tom---19		   pety---20tom---19  jery---20       tom---19  tom---19jery---20                 jery---20 jery---20  可以看到以index为key的，当新增数组元素在数组最前面，数组所有元素的下标都发生了改变，遍历生成虚拟DOM时，新旧虚拟DOM对比可以找到key相同的元素，但是内容已经发生了变化，所以所有li元素都重新生成真实DOM更新渲染了；但li里面的input元素经过对比后发现没有更新，所以使用原来的真实DOM，导致页面出现错位的现象。**/