React 和 Vue 描述页面的区别【面试题】

前端领域经过长期的发展，目前有两种主流的描述 UI 的方案：

• JSX
• 模板

JSX 历史来源

JSX 最早起源于 React 团队在 React 中所提供的一种类似于 XML 的语法糖：

const element = <h1>Hello</h1>

经过 Babel 编译之后，就会变成：

// React v17 之前
var element = React.createElement("h1", null, "Hello");

// React v17 之后
var jsxRuntime = require("react/jsx-runtime");
var element = jsxRuntime.jsx("h1", {children: "Hello"});

最终生成一个普通的js对象：

{
  "type": "h1",
  "key": null,
  "ref": null,
  "props": {
    "children": "Hello"
  },
  "_owner": null,
  "_store": {}
}

那我们平时写的代码可以理解为：

function App(){
  return (
    <h1>Hello</h1>
  )
}
// 等于
function App(){
   return {
      "type": "h1",
      "key": null,
      "ref": null,
      "props": {
        "children": "Hello"
      },
      "_owner": null,
      "_store": {}
   }
}

所以在写React时，我们要时刻明白我们在写js。不要被这个框架所限制。遵循React的api规则，剩下的js怎么写React就怎么写。非常的灵活。

模板的历史来源

不晓得在前后端不分离的时候有没有写过模板引擎，比如php，jsp，asp。

看看这个node的ejs模板引擎，跟vue十分接近了有木有？

<h1>
    <%=title %>
</h1>
<ul>
    <% for (var i=0; i<supplies.length; i++) { %>
    <li>
        <a href='supplies/<%=supplies[i] %>'>
            <%= supplies[i] %>
        </a>
    </li>
    <% } %>
</ul>

JSX 和模板的形式都可以描述 UI，但是出发点是不同

模板语法的出发点是，既然前端框架使用 HTML 来描述 UI，那么我们就扩展 HTML，让 HTML 种能够描述一定程度的逻辑，也就是“从 UI 出发，扩展 UI，在 UI 中能够描述逻辑”。

JSX 的出发点，既然前端使用 JS 来描述逻辑，那么就扩展 JS，让 JS 也能描述 UI，也就是“从逻辑出发，扩展逻辑，描述 UI”。

这两者虽然都可以描述 UI，但是思路或者说方向是完全不同的，从而造成了整体框架架构上面也是不一样的