React学习笔记—JSX

marser 发布于2019-08-21 10:29 / 3081人阅读

摘要：使用，不一定非要使用语法，可以使用原生的进行开发。注意标签的属性和，需要写成和。因为两个属性是的保留字和关键字。在的设定中，初始化完后，是不可变的。改变会引起无法想象的后果。重要的是这个过程是由操控的，不是手动添赋值的属性。

深入JSX

JSX可以看作JavaScript的拓展，看起来有点像XML。使用React，可以进行JSX语法到JavaScript的转换。

Why JSX?

使用React，不一定非要使用JSX语法，可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX，因为JSX在定义类似HTML这种树形结构时，十分的简单明了。简明的代码结构更利于开发和维护。
XML有着开闭标签，在构建复杂的树形结构时，比函数调用和对象字面量更易读。看个直接的对比：

#使用JSX
React.render(
    
        
            content
        
    ,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("div", null,
        React.createElement("div", null,
            React.createElement("div", null, "content")
        )
    ),
    document.getElementById("example")
);

JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。

HTML 标签 vs. React 组件

React.render方法可以渲染HTML结构，也可以渲染React组件。
渲染HTML标签，声明变量采用首字母小写

var myDivElement = ;
React.render(myDivElement, document.body);

渲染React组件，声明变量采用首字母大写

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);

通过变量的声明，来区分HTML标签和React组件，这个可以看作一个约定吧。

注意：标签的属性class和for，需要写成className和htmlFor。因为两个属性是JavaScript的保留字和关键字。无论你是否使用JSX。

#使用JSX
React.render(
    content,
    document.getElementById("example")
);

#不使用JSX
React.render(
    React.createElement("label", {className: "xxx", htmlFor: "input"}, "content"),
    document.getElementById("example")
);

转化

React JSX将类似XML的语法转化到原生的JavaScript，元素的标签、属性和子元素都会被当作参数传给React.createElement函数：

#JSX
var Nav;
var app = ;

#native JS
var Nav;
var app = React.createElement(Nav, {color:"blue"});

JS表达式

表达式用{}包起来，不要加引号，加引号就会被当成字符串。

JSX是HTML和JavaScript混写的语法，当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

属性表达式

React.render(
     1 ? "class-a" : "class-b"}>content,
    document.body
);

子表达式

var Nav = React.createClass({
    render: function () {
        return nav
    }
});

React.render(
    
        {2 > 1 ?  : div}
    ,
    document.body
);

注释

同JavaScript注释一样

单行注释 // comments

多行注释 /* comments */

JSX延伸属性 不要改变props

如果提前就知道了组件的属性的话，写起来很容易。例如component组件有两个动态的属性foo和bar：

var component = ;

而实际上，有些属性可能是后续添加的，我们没办法一开始就确定，我们可能会写出下面不好的代码：

var component = ;
component.props.foo = x; // bad
component.props.bar = y; // also bad

这样写是错误的，因为我们手动直接添加的属性React后续没办法检查到属性类型错误，也就是说，当我们手动添加的属性发生类型错误时，在控制台是看不到错误信息的。

在React的设定中，初始化完props后，props是不可变的。改变props会引起无法想象的后果。

延伸属性

为了解决这个问题，React引入了属性延伸

var props = {};
props.foo = x;
props.bar = y;
var component = ;

当需要拓展我们的属性的时候，定义个一个属性对象，并通过{...props}的方式引入，React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的，不是手动添赋值的属性。

需要覆盖的时候可以这样写：

var props = { foo: "default" };
var component = ;

JSX 陷阱 style属性

在React中写行内样式时，要这样写，不能采用引号的书写方式

React.render(
    
        xxxxx
    ,
    document.body
);

HTML转义

比如我们有一些内容是用户输入的富文本，从后台取到数据后展示在页面上，希望展示相应的样式

var content="content";

React.render(
    {content},
    document.body
);

结果页面直接输出内容了：

React默认会进行HTML的转义，避免XSS攻击，如果要不转义，可以这么写：

var content="content";    

React.render(
    ,
    document.body
);

页面效果：

自定义HTML属性

如果在编写React过程中使用了自定义属性，React不会渲染的

React.render(
    content,
    document.body
);

要想使用得这么写：

React.render(
    content,
    document.body
);

专线服务私有云学习笔记学习笔记一基础学习笔记深度学习笔记

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

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

React.js学习笔记之JSX解读

摘要：学习笔记之解读前端技术不多说，大腿很粗什么是是的核心组成部分，它使用标记的方式去直接声明界面，界面组件之间可以互相嵌套。它的目的是通过各种编译器将这些标记编译成标准的语言。的标签与函数名都是使用的驼峰命名。目前，一个的，只能返回一个节点。 React.js学习笔记之JSX解读 @(前端技术) Why React? 不多说，Facebook大腿很粗什么是JSX JSX是React的核心...

tianlai 2019-08-19 17:38 评论0 收藏0
《深入react技术栈》学习笔记（一）初入React世界

摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。前言以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。正文一：rea...

verano 2019-08-20 14:47 评论0 收藏0
React学习笔记—数据展示

摘要：我们使用最基本的事就是用来展现数据。使得展现数据变得简单，并且当数据改变时，能自动保持的更新。使用了内部的虚拟，当数据发生改变，先在虚拟中计算变化，最后将变动的部分反应到真实的中。可以把它看作有着和状态并且可以返回结构的函数。我们使用UI最基本的事就是用来展现数据。React使得展现数据变得简单，并且当数据改变时，React能自动保持UI的更新。开始创建一个简单的Demo： ...

Magicer 2019-08-21 10:28 评论0 收藏0
react native学习笔记（二）

摘要：但是这套标准目前还没有在所有的浏览器上完整实现，所以目前而言开发中还很少使用。这叫做是一种在中嵌入结构的语法。模块则是用来告知哪一个组件被注册为整个应用的根容器。编写Hello World React Native看起来很像React，只不过其基础组件是原生组件而非web组件。要理解React Native应用的基本结构，首先需要了解一些基本的React的概念，比如JSX语法、组件、...

OnlyLing 2019-06-25 16:42 评论0 收藏0
react native学习笔记（三）

摘要：以常见的基础组件为例，在创建一个图片时，可以传入一个名为的来指定要显示的图片的地址，以及使用名为的来控制其尺寸。括号的意思是括号内部为一个变量或表达式，需要执行后取值。要学习如何动态修改你的界面，那就需要进一步学习状态的概念。 Props（属性）大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props（属性）。以常见的基础组件Image为例，在创建一个图片...

ruicbAndroid 2019-06-25 16:41 评论0 收藏0