React-refs 与事件处理

25次阅读

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

refs

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

字符串形式的 ref
我们不建议使用它，因为 string 类型的 refs 存在一些问题。它已过时并可能会在未来的版本被移除。

<input type="text" ref="input1" />

回调形式的 ref

<input type="text" ref={ (currentNode) => { this.input1 = currentNode } } />

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

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 } />
        )
    }
}

事件处理

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

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

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

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

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

正文完