React实战-深入了解JSX-蒲公英云

深入了解JSX

一：Why is JSX

各种编程语言层出不穷，每天都有新的编程语言出现，每隔一段时间，流行的编程语言将会如皇朝般更替。对于程序员来说，这是件又爱又恨的事情。语言的变化适应着科技的发展，不断优化旧的编程模式，使程序设计更加简单、合理。但目前看来这种变化过于迅速，使得程序员应接不暇，旧的语言还没有搞明白，新的语言又来了，更加令人无法沉下心来做事情，每个人想着不被技术淘汰，不被社会淘汰。尤其在中国，程序员成为当今社会最为焦虑的一种人，程序设计师成为一种青春饭的职业，以至于人人云，35岁要转管理，要转产品，要做CTO，我个人对此嗤之以鼻，去他妈的管理，去他妈的CTO，老子就想做个安静的程序员，微信公众号：react-javascript。

牢骚一顿，还是看看Facebook为什么要整出个JSX。JSX是一种扩展的JavaScript语法，类似于XML。官网上是这么描述的：我们认为组件化更好的方式不是要创建“模板”和“展示逻辑”，而是在自己内部将这些关系进行关联。另外，展示逻辑一般会比较复杂，使用模板去表示会更加臃肿。我们发现最好的解决方案是直接用JavaScript去直接生成这些组件的HTML和表示逻辑。但是JavaScript本身不具备这样的能力，因此就出现了JSX。

二．JSX不是必须的。

JSX并不是ReactJS必须的，如果你喜欢，完全可以不用采用JSX，而采用ReactJS的函数去创建HTML节点。如下：

React.createElement(‘a’, {href: ‘https://facebook.github.io/react/'\}, ‘Hello!’)。

而采用JSX，则更加简单，清晰。如：

Hello!

如同在直接编写HTML标签，语法也基本相似，要比写ReactJS函数要方便的多。

三.组件中JSX的写法

1.节点写法与HTML类似

如：

var Nav;

// Input (JSX):

var app =

;

其中要使用

, Nav必须在同一作用域内。

最终转化的Javascript是

var app = React.createElement(Nav, {color:”blue”});

2.组件的写法

如果要创建的组件有很多子节点，如form,可能有row,label,input等，不要采用以下方式：

// Awkward block of variable declarations

var Form = MyFormComponent;

var FormRow = Form.Row;

var FormLabel = Form.Label;

var FormInput = Form.Input;

var App = (

);

而应该采用以下写法：

var Form = MyFormComponent;

var App = (

);

3.Javascript表达式

在JSX中Javascript的表达式采用（{}）而不是（“”）。

选择表达式如 :

var person = ;

Boolea表达式如（两种表达式意义相同）：

;

子节点表达式：

var content = {window.isLoggedIn ?

: };

说明的表达式：

4.HTML元素写法

如(以下几种写法展示效果相同)：

First · Second

{‘First · Second’}

{‘First \u00b7 Second’}

{‘First ‘ + String.fromCharCode(183) + ‘ Second’}

但是不要写成

{‘First & middot; Second’}

，否则将显示为First & middot; Second。

四.JSX与HTML的不同点。

JSX与HTML中基本写法相同，但也有不同之处，而在实际应用中恰恰是因为这些不同点成为编程过程中的坑。除了上一节中表达式的不同，JSX还有一些与HTML不同之处。

1.所有的DOM的属性应该采用驼峰命名法，类似于Java命名规则。只有data-*，aria-*等采用小写。

2.style属性采用JavaScript对象时也应采用驼峰命名而不是采用Css字符串，与JavaScript属于一致，会更有效，并且可以预防XSS安全漏洞。

3.Class，for已经成为JavaScript的保留字，因此以JSX创建DOM节点时，style class应采用className和htmlFor代替。如

。

但是用户类元素还应直接采用class和for,如：。

4.ReactJS中的事件变化较大，为了实现跨浏览器，优化性能，它采用了SynthecticEvent。希望在所有浏览器上保持一致。在写法上也采用驼峰命名。与HTML原有事件的基本对于关系是onclick对应于onClick。尤其是在v0.14之后，事件返回false将不再能阻止事件传播，需要采用e.stopPropagation()或者e.preventDefault()。（ReactJS的事件需细细分解了）。

5.Form 中input,textarea,select等于Html的用法区别较大。在ReactJS中分为Controlled Components 和UnControlled Components。

a.Controlled Components的写法

getInitialState: function() {

return \{value: 'Hello!'\};

handleChange: function(event) {

this.setState(\{value: event.target.value\});

render: function() {

return (
  <input
    type="text"
    value=\{this.state.value\}
    onChange=\{this.handleChange\}
  />
);

}

Input值是通过state中的数据获取的，值的变化通过onChange事件改变state中的值。

如果采用以下写法，用户无法直接修改页面中input的值。render: function() {

return <input type="text" value="Hello!" />;

}

b.Uncontrolled Components的写法

如果中没有value属性，则该组件是一个Uncontrolled Component。

可以通过defaultValue赋初始值，用户可以直接修改页面中input的值，修改的值会直接显示在页面上，并且可以通过onChange事件获得当前值。

React实战-深入了解JSX

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 React（二）—— JSX

相关【React】JSX语法

相关 react jsx语法

相关 React-jsx语法

相关 React框架入门-创建项目、JSX了解

相关 React实战-深入了解JSX

相关 React学习 -- JSX

相关 React之JSX

相关 react jsx语法

相关 React官网学习实践 - 深入JSX

随便看看

分布式事务之TCC服务设计和实现注意事项！

【Redis】听说Redis是单进程单线程的？

Html5基础及部分常用标签介绍

XStream将JavaBean转为xml

JDBC中数据库的增删改查操作

【2020-03-02 SpringBoot 的Shiro 授权与认证的基本使用示例】

教程文章

热评文章

1江湖小白之一起学Python （二）爬取数据的保存

2Java Shiro：简化身份验证和授权的安全框架

3Java中try()catch{}的使用方法

4Swagger注解-@ApiModel 和 @ApiModelProperty

5windows下强制杀死tomcat进程

6uni-app 条形码(一维码)/二维码生成实现

标签列表