一.deffing 算法
（1）虚拟DOM中Key的作用：
当状态中的书韩剧发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟 DOM】与【旧虚拟DOM】的diff比较，比较规则如下 ：
a.旧虚拟DOM中找到了与新虚拟DOM相同的key：
（1）若虚拟DOMM中内容哦那个没变，直接使用之前的真实DOOM
（2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中只花钱的真实DOM
b.旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM,随后渲染到页面
（2）用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破环顺序操作后，会产生没必要的真实DOOM更新。
2.如果结构中还包含输入类的DOM：会产生错误DOM更新。
3.注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示，使用index作为key时没有问题的。
（3）开发中如果选择key？
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一标识值。
2.如果确定只是简单的展示数据，用index也是可以的。
二.高阶函数和柯里化
高阶函数:如果一个函数符合下面两种规范中的任何一个,那该函数就是高阶函数.
1.若A函数,接收的参数是一个函数,那么A就可以称为高阶函数
2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数.
常见的高阶函数有:prmise\setTimeout\arr.map()[数组函数]等等
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。如下代码展示：
class Login extends React.Component{
// 初始化
state = {username:'',password:''}
// 这就是柯里化代码
saveForm = (dataType)=>{
console.log("dataType",dataType)
return (event)=>{
console.log("event",event)
this.setState({[dataType]:event.target.value})
}
}
sendInfo = (enent)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`您输入的用户名是:${username},您输入的密码是:${password}`)
}
render(){
return (<div>
<form onSubmit={this.sendInfo}>
用户名:<input onChange={this.saveForm('username')} type="text" name="username" />
密码:<input onChange={this.saveForm('password')} type="password" name="password" />
<button>登录</button>
</form>
</div>)
}
}也可以不使用柯里化写法，但是要从传参那改变，如下代码所示：
class Login extends React.Component{
// 初始化
state = {username:'',password:''}
saveForm = (dataType,event)=>{
this.setState({[dataType]:event.target.value})
}
sendInfo = (enent)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`您输入的用户名是:${username},您输入的密码是:${password}`)
}
render(){
return (<div>
<form onSubmit={this.sendInfo}>
{/*在onChange传回调箭头函数，那在saveForm函数中就可以按照原来的写法做了*/}
用户名:<input onChange={(event)=>{this.saveForm('username',event)}} type="text" name="username" />
密码:<input onChange={(event)=>{this.saveForm('password',event)}} type="password" name="password" />
<button>登录</button>
</form>
</div>)
}
}
