React入门0x004：jsx 和数据渲染

xingpingz 发布于2019-08-23 11:27 / 2889人阅读

摘要：概述在中，渲染数据的形式有多种多样，但是万变不离其中，都是用。当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由代码的自由，否则将会带来噩梦。

0x000 概述

在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。

0x001 渲染文本

// 渲染文本
ReactDom.render(
    这是一个文本,
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    "u8FD9u662Fu4E00u4E2Au6587u672C"
), document.getElementById("app"));

查看浏览器

0x002 渲染数字字面量

// 渲染文本
ReactDom.render(
    {111},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    111
), document.getElementById("app"));

查看浏览器

0x003 渲染字符串字面量

ReactDom.render(
    {"hello world"},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    "hello world"
), document.getElementById("app"));

查看浏览器

0x004 渲染表达式

ReactDom.render(
    {1 + 1},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    1 + 1
), document.getElementById("app"));

查看浏览器

0x005 渲染变量

const name = "world"
ReactDom.render(
    {name},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

var name = "world";
_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    name
), document.getElementById("app"));

0x006 渲染函数

const getName = () => "world"
ReactDom.render(
    {getName()},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

var getName = function getName() {
    return "world";
};
_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    getName()
), document.getElementById("app"));

查看浏览器

0x007 三元运算符

ReactDom.render(
    {
        1 == 1 ? 1 : 0
    },
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    1 == 1 ? 1 : 0
), document.getElementById("app"));

查看浏览器

0x008 渲染数组

// 方式1
ReactDom.render(
    {
        [1, 2, 3].map((item, index) => {
            return {item}
        })
    },
    document.getElementById("app")
)
// 方式2
const arr = [1, 2, 3].map((item, index) => {
    return {item}
})
ReactDom.render(
    {arr},
    document.getElementById("app")
)

使用babel转义：babel --plugins transform-react-jsx index.js

// 方式1
_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    [1, 2, 3].map(function (item, index) {
        return _react2.default.createElement(
            "p",
            { key: index },
            item
        );
    })
), document.getElementById("app"));
// 方式2
var arr = [1, 2, 3].map(function (item, index) {
    return _react2.default.createElement(
        "p",
        { key: index },
        item
    );
});
_reactDom2.default.render(_react2.default.createElement(
    "div",
    null,
    arr
), document.getElementById("app"));

查看浏览器

0x009 总结

通过转义前转义后对比，我们可以看出来，其实没有html的东西存在在其中，完全都是js，所以我们可以用代码的形式来构建整个UI，将模板抛弃脑后，我们可以在使用js定制组件，随意使用js的形式组合组件，形成更大的组件，一切都是js，自由的 js。

当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由、代码的自由，否则将会带来噩梦。

0x010 资源

react

transform-react-jsx

源码

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

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

React入门0x006: State

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

TNFE 2019-08-23 11:29 评论0 收藏0
React入门0x002: jsx

摘要：概述也是，如是说。属性集合，比如等属性对应，是关键词，所以用代替，也可以是自定义的属性。形式送方外上人送上人孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。 0x000 概述 jsx也是js，如是说。 0x001 语法在上文React入门0x001-环境配置和 helloworld中，出现了一句奇怪的代码： Hello, world! 这在html中没有任何问题，但问题是他出现在...

hedzr 2019-08-26 12:17 评论0 收藏0
React入门0x003：jsx 和自由的组件

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

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

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

genefy 2019-08-23 11:28 评论0 收藏0
React入门0x007: 生命周期概念

摘要：概述上一章只是稍微了解了一下和相关的简单用法，这一章需要讲一下组件的生命周期。生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。 0x000 概述上一章只是稍微了解了一下state和setState相关的简单用法，这一章需要讲一下组件的生命周期。 0x001 生命周期的概念这玩意似乎很高大上，其实就是一个假概念罢了，直接来实现一个类似的吧。大凡事物从...

Blackjun 2019-08-23 11:30 评论0 收藏0