React setState 笔试题，下面的代码输出什么？

class Example extends React.Component {
  constructor() {
    super()
    this.state = {
      val: 0
    }
  }
  componentDidMount() {
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    // 第1 次log
    this.setState({ val: this.state.val + 1 })
    console.log(this.state.val)
    // 第2 次log
    setTimeout(() => {
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第3 次log
      this.setState({ val: this.state.val + 1 })
      console.log(this.state.val)
      // 第4 次log
    }, 0)
  }
  render() {
    return null
  }
}

答案：

0, 0, 2, 3

何时在函数组件上使用类组件 ？

如果组件需要状态或生命周期方法，则使用类组件，否则使用函数组件

• 然而，在 React 16.8 中，通过添加 Hooks，您可以使用状态、生命周期方法和其他功能，这些功能仅在功能组件的类组件中可用
• 因此，除非您需要一个函数组件等效物尚未出现的 React 功能，如错误边界，否则始终建议使用函数组件

HTML 和 React 事件处理有什么区别 ？

以下是 HTML 和 React 事件处理之间的一些主要区别有 3 点

（1）在 HTML 中，事件名称通常以小写形式表示：

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

而在 React 中，它遵循 camelCase 约定：

<button onClick="{activateLasers}"></button>

（2）在 HTML 中，你可以返回false以防止默认行为：

<a href="#" onclick='console.log("链接被点击了。"); return false;' />

而在 React 中你必须preventDefault()显式调用：

function handleClick(event) {
  event.preventDefault();
  console.log("链接被点击了。");
}

（3）在 HTML 中，需要通过追加（）来调用函数，而在 react 中，不应该用函数名追加（）

如何将参数传递给事件处理程序或回调 ？