| |
|
开发:
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 |
目录 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项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 | -2025/1/11 18:06:11- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |