滴滴前端常考react面试题（附答案）

Hooks可以取代 render props 和高阶组件吗？

通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。
这两种模式仍然有一席之地(例如，一个虚拟的 scroller 组件可能有一个 renderItem prop，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套。

ssr原理是什么？

核心原理其实就是借助虚拟DOM来实现react代码能够在服务器运行的，node里面可以执行react代码

前端进阶面试题详细解答

在 React中元素（ element）和组件（ component）有什么区别？

简单地说，在 React中元素（虛拟DOM）描述了你在屏幕上看到的DOM元素。
换个说法就是，在 React中元素是页面中DOM元素的对象表示方式。在 React中组件是一个函数或一个类，它可以接受输入并返回一个元素。
注意：工作中，为了提高开发效率，通常使用JSX语法表示 React元素（虚拟DOM）。在编译的时候，把它转化成一个 React. createElement调用方法。

解释 React 中 render() 的目的。

每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。

为什么 React 要用 JSX？

JSX 是一个 JavaScript 的语法扩展，或者说是一个类似于 XML 的 ECMAScript 语法扩展。它本身没有太多的语法定义，也不期望引入更多的标准。

其实 React 本身并不强制使用 JSX。在没有 JSX 的时候，React 实现一个组件依赖于使用 React.createElement 函数。代码如下：

class Hello extends React.Component {
   
  render() {
   
    return React.createElement(
        'div',
        null, 
        `Hello ${
     this.props.toWhat}`
      );
  }
}
ReactDOM.render(
  React.createElement(Hello, {
   toWhat: 'World'}, null),
  document.getElementById('root')
);

而 JSX 更像是一种语法糖，通过类似 XML 的描述方式，描写函数对象。在采用 JSX 之后，这段代码会这样写：

class Hello extends React.Component {
   
  render() {
   
    return <div>Hello {
   this.props.toWhat}</div>;
  }
}
ReactDOM.render(
  <Hello toWhat