文章目录
- 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默认返回true
shouldComponentUpdate(){
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显示999
static getDrivedStateFormProps(){
return {count:999};
} // 初始化页面时，count显示999
render(){
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},shotvalue
getSnapshotBeforeUpdate(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---19
jery---20 jery---20 jery---20 jery---20
点击按钮，两个ul分别呈现以下状况：
1.id="ul1" 2.id="ul2"
pety---20 tom---19 pety---20
tom---19 jery---20 tom---19 tom---19
jery---20 jery---20 jery---20
可以看到以index为key的，当新增数组元素在数组最前面，数组所有元素的下标都发生了改变，遍历生成虚拟DOM时，新旧虚拟DOM对比可以找到key相同的元素，但是内容已经发生了变化，所以所有li元素都重新生成真实DOM更新渲染了；但li里面的input元素经过对比后发现没有更新，所以使用原来的真实DOM，导致页面出现错位的现象。
**/
开发中如何选择key？
最好选择数据中的唯一标识作为key，如id, 手机号，身份证号等唯一标识。
如果只是简单展示数据，数据不会进行乱序处理，使用index也是可以的。
