2022年前端React的100道面试题的第10题:元素绑定事件

925 阅读2分钟

问题

React17 元素绑定事件与 DOM 绑定事件的差异有哪些?

选项

A React 事件的命名采用纯小写。

B 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。

C 在 React 中另一个不同点是你可以通过返回 false 的方式阻止默认行为。

D 在 React 事件方法接收到的 event 参数和元素是一样的。

答案

B

纠错

A React 事件的命名采用小驼峰式(camelCase),而不是纯小写

C 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 e.preventDefault()

D 在 React 中 event 对象是一个合成事件。React 根据 W3C 规范来定义这些合成事件,所以你不需要担心跨浏览器的兼容性问题。React 事件与原生事件不完全相同。

解答

必须谨慎对待 JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined

与传统HTML的差异

传统的 HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略微不同:

<button onClick={activateLasers}>
  Activate Lasers
</button>

函数的上下文

必须谨慎对待 JSX 回调函数中的 this,在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined

以下是针对此问题官方给出的解决方案,一种是手动绑定 this

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
​
    // 为了在回调中使用 `this`,这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }
​
  handleClick() {
    // ...
  }
​
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

二是基于 @babel/plugin-proposal-class-properties 对应的定义 class fields 语法,Create React App 默认启用此语法:

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }
​
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

三是在调用函数的地方使用箭头函数:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
​
  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

但第三种方式是不太建议,因为每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

资料

官方文档

来源

搜索《考试竞技》微信小程序