3 - JSX 语法

作者: Elvmx | 来源:发表于2019-02-26 23:04 被阅读327次

JSX 的由来

React 为了方便 View 层组件化。承载了构建 HTML 结构化页面的职责。从这点上来看,React 与其他 JavaScript 模板语言有着许多异曲同工之处,但不同之处在于 React 是通过创建与更新虚拟元素(virtual element)来管理整个 Virtual DOM 的。

JSX 将 HTML 语法直接加入到 JavaScript 代码中,再通过翻译器转换成 纯JavaScript 。在实际开发中,JSX 在产品打包阶段都已经编译成 纯JavaScript 了,不会带来副作用,反而让代码更加直观并易于维护。

JSX 的官方定义是 类XML语法的ECMAScript扩展。它完美地利用了 JavaScript 自带的语法和特性。并使用大家熟悉的HTML语法来创建虚拟元素。

JSX 的构成

  • JS - JavaScript
  • X - xhtml (严格版本的html)

JSX 的基本语法

  • 单个根元素
  • 单标签要闭合 <br /> <input /> <img />
  • img 标签需要添加 alt 属性
  • 标签都是小写字母,组件首字母大写
  • class -> className
  • for -> htmlFor

JSX 中的注释

  • 多行注释
{ /*<h2>这是一个组件</h2>*/ }
  • 单行注释
{ 
    //<h2>这是一个组件</h2> 
}

React 中的插值表达式

  • vue - {{ 1 + 1 }}
  • react - { 1 + 1 }

PS: 在插值表达式中{ '' } | { false } | {null} | {undefined} 都不会渲染任何内容

html内容转义,需要使用 dangerouslySetInnerHTML 属性

<div dangerouslySetInnerHTML={{__html: content}}></div>

React 中没有指令系统

相关文章

  • react-jsx

    jsx 是类似 js 模板语法 声明 jsx 使用 jsx jsx 语法 jsx 是 js 的语法扩展,在 jsx...

  • JSX本质

    JSX语法 1.jsx其实是语法糖 2.开发环境会将jsx编译成js代码 3.JSX是React引入的,但不是Re...

  • 03.React-Native JSX

    1.什么是JSX: javaScriptXML### 2.JSX的特点### 3.如何使用JSX语法### 4.非...

  • 3 - JSX 语法

    JSX 的由来 React 为了方便 View 层组件化。承载了构建 HTML 结构化页面的职责。从这点上来看,R...

  • React Native

    1.首先写好JSX代码(React框架就是使用JSX语法) 2.把JSX代码解析成javaScript代码 3.O...

  • react语法结构

    1.react JSX语法原理 react是函数式编程,使用jsx语法来渲染组件。jsx语法是合法的JavaScr...

  • React 笔记

    JSX React 采用jsx语法,需用bable.js转义. JSX 语法可以和html 混写. html以< ...

  • [react]3、基本语法

    1、类的定义 1、ES5语法类的定义 2、ES6语法类的定义 3、map高阶函数 2、JSX语法 JSX是一种Ja...

  • (React)认识React语法

    一、JSX语法 在React中,没有使用HTML标签来绘制UI,而是使用了JSX语法。 当然JSX语法中,也可以嵌...

  • Hello React

    知识点 1、JSX语法     2、React基本语法     3、bower的基本使用     4、babel的...

网友评论

    本文标题:3 - JSX 语法

    本文链接:https://www.haomeiwen.com/subject/bqdtuqtx.html