Taro 多端开发实现原理之：React 核心语法初识

在整个前端体系发展的过程中，React 语法体系起到了至关重要的作用，Taro 也正是基于 React 语法来进行开发。本章我们逐一介绍一下 React 语法体系。

注：目前 Taro 所支持的 React 语法版本是以 React15 为基础的，所以本篇文章说的生命周期， API 等都是基于 React15 的版本。而想了解更多关于 React16 版本的变更情况，可到官网查阅。

JSX 语法

JSX 是 React 的核心组成部分，React 认为组件化才是正确的代码分离方式，它要比模板与组件逻辑分开的方式更好，所以就有了 JSX 语法。它把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联。JSX 允许在 JS 中直接使用 XML 标记的方式来声明界面，初次看起来，可能会有点糅杂的感觉，不太适应。但习惯了之后，也没有那么别扭，而且开发起来还蛮方便的。

举个 Taro 里的例子：

// 只看 render 函数，绝大多数情况下 render 函数里都会有 XML 标记
render () {
   
  return (
    <View className='index'>
      <View className='title'>{
   this.state.title}</View>
      <View className='content'>
        {
   this.state.list.map(item => {
   
          return (
            <View className='item'>{
   item}</View>
          )
        })}
        <Button className='add' onClick={
   this.add}>添加</Button>
      </View>
    </View>
  )
}

可以见到，render 函数返回了一些用括号包住的 XML 结构的界面描述，这其实就是该组件的界面描述。里面的写法和 HTML 并没有多大的差别。不同的地方主要是可以在里面进行事件绑定，表达变量，实现简单 JS 逻辑等，即在 JS 里写 HTML。而变量、简单 JS 逻辑都是需要用 {} 包裹起来。另外 HTML 的 class 属性因为是 Javascript 的保留字，所以需要写成 className。

实际上，上述 JSX 代码，最终都会通过 JSX 编译器（现在主要都是 babel），转换为 JS 代码。例如：