题目

1、什么是 React

React 是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序

• 使用 VirtualDOM
• 支持服务端渲染
• 单向数据流
• 使用可复用/可组合的 UI 组件开发视图

2、什么是 JSX

类似 XML 的语法扩展，jsx 通过 @babel/preset-react 转换成js代码

// .babelrc
// React.createElement
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "classic"
    }]
  ]
}


// .babelrc
// JSX runtime 更有效的 tree-shaking
{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

@babel/preset-react 包括以下 plugins

• @babel/plugin-syntax-jsx // 这个插件让 Babel 能够解析（但不转换）JSX 语法。它是其他 JSX 转换插件的基础
• @babel/plugin-transform-react-jsx // 这个插件负责将 JSX 语法转换成相应的 React 元素调用。从 Babel 7.9.0 开始，此插件支持两种模式：Classic 模式和 Automatic 模式
• @babel/plugin-transform-react-display-name // 此插件自动为 React 组件添加 displayName 属性，这对于调试过程是十分有用的。displayName 属性通常在开发者工具中显示，帮助识别组件的来源

3、

闭包是指函数能够访问并记住其词法作用域，即使该函数在其词法作用域之外执行。

• 函数嵌套函数
• 内部函数可以访问外部函数的作用域
• 外部函数的变量不会被垃圾回收

📝 示例：

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

2、Vue和React scheduler

• Vue 的 scheduler 利用微任务 把多次状态变更合并到同一轮事件循环里执行一次
• React 的核心思想：时间切片，把一个“大任务”拆成很多“小任务”

3、React 高阶组件

高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。

📝 示例：

const withEnhancement = (WrappedComponent) => {
  return class EnhancedComponent extends React.Component {
    // 增强逻辑
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};