React-refs 与事件处理

3次阅读
没有评论

共计 848 个字符,预计需要花费 3 分钟才能阅读完成。

refs

组件内的标签可以定义 ref 属性来标识自己

  1. 字符串形式的 ref
    我们不建议使用它,因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。
<input type="text" ref="input1" />
  1. 回调形式的 ref
<input type="text" ref={ (currentNode) => { this.input1 = currentNode } } />

如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的

  1. createRef 创建 ref 容器
    React.createRef() 调用后可以返回一个容器,该容器可以存储被 ref 所标识的阶段,该容器是 “专人专用” 的
class App extends React.Component {
    myRef = React.createRef()
    ...
    render() {
        // this.myRef -> {current: input}
        return (
            <input type="text" ref={ this.myRef } />
        )
    }
}

事件处理

  1. 通过 onXxx 属性指定事件处理函数(注意大小写)
    • React 使用自定义(合成)事件,而不是使用的原生 DOM 事件 — 为了更好的兼容性
    • React 中的事件是通过事件委托方式处理的(委托给组件最外层的元素)— 高效
  2. 通过 event.target 得到发生事件的 DOM 元素对象 — 不要过度使用 ref

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

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

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

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计848字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码