一.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.statealert(`您输入的用户名是:${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.statealert(`您输入的用户名是:${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>)}}