目录
onChange={this.saveFormData('username')}
这个代码的意思是把saveFormData函数调用后的返回值交给onChange回调,不是把saveFormData交给onChange回调,所以就会出现undefined的情况,利用高阶函数就可以很好的处理这种情况
1、高阶函数
A:高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。常见的高阶函数有:Promise、setTimeout、arr.map()等等
B:函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
function sum(a){return(b)=>{return (c)=>{return a+b+c}}}
利用高阶函数方法,因为组件渲染以后存在初始化渲染页面,而我们写了回调就会在外面没有触发事件之前去调用函数,利用高阶当第一次调用我们采取返回一个函数,当我们触发onchange事件将函数调用实时修改状态机中的值,onchange方法是一个只要数据发生一点变化就会去直接调用的一个事件源.
C:不用函数柯里化写回调函数,满足高阶写法若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。若A函数,调用的返回值依然是一个函数,满足函数嵌套函数的方法
为了能够将触发事件的数据传递给函数进行处理,利用回调方法,但react中会在渲染初始化时调用回调函数导致数据未定义就返回值,所以我们预期当操作完毕点击事件时才把数据传递处理,而高阶函数过于繁琐,利用内联定义函数解决即可
2、组件的生命周期
React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。在每个周期中React都提供了一些钩子函数。 挂载期:一个组件实例初次创建的过程。 更新期:组件在创建后再次渲染的过程。 卸载期:组件在使用完后被销毁的过程。
案例:
要求:首次进入页面一个文本+按钮,文本是颜色透明度一直在改变的,当我们点击按钮,就会删除整个页面
案例总结:文本的透明度利用opacity属性修改其取值从0.1-1,10个范围我们要让它一直改变透明度直到我们点击删除按钮,利用一个定时器,此时就需要了解钩子函数的作用了,我们要做到页面一更新就将定时器作业到文本上,利用componentDIdMount()函数,将定时器放置其中,页面调用render函数以后就会调用钩子函数中的定时器,我们获取到原状态进行递减改变实例state状态,state状态一经改变就会调用render函数朝而复返,直到点击删除组件调用componentWillUmount()函数清除定时器删除组件。清除定时器的原因是控制台会因为定时器不删除报错。
生命周期流程图
自身挂载时:构造器 -> componentWillMount -> render -> componentDidMount
父组件render时(此时一般通过props传承,第一次不调用):componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
调用setState时:setState -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
调用forceUpdate时:forceUpdate -> componentWillUpdate -> render -> componentDidUpdate
componentWillReceiveProps方法在组件接受新的props才会调用,即第一次不会调用。shouldComponentUpdate的方法返回true或者false,起着一个阀门的作用,而forceUpdate强制更新,不会经过此阀门。