react diffing算法及函数柯里化

一.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>)
            }
        }