0205事件处理_受控_柯里化-组件-React
文章目录
- 1 事件处理
- 1.1 概述
- 1.2 示例
- 2 非受控组件和受控组件
- 2.1 概述
- 2.2 登录示例-非受控
- 2.3 登录示例-受控
- 3 高阶函数
- 4 函数柯里化
- 5 React函数的非柯里化
- 后记
1 事件处理
1.1 概述
在前面学习中我们已经接触过React中的事件处理。
-
通过onXXX属性指定事件处理函数（注意大小写）
- React使用自定义（合成）事件，而不是使用原生的DOM事件；
- React中的事件是通过事件委托方式处理的（委托给组件最外层的元素处理）。
-
React给事件回调函数传递event（事件）对象，通过event.target获取发生事件的DOM元素对象。
1.2 示例
示例代码1.2-1：
0901_事件处理
点击按钮示例效果图下图1.2-1所示：
第二输入框失去焦点效果如下图1.2-2所示：
- React官方建议尽量少使用ref，当事件源与要操作的为同一元素时，可以通过事件处理函数处理，而不使用ref。
2 非受控组件和受控组件
2.1 概述
在 React 中，组件可以分为受控组件和非受控组件。
受控组件是由 React 组件负责维护其渲染的值或状态的组件，而非受控组件是由 DOM 自身负责维护其状态的组件。
受控组件通常使用状态（state）或 props（属性）来保存数据，并在发生更改时重新渲染组件。例如，一个文本框可以作为受控组件实现，当用户输入时，状态会被更新，而这个更新会触发组件的重新渲染。
非受控组件则是由 DOM 自己来管理其状态的组件。例如，一个普通的 HTML 输入框就是一个非受控组件，因为其值由 DOM 自己维护。
在开发过程中，通常建议使用受控组件来处理表单元素等需要控制输入的组件，因为这种方式可以更好地控制数据的流动和验证。但是对于一些简单的表单元素，非受控组件可能会更加方便和快速。
我们下面将通过收集表单案例-登录，来演示受控组件和非受控组件。
2.2 登录示例-非受控
示例代码如下：
1001_非受控组件
点击效果：
2.3 登录示例-受控
示例代码如下：
1001_非受控组件
效果示例如下图2.2-1所示:
3 高阶函数
高阶函数：高阶函数是一种函数，可以接受一个或多个函数作为参数，或者返回一个函数作为输出。这种函数通常用于将代码重复使用，并增加代码的可读性
在上面登录案例中，我们的表单只有2个数据需要维护，如果是注册，还需要维护手机号、邮箱、年龄、性别、住址等等信息，如果每个数据都需要一个回调函数，代码就会很繁琐。
观察发现回调函数处理逻辑都是一样的，只是属性名不同，我们可以通过传递属性名，使用同一个回调函数实现属性值的设置。
修改上面示例代码如下3-1所示：
1101_高阶函数-函数柯里化
- 我们之前学习的react事件处理函数形式Onxxx={this.yyy},我们这里是函数执行，是不是错了？
- 事件处理函数需要的一个回调函数，可以是直接函数，也可以是函数执行返回的“结果”（结果也是函数）。
- 为什么我们事件对象e放在了回调函数中返回函数参数中，而不是回调函数中？
- React把事件对象传给具体的直接回调执行函数，即我们事件反生时执行哪个回调函数，就把参数传递给那个函数。
- 上面示例中saveFormData在组件实例化第一次执行render时就执行了；后续执行render时，实际执行回调的是return匿名函数。
常见的高阶函数：
- Promise
- setTimout、setInterval
- map、filter、reduce
4 函数柯里化
函数柯里化：通过函数调用继续返回函数的方式，实现多次接受参数统一处理的函数编码方式。
示例代码如下4-1：
5_演示函数柯里化
5 React函数的非柯里化
在上面示例代码中
saveFormData = (type) => {return (e) => this.setState({[type]: e.target.value})}
saveFormData属于函数柯里化，因为我们没办法同时接收这两个参数，如何使用非柯里化简化该函数呢？
此时需要修改传参方式，我们可以修改为箭头函数：
- 我们需要交给事件处理一个函数作为回调
- 我们需要同时接收两个参数，一个自定义参数，一个时间处理传递的参数
修改如下：
1101_高阶函数-函数柯里化
示例效果如下图5-1所示：
后记
❓QQ:806797785
⭐️源代码仓库地址：https://gitee.com/gaogzhen/react-study
参考：
[1]尚硅谷React教程（2022加更，B站超火react教程）[CP/OL].2020-12-15.p32-p36.
[2]chatgpt