React 之 JSX

开发完了一个项目了才回来研究React 一系列的技术，算是对自己的一个提高吧，也是小公司程序员的无奈。

JSX是什么？

　　JSX是javascript的语法的扩展。

为什么使用JSX？

　　1、React 认为渲染逻辑本质上与其他UI逻辑内存在耦合。

　　2、JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

　　3、在编译过程中就能提供有效的错误或者警告信息，类型安全。

　　4、JSX和UI 放在一起的方式，对开发来说，是视觉上能起到一定的辅助作用。

JSX 使用，

　　JSX 中可以嵌入js表达式，同时JSX自身也是个表达式

function formatName(user) {if(user){　　　　return <h1>{user.firstName}"_"{user.lastName} </h1>;  {/*JSX 被当成了一个表达式*/}}else{　　　　return <h1>word!</h1> 　　}}const user = {firstName: 'Rain',lastName: 'tdk'
};const element = (<div>Hello, {formatName(user)}!  {/*JSX嵌入了一个表达式*/}    </div>
);ReactDOM.render(element,document.getElementById('root')
);

JSX可以有效的防止注入攻击。

　　在渲染所有输入内容的之前默认会进行转义成字符串。这样就可以有效的防止xss（cross-site-scrpting）攻击。

转载于:https://www.cnblogs.com/web-Rain/p/10721937.html

React 之 JSX相关推荐

[react] 在JSX中如何写注释？
[react] 在JSX中如何写注释? {/* A JSX comment */} 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释运行效果: i ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
tsconfig.json 配置 update `jsx: “react“` into `jsx: “react-jsx“`终端警告
使用 umiJS 时出现的终端警告: WARN [WARN] update jsx: "react" into jsx: "react-jsx" to supo ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
React学习--- JSX的学习
React学习- JSX 1.概述 JSX 是 React 的核心组成部分,它使用 XML 标记的方式去直接声明界面,界面组件之间可以互相嵌套.可以理解为在 JS 中编写与 XML 类似的语言, ...
react中 JSX介绍-基本使用
JSX是什么 JSX:是 JavaScript XML的缩写. 在 JS 代码中书写 XML 结构注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展.脚手架中内置了 @babel/plugi ...
React中jsx的规则
jsx语法规则:1.定义虚拟DOM时,不要写引号.2.标签中混入JS表达式时要用{}.3.样式的类名指定不要用class,要用className.4.内联样式,要用style={{key:value} ...

React 之 JSX

React 之 JSX相关推荐

最新文章

热门文章