为什么 react 要用 jsx

2023-03-17 15:55:18

为什么 react 要用 jsx => 换个例子

为什么你爱吃辣的 => 隐含的问题 为什么你不爱吃苦的 咸的 甜的 酸的

实际考察两个方面

• 技术广度
  • 深挖理解
• 技术方案调研能力

为什么 react 要用 jsx

解释 jsx

类似于 XML 的语法扩展

核心概念

React 本身并不强制使用 JSX，在没有 jsx 的时候，React 实现一个组件依赖于 React.createElement 函数

class A extends React.Component {
  render() {
    return React.createElement('div', null, `Hi ${this.props.name}`)
  }
}

ReactDOM.render(
  React.createElement(A, { name: 'richard' }, null),
  document.getElementById('root')
)

而 JSX 更像一种语法糖，通过类似 XML 的描述方式，描写函数对象

class A extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>
  }
}

ReactDOM.render(<A name="richard" />, document.getElementById('root'))

XML 在树结构的描述上具有天然的可读性的优势 JSX 的代码更加的清晰简洁

因为 React 需要将组建转化为 VDOM 树，所以我们在编写代码的时候，其实是在写一棵结构树，而 XML 在树结构的描述上又有着可读性强的特点，但是上述 JSX 代码只是给开发看的，在实际的运行中我们还需要用 Babel 将 JSX 还原成 React.createElement 才行，哪为什么不直接使用模版呢？

方案对比

React 的设计理念，那就是 关注点分离

• 关注点分离是将代码分割为不同部分的设计原则，是 OOP 程序设计的核心概念之一
• 关注点分离的好处在于简化程序的开发和维护成本，当关注点分离时，各部分都可以 重复使用，以及独立的开发和更新，无需知道其他部分的细节。

在 React 中，关注点的基本单位是组件，经常做 React 开发的话你会发现 React 单个组件内是高聚合的，而组件间耦合度很低

React 团队认为引入模版是一种极其不佳的实现，因为模版会分离技术栈，同时还会引入更多的概念，就像 Vue 一样，会引入一些新的模版语法，模版指令等等，但是 JSX 并不会引入新的概念，它依然还是 Javascript，会让代码更贴近 HTML