IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 尚硅谷react课程-day05 -> 正文阅读

[JavaScript知识库]尚硅谷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强制更新,不会经过此阀门。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-10-22 21:06:34  更:2022-10-22 21:08:07 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 17:17:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码