可以做头像的网站,太仓网页制作招聘,凡客优品,wordpress博客页修改一.deffing 算法
#xff08;1#xff09;虚拟DOM中Key的作用#xff1a; 当状态中的书韩剧发生变化时#xff0c;react会根据【新数据】生成【新的虚拟DOM】#xff0c;随后React进行【新虚拟 DOM】与【旧虚拟DOM】的diff比较#xff0c;比较规则如下 #xff1a; a.旧…一.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 (divform onSubmit{this.sendInfo}用户名:input onChange{this.saveForm(username)} typetext nameusername / 密码:input onChange{this.saveForm(password)} typepassword namepassword / 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 (divform onSubmit{this.sendInfo}{/*在onChange传回调箭头函数那在saveForm函数中就可以按照原来的写法做了*/}用户名:input onChange{(event){this.saveForm(username,event)}} typetext nameusername / 密码:input onChange{(event){this.saveForm(password,event)}} typepassword namepassword / button登录/button/form /div)}}
