React实战-深入了解JSX

绝地灬酷狼 2022-07-20 16:18 177阅读 0赞

深入了解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，则更加简单，清晰。如：

<a href="https://facebook.github.io/react/">Hello!</a>

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

三.组件中JSX的写法

1.节点写法与HTML类似

如：

var Nav;

// Input (JSX):

var app = <Nav color="blue" />;

其中要使用<Nav />, 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 = (

<Form>

</FormRow>

</Form>

);

而应该采用以下写法：

var Form = MyFormComponent;

var App = (

<Form>

<Form.Row>

<Form.Label />

<Form.Input />

</Form.Row>

</Form>

);

3.Javascript表达式

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

选择表达式如 :

var person = <Person name=\{window.isLoggedIn ? window.name : ''\} />;

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

<input type="button" disabled />;

子节点表达式：

var content = <Container>\{window.isLoggedIn ? <Nav /> : <Login />\}</Container>;

说明的表达式：

<Nav>

\{/\* child comment, put \{\} around \*/\}

<Person

/\* multi

line

comment \*/

name=\{window.isLoggedIn ? window.name : ''\} // end of line comment

</Nav>

4.HTML元素写法

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

<div>First · Second</div>

<div>\{'First · Second'\}</div>

<div>\{'First \\u00b7 Second'\}</div>

<div>\{'First ' + String.fromCharCode(183) + ' Second'\}</div>

但是不要写成<div>\{'First & middot; Second'\}</div>，否则将显示为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代替。如<div className=”foo”/>。

但是用户类元素还应直接采用class和for,如：<my-tag class="foo" />。

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"