React入门0x002: jsx

hedzr 发布于2019-08-26 12:17 / 1855人阅读

摘要：概述也是，如是说。属性集合，比如等属性对应，是关键词，所以用代替，也可以是自定义的属性。形式送方外上人送上人孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。

0x000 概述

jsx也是js，如是说。

0x001 语法

在上文React入门0x001-环境配置和 helloworld中，出现了一句奇怪的代码：

Hello, world!

这在html中没有任何问题，但问题是他出现在了js中，这就是jsx了，它的语法非常简单，却也很神奇：

// 示例，之后会解析
// 保存到变量
let p = this is tag p
// 嵌套
let div = 
    {p}

// 执行语句
let div2 = 
{
    div === undefined
        ? undefined
        : {div}
}

0x002 说明

首先是为什么 js 中能够识别 jsx 呢？这倒不是react的功劳，而是 babel 的功劳，在.babelrc中配置了一个插件：transform-react-jsx，就是这个插件，才能解析jsx，而这个插件是如果和解析的呢？我们可以查看这个插件的文档：

输入

var profile = 
  
  {[user.firstName, user.lastName].join(" ")}
;

输出

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

其中，jsx中的每一个标签变成了一个 React.createElement(...)函数，而标签的名字，变成了该函数的第一个参数，而img标签的src和className等属性变成了该函数的第二个参数，jsx中的嵌套元素，比如div中的img、h3变成了第三个参数。

具体是否是这样，可以编译来看看:

源代码：

// src/jsx.js
var user = {
    firstName: "",
    lastName: ""
}
var profile = 
    
    {[user.firstName, user.lastName].join(" ")}
;

编译：

$ npm install -g babel-cli
$ babel --plugins transform-react-jsx jsx.js 

"use strict";

var user = {
    firstName: "",
    lastName: ""
};
var profile = React.createElement(
    "div",
    null,
    React.createElement("img", { src: "avatar.png", className: "profile" }),
    React.createElement(
        "h3",
        null,
        [user.firstName, user.lastName].join(" ")
    )
);

0x003 React.createElement

该函数是由React提供的，所以我们可以看看它的文档说明：

React.createElement(
  type,
  [props],
  [...children]
)

参数：

type：类型，可以是一个标签名字，比如p、div等html标签，也可以是一个React Component，或者React Fragment，具体之后再表。

props：属性集合，比如src、className等html属性（className对应class，class是关键词，所以用className代替），也可以是自定义的属性。

children：React element子元素集合。

返回值：React element

0x004 总结

jsx只是一层语法糖，在babel的转化下变成了相应的js代码，本质上还是js，所以，在react中用jsx或者不用jsx都是没有本质区别的。上一篇文章中的代码可以改为如下形式：

import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
    React.createElement(
        "h1",
        null,
        "Hello, world!"
    ),
    document.getElementById("app")
);

查看浏览器：http://localhost:8080/

那为什么React推荐构建UI的时候使用jsx，而不是使用js呢，用两种形式实现对比一下就好了

React.createElement 形式

ReactDom.render(
    React.createElement(
        "div",
        null,
        React.createElement(
            "h1",
            null,
            "送方外上人 / 送上人"
        ),
        React.createElement(
            "p",
            null,
            "孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。"
        )
    ),
    document.getElementById("app")
)

jsx形式

ReactDom.render(
    
        送方外上人 / 送上人
        孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。
    ,
    document.getElementById("app")
)
;

可以看到，使用js形式有太多的""、)之类影响布局视觉的符号，相对于html形式的jsx显得繁杂而又不直观，对原本的web开发者也不友好，但这也只是一家之言，flutter在布局方面就采用的代码形式的，视个人爱好而言的东西罢了！

GPU云服务器云服务器 jsx jsx 条件 jsx cdn jsx 调用函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108424.html

React入门0x003：jsx 和自由的组件

摘要：概述说起来，我喜欢的还是他的思想，在中，实际上没有的区别，全部都是，就和一样，可以将所有的资源等同视之。但是这时候又出来说，我要把写在中，真是烦透咯不过，这种东西不过是年一轮回，就和时尚一样。 0x000 概述说起来react，我喜欢的还是他的思想，在react中，实际上没有html、css、js的区别，全部都是js，就和webpack一样，可以将所有的资源等同视之。但是这在一开始，...

eechen 2019-08-23 11:25 评论0 收藏0
React入门0x004：jsx 和数据渲染

摘要：概述在中，渲染数据的形式有多种多样，但是万变不离其中，都是用。当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由代码的自由，否则将会带来噩梦。 0x000 概述在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 这是一个文本, document.getEle...

xingpingz 2019-08-23 11:27 评论0 收藏0
React入门0x005: React Component和props

摘要：概述这一章讲组件，组件才是的核心，也是构建的项目中最小的单元。莫买沃洲山，时人已知处。是使用类的语法来写，所以很多的思想可以套用到，但是一定要记得，这是，而不是资源源码 0x000 概述这一章讲组件，组件才是React的核心，也是React构建的项目中最小的单元。 0x001 组件上面的章节有一个类似下面的栗子： const App = () => { return hel...

genefy 2019-08-23 11:28 评论0 收藏0
React入门0x014: Fragment

摘要：只有一个属性，那就是栗子可展开收缩的表格源码展开收起张三我很开心李四我也很开心王五我比张三和李四更开心效果 0x001 引出问题让我们先来看一个栗子： class App extends React.Component { render() { return ( ) } } Reac...

forrest23 2019-08-23 13:46 评论0 收藏0
React入门0x006: State

摘要：概述这一章讲，是的核心，也算是的核心思想都很核心啊。但是接着我们又搞了一个定时器，每秒执行一直函数，将修改为最新的时间。就完成了视图的更新。参数一是要更新的数据，我们只需要传输我们要更新的数据即可，对于不需要更新的数据，则不需要理睬。 0x000 概述这一章讲state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 问题在上一章节的栗子...

TNFE 2019-08-23 11:29 评论0 收藏0