React入门学习笔记3

事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写 )
    1. React使用的是自定义 (合成)事件, 而不是使用的原生DOM事件------为了更好的兼容性 eg:οnclick==》onClick
    2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)------为了更高效
  2. 通过event.target 得到发生事件的DOM元素对象------所以不要过度使用ref
  3. 当事件项和操作项是同一个时无需使用ref

非受控组件

数据现用现取

调用event.preventDefault()阻止表单提交

受控组件

优势就是双向绑定,能省掉ref

很明显,这样子实在是太麻烦了。。所以就有了⬇

高阶函数------函数柯里化

如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。

1.若A函数,接收的参数是一个函数 ,那么A就可以称之为高阶函数。

2.若A函教,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。

常见的高阶函数有:Promise、setTimeout、arr.map()等等

函数的柯里化: 通过函数调用继续返回函数 的方式,实现多次接收参数最后统一处理的函数编码形式。

重点就是分步接受参数并在最后统一处理!!

这里运用了闭包

指定参数属性名用方括号!!!

细品上面的例子,非常巧妙。

但其实,也可以一次性获取参数和event,只需要在调用时写个内联函数

相关推荐
幻灵尔依16 分钟前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子16 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳18 分钟前
CSS 基础概念
前端·css·css3
前端小巷子18 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar25 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫232 分钟前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun35 分钟前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙39 分钟前
React Hooks 详解
前端·javascript
南囝coding39 分钟前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩40 分钟前
useCallback useMemo memo 三个区别和作用
前端·react native