39+ 你必须搞清楚的高级 React 面试题（已解答）（2020 年更新）

美国 React Js 开发人员的平均年薪为 125,000 美元，或每小时 64.10 美元。入门级职位起薪为每年 63,050 美元，而大多数经验丰富的开发人员的年薪最高可​​达 195,000 美元。继续阅读，了解一些最高级的 React 面试题，为你的下一次技术面试做好准备。

🔴 最初发表于FullStack.Cafe - Kill Your Tech & Coding Interview

Q1：什么是虚拟DOM？

主题：React
难度：⭐

虚拟 DOM (VDOM)是真实 DOM 的内存表示。UI 的表示保存在内存中，并与“真实” DOM 同步。这是在渲染函数被调用和元素显示在屏幕上之间发生的一个步骤。整个过程称为协调 (reconciliation)。

🔗来源： github.com/sudheerj

Q2：类组件和函数组件有什么区别？

主题：React
难度：⭐⭐

• 类组件允许你使用额外的功能，例如本地状态和生命周期钩子。此外，它还能让你的组件直接访问 store 并保存状态。

• 当你的组件仅接收 props 并将其渲染到页面时，它就是一个无状态组件，可以使用纯函数。这类组件也被称为哑组件或展示组件。

🔗来源： github.com/Pau1fitz

Q3：React 中的 refs 有什么用处？

主题：React
难度：⭐⭐

Refs就像一个出口，它允许你直接访问 DOM 元素或组件实例。为了使用它们，你需要在组件中添加一个 ref 属性，该属性的值是一个回调函数，该函数将接收底层 DOM 元素或已挂载的组件实例作为其第一个参数。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

上面注意到我们的输入字段有一个 ref 属性，其值是一个函数。该函数接收输入的实际 DOM 元素，然后我们将其放在实例上，以便在 handleSubmit 函数内部访问它。

人们常常误解为需要使用类组件才能使用 ref，但通过利用 JavaScript 中的闭包，ref 也可以与功能组件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type='text'
        ref={(input) => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
  )
}

🔗来源： github.com/Pau1fitz

Q4：描述一下 React 中如何处理事件。

主题：React
难度：⭐⭐

为了解决跨浏览器兼容性问题，React 中的事件处理程序将传递 SyntheticEvent 的实例，它是 React 针对浏览器原生事件的跨浏览器包装器。这些合成事件具有与您习惯的原生事件相同的接口，但它们在所有浏览器中的工作方式完全相同。

稍微有点意思的是，React 实际上并不会将事件附加到子节点本身。React 会使用单个事件监听器来监听顶层的所有事件。这有利于提高性能，也意味着 React 在更新 DOM 时无需担心跟踪事件监听器。

🔗资料来源： tylermcginnis.com

Q5：state 和 props 有什么区别？

主题：React
难度：⭐⭐

props和state都是普通的 JavaScript 对象。虽然它们都包含影响渲染输出的信息，但它们在组件方面的功能有所不同。例如，

• Props 以类似于函数参数的方式传递给组件
• 状态在组件内进行管理，类似于在函数内声明的变量。

🔗来源： https://github.com/sudheerj

Q6：如何创建 refs？

主题：React
难度：⭐⭐

Refs使用方法创建React.createRef()，并通过 ref 属性附加到 React 元素上。为了在整个组件中使用 ref，只需在构造函数中将 ref 赋值给实例属性即可。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

和：

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

我们还可以借助闭包在功能组件中使用它。

🔗来源： github.com/sudheerj

Q7：什么是高阶组件？

主题：React
难度：⭐⭐

高阶组件(HOC)是一个函数，它接受一个组件并返回一个新组件。本质上，它是一种源自 React 组合特性的模式。
我们称之为“纯”组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可用于以下许多用例，

1. 代码重用、逻辑和引导抽象
2. 渲染劫持
3. 状态抽象和操作
4. 道具操控

🔗来源： github.com/sudheerj

Q8：使用带有 props 参数的超级构造函数的目的是什么？

主题：React
难度：⭐⭐

子类构造函数在方法调用之前不能使用this引用super()。ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是为了在子构造函数中访问 this.props。

传递道具：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props);  // Prints { name: 'sudheer',age: 30 }
    }
}

不传递道具：

class MyComponent extends React.Component {
    constructor(props) {
        super();
        console.log(this.props); // Prints undefined
        // But Props parameter is still available
        console.log(props); // Prints { name: 'sudheer',age: 30 }
    }

    render() {
        // No difference outside constructor
        console.log(this.props) // Prints { name: 'sudheer',age: 30 }
    }
}

上面的代码片段表明 this.props 的行为仅在构造函数中有所不同。在构造函数之外，它的行为是一样的。

🔗来源： github.com/sudheerj

Q9：什么是受控组件？

主题：React
难度：⭐⭐⭐

在 HTML 中，诸如 、 和 之类的表单元素<input>通常<textarea>会<select>维护自身的状态，并根据用户输入进行更新。当用户提交表单时，上述元素的值会随表单一起发送。但在 React 中，其工作方式有所不同。包含表单的组件会跟踪其状态下的输入值，并在每次触发回调函数（例如，onChange状态更新时）时重新渲染组件。以这种方式由 React 控制值的输入表单元素称为受控组件。

🔗来源： github.com/Pau1fitz

Q10：使用 React.createElement 相当于以下内容？

主题：React
难度：⭐⭐⭐

问题：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

以下使用相当于什么React.createElement？

回答：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

🔗来源： github.com/Pau1fitz

Q11：您能告诉我有关 JSX 的什么信息？

主题：React
难度：⭐⭐⭐

Facebook 首次向世界发布 React 时，还引入了一种名为 JSX 的新 JavaScript 方言，它将原始 HTML 模板嵌入到 JavaScript 代码中。JSX 代码本身无法被浏览器读取；必须使用 Babel 和 webpack 等工具将其转换为传统的 JavaScript。虽然许多开发者最初可能会对此产生本能反应，但 JSX（与 ES2015 并驾齐驱）已成为定义 React 组件的主流方法。

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

🔗来源： codementor.io

Q12：给定上面定义的代码，您能找出两个问题吗？

主题：React
难度：⭐⭐⭐

看一下下面的代码：

class MyComponent extends React.Component {
  constructor(props) {
    // set the default internal state
    this.state = {
      clicks: 0
    };
  }

  componentDidMount() {
    this.refs.myComponentDiv.addEventListener('click', this.clickHandler);
  }

  componentWillUnmount() {
    this.refs.myComponentDiv.removeEventListener('click', this.clickHandler);
  }

  clickHandler() {
    this.setState({
      clicks: this.clicks + 1
    });
  }

  render() {
    let children = this.props.children;

    return (
      <div className="my-component" ref="myComponentDiv">
      <h2>My Component ({this.state.clicks} clicks})</h2>
      <h3>{this.props.headerText}</h3>
    {children}
    </div>
    );
  }
}

给定上面定义的代码，您能找出两个问题吗？

回答：

1. 构造函数不会将其 props 传递给超类。它应该包含以下行：

constructor(props) {
  super(props);
  // ...
}

1. 由于ES2015 不支持自动绑定，事件监听器（通过 赋值时addEventListener()）的作用域不正确。因此，开发者可以在构造函数中重新赋值，以包含正确的绑定：clickHandler

constructor(props) {
  super(props);
  this.clickHandler = this.clickHandler.bind(this);
  // ...
}

🔗来源： codementor.io

Q13：为什么我们不应该直接更新状态？

主题：React
难度：⭐⭐⭐

如果您尝试直接更新状态，那么它将不会重新渲染组件。

    //Wrong
    This.state.message =”Hello world”;

请使用setState()方法。它会安排组件状态对象的更新。当状态发生变化时，组件会通过重新渲染来响应

    //Correct
    This.setState({message: ‘Hello World’});

注意：唯一可以分配状态的地方是构造函数。

🔗来源： https://github.com/sudheerj

Q14：ReactJS 组件生命周期有哪些不同的阶段？

主题：React
难度：⭐⭐⭐

React 组件的生命周期分为四个不同的阶段：

1. 初始化：在此阶段，React 组件准备设置初始状态和默认道具。
2. 挂载： React 组件已准备好挂载到浏览器 DOM 中。此阶段涵盖了componentWillMount和componentDidMount生命周期方法。
3. 更新：在此阶段，组件通过两种方式进行更新：发送新的 props 和更新 state。此阶段涵盖shouldComponentUpdate、componentWillUpdate 和 componentDidUpdate生命周期方法。
4. 卸载：在最后阶段，组件不再需要，并从浏览器 DOM 中卸载。此阶段包含componentWillUnmount生命周期方法。

🔗来源： github.com/sudheerj

Q15：ReactJS 的生命周期方法有哪些？

主题：React
难度：⭐⭐⭐

• componentWillMount：渲染之前执行，用于根组件中的应用程序级别配置。
• componentDidMount：首次渲染后执行，所有 AJAX 请求、DOM 或状态更新以及设置的 eventListeners 都应该在这里发生。
• componentWillReceiveProps：当特定 prop 更新以触发状态转换时执行。
• shouldComponentUpdate：确定组件是否更新。默认情况下返回 true。如果您确定组件在 state 或 props 更新后无需渲染，则可以返回 false。这对于提升性能非常有用，因为它允许您在组件收到新的 props 时避免重新渲染。
• componentWillUpdate：当 shouldComponentUpdate 确认存在优点和状态变化并返回 true 时，在重新渲染组件之前执行。
• componentDidUpdate：主要用于响应 prop 或 state 的变化来更新 DOM。
• componentWillUnmount：它将用于取消任何传出的网络请求，或删除与组件关联的所有事件监听器。

🔗来源： github.com/sudheerj

Q16：React 中的这三个点（...）起什么作用？

主题：React
难度：⭐⭐⭐

这个 React（使用 JSX）代码中的 ... 起什么作用，它叫什么？

<Modal {...this.props} title='Modal heading' animation={fal

这就是属性展开符号。它是在 ES2018 中添加的（数组/可迭代对象的展开符号更早，是 ES2015）。

例如，如果 this.props 包含 a: 1 和 b: 2，那么

<Modal {...this.props} title='Modal heading' animation={false}>

将与以下相同：

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

展开表示法不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象也很方便 - 这在更新状态时经常出现，因为您无法直接修改状态：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

🔗来源： stackoverflow.com

Q17：使用 React Hooks 有什么优点？

主题：React
难度：⭐⭐⭐

首先，Hooks 通常能够提取和重用跨多个组件的通用状态逻辑，而无需高阶组件或渲染 props 的负担。Hooks 使我们能够轻松地操作函数式组件的状态，而无需将其转换为类组件。

Hook 在类内部不起作用（因为它们允许你在没有类的情况下使用 React）。通过使用它们，我们可以完全避免使用生命周期方法，例如componentDidMount、componentDidUpdate、componentWillUnmount。相反，我们将使用内置的 Hook，例如useEffect。

🔗来源： hackernoon.com

Q18：什么是 React Hooks？

主题：React
难度：⭐⭐⭐

Hooks是 React 16.8 中的新增功能。它让你无需编写类即可使用状态和其他 React 功能。使用 Hooks，你可以从组件中提取状态逻辑，以便独立测试和复用。Hooks 允许你在不更改组件层次结构的情况下复用状态逻辑。这使得在多个组件之间或与社区共享 Hooks 变得非常容易。

🔗来源： reactjs.org

Q19：React 中的 useState() 是什么？

主题：React
难度：⭐⭐⭐

解释一下那里有什么用处useState(0)：

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

useState是内置的反应钩子之一。useState(0)返回一个元组，其中第一个参数 count 是计数器的当前状态，setCounter 是允许我们更新计数器状态的方法。

我们可以使用该setCounter方法在任何地方更新计数状态 - 在这种情况下，我们在 setCount 函数内部使用它，我们可以做更多的事情；使用钩子的想法是，我们能够让我们的代码更具功能性，并且在不需要时避免基于类的组件。

🔗来源： stackoverflow.com

Q20：React 中的 StrictMode 是什么？

主题：React
难度：⭐⭐⭐

React 的 StrictMode 是一种辅助组件，可以帮助您编写更好的反应组件，您可以用它包装一组组件<StrictMode />，它基本上：

• 验证内部组件是否遵循一些建议的做法，如果没有，则在控制台中发出警告。
• 验证不推荐使用的方法，如果使用，严格模式将在控制台中发出警告。
• 通过识别潜在风险帮助您预防一些副作用。

🔗来源： stackoverflow.com

Q21：为什么类方法需要绑定到类实例？

主题：React
难度：⭐⭐⭐

在 JavaScript 中， 的值this会根据当前上下文而变化。在 React 类组件方法中，开发者通常希望 this 指向组件的当前实例，因此需要将这些方法绑定到该实例。通常，这在构造函数中完成，例如：

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

🔗资料来源： toptal.com

Q22：什么是道具钻孔以及如何避免它？

主题：React
难度：⭐⭐⭐

在构建 React 应用时，经常需要让深层嵌套的组件使用更高层级组件提供的数据。最简单的方法是将 prop 从每个组件传递到层级结构中的下一个组件，从源组件传递到深层嵌套的组件。这称为prop 钻取。

道具钻探的主要缺点是，原本不应该了解数据的组件变得不必要地复杂并且更难维护。

为了避免 prop 钻取，一种常见的方法是使用 React context。这允许Provider定义提供数据的组件，并允许嵌套组件通过组件Consumer或useContext钩子使用 context 数据。

🔗资料来源： toptal.com

Q23：描述一下 Flux 与 MVC？

主题：React
难度：⭐⭐⭐⭐

传统的 MVC 模式可以很好地分离数据（模型）、UI（视图）和逻辑（控制器）的关注点，但 MVC 架构经常遇到两个主要问题：

• 数据流定义不明确：跨视图发生的级联更新通常会导致事件网络混乱，难以调试。

• 缺乏数据完整性：模型数据可能从任何地方发生变化，从而导致整个 UI 产生不可预测的结果。

有了 Flux 模式，复杂的 UI 不再受级联更新的影响；任何给定的 React 组件都能够根据 store 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来确保数据完整性。

🔗来源： codementor.io

Q24：受控组件和非受控组件有什么区别？

主题：React
难度：⭐⭐⭐⭐

• 受控组件是React 控制的组件，也是表单数据的唯一真实来源。
• 非受控组件是指您的表单数据由 DOM 处理，而不是由 React 组件内部处理。

虽然非受控组件通常更容易实现，因为您只需使用 refs 从 DOM 中获取值，但通常建议您优先使用受控组件。主要原因是受控组件支持即时字段验证，允许您有条件地禁用/启用按钮，强制输入格式，并且更符合“React 风格”。

🔗来源： github.com/Pau1fitz

Q25：这段代码有什么问题？

主题：React
难度：⭐⭐⭐⭐

问题：

这段代码有什么问题？

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

回答：

这没什么问题。虽然它很少使用，也不太为人所知，但你也可以传递一个函数，setState接收先前的状态和 props 并返回一个新的状态，就像我们上面做的那样。这不仅没有问题，而且如果你需要根据先前的状态设置状态，我们强烈推荐你这样做。

🔗资料来源： tylermcginnis.com

Q26：什么是 React 上下文？

主题：React
难度：⭐⭐⭐⭐

这是一个实验性的 API，允许您通过组件树传递数据，而无需使用 props。

🔗来源： github.com/WebPredict

Q27：什么是 React Fiber？

主题：React
难度：⭐⭐⭐⭐

Fiber是 React 16 中新的协调引擎或重新实现的核心算法。其主要目标是实现虚拟 DOM 的增量渲染。React Fiber 的目标是提高其在动画、布局、手势等领域的适用性，能够暂停、中止或重用工作，并为不同类型的更新分配优先级；以及新的并发原语。

React Fiber 的目标是提升其在动画、布局和手势等领域的适用性。其核心功能是增量渲染：能够将渲染工作拆分成多个块，并将其分散到多个帧上。

🔗来源： github.com/sudheerj

Q28：如何在 ReactJS 中对 Props 应用验证？

主题：React
难度：⭐⭐⭐⭐

当应用程序在开发模式下运行时，React 会自动检查我们在组件上设置的所有 props，以确保它们必须正确无误且数据类型正确。对于不正确的类型，它会在开发模式下的控制台中生成警告消息，而在生产模式下，由于性能影响，此功能会被禁用。必需的 props 使用 isRequired 进行定义。

预定义的 prop 类型集如下

1. React.PropTypes.string
2. React.PropTypes.number
3. React.PropTypes.func
4. React.PropTypes.node
5. React.PropTypes.bool

例如，我们为用户组件定义 propTypes 如下，

import PropTypes from 'prop-types';

class User extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
      <h2>Age, {this.props.age}
    );
  }
}

User.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired

};

🔗来源： github.com/sudheerj

Q29：ReactJS 和 Angular 有什么区别？

主题：React
难度：⭐⭐⭐⭐

🔗来源： github.com/sudheerj

Q30：在 React 中使用构造函数和 getInitialState 有什么区别？

主题：React
难度：⭐⭐⭐⭐

构造函数和 getInitialState 之间的区别正是 ES6 和 ES5 本身的区别。使用 ES6 类时，应在构造函数中初始化状态；getInitialState使用 时，应定义方法React.createClass。

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = { /* initial state */ };
      }
    }

相当于

    var MyComponent = React.createClass({
      getInitialState() {
        return { /* initial state */ };
      },
    });

🔗来源： stackoverflow.com

Q31：什么时候将 props 传递给 super() 很重要，为什么？

主题：React
难度：⭐⭐⭐⭐

需要传递 props 的唯一原因super()是当你想在构造函数中访问时this.props：

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

未通过：

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

请注意，将 props 传递给 super 或不传递给 super 对构造函数外部 this.props 的后续使用没有影响。

🔗来源： stackoverflow.com

Q32：如何有条件地向 React 组件添加属性？

主题：React
难度：⭐⭐⭐⭐

有没有办法仅在满足特定条件时才向 React 组件添加属性？

对于某些属性，如果传入的值不为真，React 会智能地忽略该属性。例如：

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

将导致：

<input type="text" required>

另一种可能的方法是：

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

🔗来源： stackoverflow.com

Q33：Hooks 是否取代了 render props 和高阶组件？

主题：React
难度：⭐⭐⭐⭐

通常，渲染 props 和高阶组件只会渲染一个子组件。React 团队认为Hooks 是满足这种用例的更简单的方法。

这两种模式仍然各有其用处（例如，虚拟滚动条组件可能具有 renderItem 属性，或者可视化容器组件可能拥有自己的 DOM 结构）。但在大多数情况下，Hooks 就足够了，并且可以帮助减少组件树中的嵌套。

🔗来源： reactjs.org

Q34：您将如何调查缓慢的 React 应用程序渲染？

主题：React
难度：⭐⭐⭐⭐

React 应用程序中最常见的问题之一是组件不必要地重新渲染。React 提供了两种工具来帮助解决这些情况：

• React.memo()：这可以防止不必要的功能组件重新渲染
• PureComponent：这可以防止不必要的类组件重新渲染

这两个工具都依赖于对传入组件的 props 进行浅层比较——如果 props 没有发生变化，则组件不会重新渲染。虽然这两个工具都非常有用，但浅层比较会带来额外的性能损失，因此如果使用不当，两者都会对性能产生负面影响。通过使用 React Profiler，可以在使用这些工具之前和之后进行性能测量，以确保通过进行特定的更改确实可以提高性能。

🔗资料来源： toptal.com

Q35：什么时候在 React 中使用 StrictMode 组件？

主题：React
难度：⭐⭐⭐⭐

我发现，当我在处理新的代码库，并想查看我面对的是哪种类型的代码/组件时，实现严格模式特别有用。此外，如果你处于错误搜索模式，有时将你认为可能是问题根源的组件/代码块包装起来是个好主意。

🔗来源： stackoverflow.com

Q36：什么是纯函数？

主题：React
难度：⭐⭐⭐⭐⭐

纯函数是指不依赖且不修改其作用域外变量状态的函数。本质上，这意味着纯函数在给定相同参数的情况下始终会返回相同的结果。

🔗来源： github.com/Pau1fitz

Q37：当我们调用 setState 时，React 渲染器究竟是如何工作的？

主题：React
难度：⭐⭐⭐⭐⭐

我们所说的“渲染”包括两个步骤：

1. 虚拟 DOM 渲染：调用render方法时，它会返回组件新的虚拟 DOM结构。此render方法始终会在调用setState()时被调用，因为shouldComponentUpdate默认总是返回 true。因此，React 默认不会进行任何优化。

2. 原生 DOM 渲染：React 仅当虚拟 DOM 中发生更改时才会在浏览器中更改真实的 DOM 节点，并且更改的次数尽可能少 - 这是 React 的一大特色，它优化了真实的 DOM 变异，使 React 运行速度更快。

🔗来源： stackoverflow.com

Q38：React 等 JavaScript 库和 Angular 等 JavaScript 框架之间的主要架构差异是什么？

主题：React
难度：⭐⭐⭐⭐⭐

React 使开发人员能够渲染用户界面。要创建完整的前端应用程序，开发人员还需要其他组件，例如 Redux 之类的状态管理工具。

与 React 类似，Angular 允许开发人员呈现用户界面，但它是一个“内置电池”框架，其中包含针对状态管理等常见需求的规定性、自以为是的解决方案。

虽然在比较 React 和 Angular 时还有许多其他考虑因素，但这一关键的架构差异意味着：

• 当开源社区创建新的解决方案时，使用诸如 React 之类的库可以使项目更有能力随着时间的推移发展系统的各个部分（例如状态管理）。
• 使用 Angular 等框架可以让开发人员更轻松地上手，同时还可以简化维护。

🔗资料来源： toptal.com

Q39：如何避免在 React 中需要绑定？

主题：React
难度：⭐⭐⭐⭐⭐

在 React 中，有几种常见的方法可以避免方法绑定：

1. 将事件处理程序定义为内联箭头函数

class SubmitButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFormSubmitted: false
    };
  }

  render() {
    return (
      <button onClick={() => {
        this.setState({ isFormSubmitted: true });
      }}>Submit</button>
    )
  }
}

1. 将事件处理程序定义为分配给类字段的箭头函数

class SubmitButton extends React.Component {
  state = {
    isFormSubmitted: false
  }

  handleSubmit = () => {
    this.setState({
      isFormSubmitted: true
    });
  }

  render() {
    return (
      <button onClick={this.handleSubmit}>Submit</button>
    )
  }
}

1. 使用带有 Hooks 的函数组件

const SubmitButton = () => {
  const [isFormSubmitted, setIsFormSubmitted] = useState(false);

  return (
    <button onClick={() => {
        setIsFormSubmitted(true);
    }}>Submit</button>
  )
};

🔗资料来源： toptal.com

感谢🙌的阅读，祝你面试顺利！
如果喜欢，请分享给你的开发者同事！
更多 FullStack 面试问答，请访问👉 www.fullstack.cafe