React.js 基礎(chǔ)入門四--要點(diǎn)總結(jié)

JSX語法，像是在Javascript代碼里直接寫XML的語法，實(shí)質(zhì)上這只是一個(gè)語法糖，每一個(gè)XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼，React 官方推薦使用JSX， 當(dāng)然你想直接使用純Javascript代碼寫也是可以的，只是使用JSX，組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰。

1. HTML 標(biāo)簽 和 React 組件

    在JS中寫HTML標(biāo)簽，也許小伙伴們都驚呆了，那么React又是怎么區(qū)分HTML標(biāo)簽,React組件標(biāo)簽?

HTML標(biāo)簽：

var myDivElement = ;
React.render(myDivElement, document.body);

React組件標(biāo)簽：

1. var Div= React.createClass({/*...*/});

2. var myElement = << span="">Div someProperty={true} />;

3. React.render(myElement, document.body);    

    插播：

        1. 注意大寫開頭* 

        2. 不要隨意document.body， 它是覆蓋不是追加。（及時(shí)代碼找的回來）

        3. 屬性someProperty={true}

是不是很簡(jiǎn)單，一眼就發(fā)現(xiàn)了，congruatulations 聰明的你已經(jīng)理解!

2. JSX與原生態(tài)JavaScript 

	//使用JSX
React.render(	content,
	document.getElementById('example')
);
//不使用JSX
React.render(
	React.createElement('div', null,
		React.createElement('div', null,
			React.createElement('div', null, 'content')
		)
	),
	document.getElementById('example')
);

那么也就是說，我們寫一個(gè)XML標(biāo)簽，實(shí)質(zhì)上就是在調(diào)用 React.createElement 這個(gè)方法，并返回一個(gè) ReactElement 對(duì)象。

API中：

React.createElement

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...])  #注意此處的省略號(hào)

第一個(gè)參數(shù)可以是一個(gè)字符串，表示是一個(gè)HTML標(biāo)準(zhǔn)內(nèi)的元素，或者是一個(gè)ReactClass類型的對(duì)象，表示我們之前封裝好的自定義組件。

第二個(gè)參數(shù)是一個(gè)對(duì)象，或者說是字典也可以，它保存了這個(gè)元素的所有固有屬性（即傳入后基本不會(huì)改變的值）。

從第三個(gè)參數(shù)開始，之后的參數(shù)都被認(rèn)作是元素的子元素。

JSX的轉(zhuǎn)換

React JSX 將元素的標(biāo)簽、屬性和子元素都會(huì)被當(dāng)作參數(shù)傳給 React.createElement 方法：

		// JSX
		var Nav;
		var app = ;
		
		// native JS
		var Nav;
		var app = React.createElement(Nav, {color:"blue"});

JSX的轉(zhuǎn)化器

    這個(gè)工具會(huì)把使用JSX語法的文件轉(zhuǎn)換成純的可以直接在瀏覽器里面運(yùn)行起來的JavaScript文件。它也會(huì)為你監(jiān)視目錄，然后自動(dòng)轉(zhuǎn)換變化的文件

    要把帶有JSX語法的代碼轉(zhuǎn)化為純Javascript代碼，有多種方式：

1. 對(duì)于內(nèi)聯(lián)與HTML中的代碼或者是未經(jīng)過轉(zhuǎn)化的外部文件，在 script 標(biāo)簽中要加上 type="text/jsx" ，并引入 JSXTransformer.js 文件即可。

2. 不過這種方式并不建議在生產(chǎn)環(huán)境使用，建議的方法是在代碼上線前就將代碼轉(zhuǎn)換好，可以使用npm 全局安裝 react-tools ：

#npm install react-tools -g

并使用命令行工具轉(zhuǎn)化即可（具體用法可以參考 jsx -h 或者 jsx --help ） jsx 通過watch實(shí)時(shí)監(jiān)控，具體使用看幫助吧。此處只列舉試?yán)?/p>

# jsx --watch src/ build/

( #表示linux中的用戶權(quán)限，windows用戶大可不用理睬 )

大愛無邊的React. render

React.render方法可以渲染HTML結(jié)構(gòu)，也可以渲染React組件。 

(此處與上面重復(fù)，只做演示)

1.  渲染HTML標(biāo)簽，聲明變量采用 首字母小寫

var myDivElement = ;
React.render(myDivElement, document.body);	

2.   渲染React組件，聲明變量采用 首字母大寫

var MyComponent = React.createClass({/*...*/});
var myElement = ;
React.render(myElement, document.body);	

不過需要注意的是 class 和 for 屬性（不太確定多少個(gè)，等查閱api后續(xù)增加），JSX語法最終是要被轉(zhuǎn)換為純Javascript的，所以要和在Javascript DOM中一樣， 用className 和 htmlFor 。

//使用JSX
React.render(	content,
	document.getElementById('example')
);
//不使用JSX
React.render(
	React.createElement('label', {className: 'xxx', htmlFor: 'input'}, 'content'),
	document.getElementById('example')
);	

相信你一眼就瞅出了不同點(diǎn)。

可惡但有可愛之處：

在創(chuàng)建HTML標(biāo)準(zhǔn)內(nèi)的元素時(shí)，JSX轉(zhuǎn)化器會(huì)丟棄那些非標(biāo)準(zhǔn)的屬性，如果一定要添加自定義屬性，那么需要在這些自定義屬性之前添加 data- 前綴。

上同樣的代碼：

var HtmlOptions = React.createClass({
	render:function (){
		return (			 屬性延伸
		);
	}
});

var ys = ; 
React.render(ys, document.getElementById('htmls'));

渲染后，看看你的標(biāo)簽總是否有zz的屬性，恭喜你........

是不是沒有？ 哈哈，那就對(duì)了， 把zz替換成data-zz試試。

看上去高大上的用法（捂?。?/p>

有人說，用了這些寫法后，不會(huì)再寫原生態(tài)的JS代碼了， 是的，懶（和）做（諧）才會(huì)是天朝。

比如開發(fā)組件的時(shí)候，一個(gè)組件有多個(gè)子組件，你希望這些子組件可以作為其父組件的屬性，那么可以像這樣用：

var Form = MyFormComponent;
var App = (	);	

插播： 此處又要插播了（這是我們的愛好，插播才能提升質(zhì)量）

React 組件標(biāo)簽

這樣的寫法表示 自閉合標(biāo)簽（

）

還要注意：都要開頭大寫，并且加上父類組件標(biāo)簽哦。為啥呢？ follow

這樣你只需將子組件的 ReactClass 作為其父組件的屬性：

var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });	

利用子組件 和 父組件形式 再來渲染。

然而這也是可以的：

	var App = (
		React.createElement(Form, null,
		    React.createElement(Form.Row, null,
		        React.createElement(Form.Label, null),
		        React.createElement(Form.Input, null)
		    )
		)
	);

該功能需要0.11及以上版本

Javascript表達(dá)式

在JSX語法中寫Javascript表達(dá)式只需要用 {} 即可，比如下面這個(gè)使用三目運(yùn)算符的例子：

JSX是HTML和JavaScript混寫的語法，當(dāng)遇到 < ，JSX就當(dāng)HTML解析，遇到 { 就當(dāng)JavaScript解析。

	// Input (JSX):
	var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
	// Output (JS):
	var content = React.createElement(
		Container,
		null,
		window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
	);	

屬性表達(dá)式

	React.render(
		<div className={2 > 1 ? 'class-a' : 'class-b'}>content</div>,
		document.body
	);	

子表達(dá)式

	var Nav = React.createClass({
		render: function () {
		return <div>nav</div>
		}
	});
	React.render(
		<div>
		    {2 > 1 ? <Nav/> : <div>div</div>}
		</div>,
		document.body
	);	

臥去， so easy!是不是？

相信你會(huì)想到這樣寫更碉堡。

	// This JSX:
	<div id={if (condition) { 'msg' }}>Hello World!</div>
	
	// Is transformed to this JS:
	React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");	

多高大上啊?？上?strong>錯(cuò)誤的

這讓我想起了PHP中html與php混淆的寫法。

<div><?php if ( 1>0 ){ echo '碉堡了'; } ?></div>

 或者Pyhon中

[x+n for x in range(0,100) for n in range(0,10) if x%3==0 if n%5==0 ]

看不懂，超碉堡??！ CAO, 是難看，不是看著難。

可以從轉(zhuǎn)化后的Javascript代碼中看出明顯的語法錯(cuò)誤，所以要不用三目運(yùn)算符，要不就這樣寫：

	if (condition) <div id='msg'>Hello World!</div>
	else <div>Hello World!</div>	

以下純屬賦值粘貼： 但經(jīng)過驗(yàn)證，很不錯(cuò)

傳播屬性（Spread Attributes）

如果提前就知道了組件的屬性的話，寫起來很容易。例如component組件有兩個(gè)動(dòng)態(tài)的屬性foo和bar：

var component = <Component foo={x} bar={y} />;

而實(shí)際上，有些屬性可能是后續(xù)添加的，我們沒辦法一開始就確定，我們可能會(huì)寫出下面不好的代碼：

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad	

這樣寫是錯(cuò)誤的，因?yàn)槲覀兪謩?dòng)直接添加的屬性React后續(xù)沒辦法檢查到屬性類型錯(cuò)誤，也就是說，當(dāng)我們手動(dòng)添加的屬性發(fā)生類型錯(cuò)誤時(shí)，在控制臺(tái)是看不到錯(cuò)誤信息的。

在React的設(shè)定中，初始化完props后，props是不可變的。改變props會(huì)引起無法想象的后果。

延伸屬性

為了解決這個(gè)問題，React引入了屬性延伸

	        var props = {};
		props.foo = x;
		props.bar = y;
		var component = <Component {...props} />;
		//或者
		var props = { foo: x, bar: y };
		var component = <Component { ...props } />;	

這樣就相當(dāng)于：

var component = <Component foo={x} bar={y} />

當(dāng)需要拓展我們的屬性的時(shí)候，定義個(gè)一個(gè)屬性對(duì)象，并通過 {…props} 的方式引入，在JSX中，可以使用 ... 運(yùn)算符，表示將一個(gè)對(duì)象的鍵值對(duì)與 ReactElement 的 props 屬性合并，這個(gè) ... 運(yùn)算符的實(shí)現(xiàn)類似于ES6 Array中的 ... 運(yùn)算符的特性。，React會(huì)幫我們拷貝到組件的props屬性中。重要的是—這個(gè)過程是由React操控的，不是手動(dòng)添賦值的屬性。

它也可以和普通的XML屬性混合使用，需要同名屬性，后者將覆蓋前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'	

JSX 陷阱

style屬性

在React中寫行內(nèi)樣式時(shí)，要這樣寫，不能采用引號(hào)的書寫方式

React.render(
		<div style={{color:'red'}}>
		xxxxx
		</div>,
		document.body
);	

HTML轉(zhuǎn)義

比如我們有一些內(nèi)容是用戶輸入的富文本，從后臺(tái)取到數(shù)據(jù)后展示在頁面上，希望展示相應(yīng)的樣式.

var content='<strong>content</strong>';
		React.render(
		<div>{content}</div>,
		document.body
);

結(jié)果頁面直接輸出內(nèi)容了：

<strong>content</strong>

React默認(rèn)會(huì)進(jìn)行HTML的轉(zhuǎn)義，避免XSS***，如果要不轉(zhuǎn)義，可以這么寫：

var content='<strong>content</strong>';
		React.render(
		<div dangerouslySetInnerHTML={{__html: content}}></div>,
		document.body
		);	

最后推薦一個(gè)的博文博客：（沒有看，大家可參考閱讀）

http://blog.csdn.net/lihongxun945/article/details/45826851

http://blog.csdn.net/lihongxun945/article/category/5195241

阮一峰的react.js入門

本文來自鏈接：http://sowm.cn/css88/article/q6fiAf.html