尚硅谷react课程-day05

目录

1、高阶函数

2、组件的生命周期

---

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强制更新，不会经过此阀门。