React.js学习笔记之JSX解读

tianlai 发布于2019-08-19 17:38 / 744人阅读

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

React.js学习笔记之JSX解读

@(前端技术)

Why React?

不多说，Facebook大腿很粗

什么是JSX

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。

JSX=JavaScriptXML

JSX可以理解为在JS中编写与XML类似的语言（与XML有本质上的不同），它的目的不是要在浏览器或者引擎中实现，也不是把其加入ECMAScript标准。它的目的是通过各种编译器将这些标记编译成标准的JS语言。

JSX是：

基于ECMAScript的一种新特性（并不是一种新语言）

一种定义带属性树结构（DOM结构）的语法

JSX不是：

XML或者HTML

一种限制（你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。）

JSX的特点：

类XML语法容易接受，结构清晰

增强JS语义

抽象程度高，屏蔽DOM操作，跨平台

代码模块化

// 用JSX来表达组件
var dropdown =
  
    A dropdown list
    
      Do Something
      Do Something Fun!
      Do Something Else
    
  ;
render(dropdown);

JSX语法

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，例如

var HelloMessage = React.createClass({
  render: function() {
    return Hello {this.props.name};
  }
});
ReactDOM.render(, mountNode);

一、元素名

自定义出的组件标签名，React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。render渲染时，会把大写的组件名定义为自定义组件，把小写的组件名定义为HTML自带的标签名进行渲染。

var HelloMessage =

JSX的标签与函数名都是使用的驼峰命名。

htmlFor和className

for和class为js的保留字，在书写for与class时需要修改为htmlFor何className，注意都是使用的驼峰命名。

自闭合标签

在 JSX 中，是合法的，而就不合法。所有的标签都必须闭合，可以是自闭和的形式，也可以是常规的闭合。

注意：所有 React component 都可以采用自闭和的形式，包括div等

二、子节点

组件与组件之间就像标签与标签之间可以有嵌套关系，与HTML不同的是可以在子节点中使用求值表达式。目前，一个 component 的 render，只能返回一个节点。如果你需要返回一堆 div ，那你必须将你的组件用一个div 或 span 或任何其他的组件包裹。

切记，JSX 会被编译成常规的 JS；因此返回两个函数也就没什么意义了，同样地，千万不要在三元操作符中放入超过一个子节点。

节点属性：

使用标签的时候指定属性和属性值传入标签内部，使标签内部可以使用属性值。

注意：

如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

然而任意属性支持自定义元素

三、求值表达式

要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ( { } ) 包起来，不要用引号 ( " " )。
求值表达式本身与JSX没有多大关系，是JS中的特性。它是会返回值的表达式，与语句有本质上的不同，在编写JSX时，在 { } 中不能使用语句（if语句、for语句等等）。我们不能直接使用语句，但可以把语句包裹在函数求值表达式中运用。建议把函数表达式独立出来，在 { } 调用。

条件判断的写法

你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。在 { } 中使用，是不合法的JS代码，不过可以采用三元操作表达式

var HelloMessage = React.createClass({
  render: function() {
    return Hello {this.props.name ？ this.props.name : "World"};
  }
});
ReactDOM.render(, document.body);

可以使用比较运算符“ || ”来书写，如果左边的值为真，则直接返回左边的值，否则返回右边的值，与if的效果相同。

var HelloMessage = React.createClass({ 
  render: function() {
      return Hello {this.props.name || "World"};
  }
});
ReactDOM.render(, document.body);

也可以使用变量来书写

var HelloMessage = React.createClass({
  getName : function() {
      if (this.props.name)
          return this.props.name
      else
          return "world"
  } 
  render: function() {
      var name = this.getName();
      return Hello {name};
  }
});
ReactDOM.render(, document.body);

其中可以把变量去掉，直接在 { } 中调用函数

  render: function() {
      return Hello {this.getName()};
  }

函数表达式

（）有强制运算的作用

var HelloMessage = React.createClass({ 
  render: function() {
      return Hello {
          （function(obj){
              if(obj.props.name)
                  return obj.props.name
              else
                  return "World"
              }(this))
      };
  }
});
ReactDOM.render(, document.body);

外括号“ ）”放在外面和里面都可以执行。唯一的区别是括号执行完毕拿到的是函数的引用，然后再调用；括号放在外面的时候拿到的事返回值。需传入（this）。

四、注释

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 { } 包围要注释的部分。

var content = (
  
    {/* 一般注释, 用 {} 包围 */}
    
  
);

五、样式

尽管在大部分场景下我们应该将样式写在独立的CSS文件中，但是有时对于某个特定组件而言，其样式相当简单而且独立，那么也可以将其直接定义在JSX中。在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。例如：

Hello World.

var style = {    
    color : "red",
    border : "1px solid #000"
}
var HelloMessage = React.createClass({
  render: function() {
    return Hello {this.props.name};
  }
});
ReactDOM.render(
, document.body);

Babel进行JSX编译

JSX是一种新的语法，浏览器并不能直接运行

React官方博客发布了一篇文章，声明其自身用于JSX语法解析的编译器JSTransform已经过期，不再维护，React JS和React Native已经全部采用第三方Babel的JSX编译器实现。原因是两者在功能上已经完全重复，而Babel作为专门的JavaScript语法编译工具，提供了更为强大的功能。
推荐使用Webpack进行React开发，首先通过npm安装Babel：

npm install —save-dev babel-loader

在webpack.config.js里进行配置

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}

小结

本文主要介绍了声明组件的语法JSX。看似有点神秘的JSX背后的原理非常简单：只是一种用于创建组件的XML语法。让代码直观易懂是软件项目质量的重要保证之一，这意味着代码更加容易理解和维护，出现Bug时更容易调试和修复。因此React这种采用JSX语法，以声明式的方法来直观的定义用户界面的方式，正是其最大的价值。

特别感谢

极客学院React.js系列课程

React 入门实例教程 by 阮一峰

深入浅出React（三）：理解JSX和组件

React.js官方文档

专线服务服务器托管 React.js 学习笔记学习笔记一基础学习笔记

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

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

React 源码深度解读（一）：首次DOM元素渲染 - Part 1

摘要：调用栈是这样的这里生成的我们将其命名为，它将作为参数传入到。整个的调用栈是这样的组件间的层级结构是这样的到此为止，顶层对象已经构造完毕，下一步就是调用来自的方法，进行页面的渲染了。通过表达的结构最终会转化为一个纯对象，用于下一步的渲染。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

daydream 2019-08-23 12:26 评论0 收藏0
精益 React 学习指南（Lean React）- 1.1 React 介绍

摘要：单向数据流应用的核心设计模式，数据流向自顶向下我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句。然而的单向数据流的设计让前端定位变得简单，页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 评论0 收藏0
2017-08-15 前端日报

摘要：前端日报精选变量声明与赋值值传递浅拷贝与深拷贝详解浅谈自适应学习比你想象的要简单常见排序算法之实现世界万物诞生记中文深入理解笔记与异步编程译不可变和中的知乎专栏译怎样避免开发时的深坑疯狂的技术宅在翻译网格布局掘金详解改变模糊度亮 2017-08-15 前端日报精选 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解浅谈web自适应学习 React.js 比你想象的要简单常见排序算法之...

xinhaip 2019-08-22 10:53 评论0 收藏0
不得不聊聊的react--入门篇

摘要：一诞生的性能瓶颈，主要有以下原因。注意组件类的第一个字母必须大写，否则会报错。组件并不是真实的节点，而是存在于内存之中的一种数据结构，叫做虚拟。此外，还提供两种特殊状态的处理函数。不会随着时间改变可能不是。本文为学习笔记，适合入门的童鞋，如有错误，请多多指教。一、react诞生 Web app的性能瓶颈，主要有以下原因。（1）Web基于DOM，而DOM很慢。浏览器打开网页时，需要...

lidashuang 2019-08-19 18:04 评论0 收藏0