由一道React基础面试题引发的思考

之前不经意间看到这道题，据说是阿里p5-p6级别的题目，我们先看一下这道题目，明面上是考察对react的了解深度，实际上涉及的考点很多：bind，arrow function，react各种绑定this的方法，优缺点，适合的场景，类的继承，原型链等等，所以综合性很强。

我们今天就来深入解析下这道题，看看一道面试题背后隐藏了多少知识点。

首先我们来看一下这道题的题干：

class A {
  constructor() {
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>+</button>
        <span>{this.state.count}</span>
      </div>
    );
  }
}

const App = () => {
  return <A />;
};

export default App;

题目要求我们在不修改任何代码的情况下，让<span>里的数字每点击一次都会增加1。

解题思路

这道题的解题思路其实很简单，我们只需要将<button>的onClick事件绑定到一个箭头函数上即可。

<button onClick={() => this.handleClick()}>+</button>

这样一来，箭头函数内部的this指向就不会改变，也就不会出现计数器无法正常工作的现象了。

知识点分析

这道题虽然简单，但涉及的知识点却不少。

1. 箭头函数

箭头函数是ES6中引入的新语法，它是一种简洁的函数表达式。箭头函数没有自己的this，它继承了外层函数的this值。这在处理事件绑定时非常有用，因为我们可以避免使用bind方法来显式绑定this值。

2. bind方法

bind方法可以将一个函数的this值绑定到另一个对象上。这在处理事件绑定时也很有用，但它不如箭头函数简洁。

3. react中绑定this的方法

在react中，我们可以通过以下几种方法来绑定this值：

• 使用箭头函数
• 使用bind方法
• 使用类组件的constructor方法
• 使用类组件的componentDidMount方法

每种方法都有自己的优缺点，我们需要根据具体情况来选择合适的方法。

4. 类的继承

在react中，我们可以通过extends关键字来实现类的继承。这让我们可以复用代码，并创建出更复杂的组件。

5. 原型链

原型链是JavaScript中的一种重要概念。它允许我们访问父类的属性和方法。这在理解react中的组件继承时非常有用。

总结

这道题虽然简单，但涉及的知识点却不少。通过分析这道题，我们不仅可以加深对react的理解，还可以复习一些JavaScript的基础知识。希望对大家有所帮助。