React腳手架（2）組件的結構和JSX

組件的創建

前端的文件目錄樹，除了特定的配置文件之外，其他都可以按照自己的項目需求創建，但是要層次結構分明，一般情況下，我們按照組件功能或者路由來生成項目的目錄樹（示例在src目錄下新建一個components文件夾，然後在其中新建組件）。

• 組件的文件

React中的組件都是以JS文件的形式呈現的。

新建HeaderNav組件，那就新建一個header-nav.js

• 組件的代碼

React中組件的具體代碼形式是一個class類，比如：

class HeaderNav {
	// code 
}
export default HeaderNav

這個類和普通的JS的類沒有什麼區別，那麼如何區分組件類和普通的類。

React封裝了一個Component類，在其中封裝了React提供的組件的基本操作，聲明一個普通的類，讓其繼承於Component類，那麼這個類就會被當做一個組件去使用，也可以調用React提供給組件的所有屬性和方法。

import React from 'react'
class HeaderNav extends React.Component {
	render() {
		 return <h1>我是一小段測試代碼</h1>;
	}
}
export default HeaderNav

---

組件的調用

一般情況下，框架中調用組件至少兩種方式，父組件調用子組件和路由調用組件。我們先說父組件調用子組件（路由單獨介紹）。

• 在父組件中導入子組件（比如我們要在App中調用HeaderNav，那就在App.js中導入header-nav.js）：

// App.js
import HeaderNav from './components/header-nav.js'

• 在父組件的結構中調用被導入的子組件（示例將App中的默認結構刪除了）

// App.js
...
class App extends Component {
	render() {
		return (
			<div className="App">
      			<HeaderNav />
      		</div>
      	);
    }
}
...

---

組件的結構

上面的組件創建和調用中，組件的HTML結構聲明在JS代碼中，被一個r ender函數返回。這種結構聲明的方式就是React的核心之一，JSX語法。render函數是ReactDOM對象的一個方法，React使用它解析JSX語法並渲染在DOM上。

ReactDOM.render()函數

一、 根組件

React中只有一個根節點（在一個已有項目中引入react除外），這個根節點在"public/index.html"中，如果要將某個結構渲染在瀏覽器上，必須使用ReactDOM.render函數。

當然這個配置是在安裝項目時默認就有的，在"public/index.html"中有一個id爲"root"的div，在"src/index.js"中，導入了App組件，並使用ReactDOM.render()函數將其渲染到了"root"中：

// public/index.html
...
<div id="root"></div>
...

// src/index.js
...
import App from './App'
...
...
ReactDOM.render(<App />, document.getElementById('root'));
...

二、子組件

每一個組建類中都要有一個render函數，這個render函數返回一個JSX語法聲明的元素，就是當前組件的結構代碼。

JSX語法

React中，由JSX語法聲明結構代碼（HTML），之後用React語法調用。

一、JSX

JSX允許在JS代碼中直接編寫HTML結構代碼。

1. 單一結構

// header-nav.js
import React from 'react'

// 使用JSX語法，用一個變量承接一個JSX元素
const el = <h1>取次花叢懶回顧，半緣修道半緣君。</h1>;

class HeaderNav extends React.Component {
	render() {
		return el; // 直接調用el變量
	}
}
export default HeaderNav

2. 嵌套結構

// header-nav.js
...
// 如果元素結構較爲複雜，爲了避免不必要的bug，我們要將JSX語法寫在一對小括號中
const el = (
	<div>
		<p>曾經滄海難爲水</p>
		<p>除去巫山不是雲</p>
		<p>取次花叢懶回顧</p>
		<p>半緣修道半緣君</p>	
	</div>
);
...

3. JSX中寫表達式
   框架的結構中結合表達式使用是一種常規操作，JSX中的表達式用{}包裹：

// header-nav.js
...
const arr = ['取次花叢懶回顧','半緣修道半緣君'];
const el = (
	<div>
		<p>{arr[0]}</p>
		<p>{arr[1]}</p>
	</div>
);
...

• {}中的表達式可以是三目運算、邏輯運算等。

4. 如果我們要利用JSX封裝一個常用的模塊（彈框），這個模塊的結構不變，但是每次調用它時，結構中顯示的內容不定，那麼我們可以使用函數封裝這個公共模塊（這種封裝建議函數名大寫）。

// header-nav.js
import React from 'react'

function Message() {
	return (<div>
		<p>取次花叢懶回顧</p>
		<p>半緣修道半緣君</p>
	</div>);
}
class HeaderNav extends React.Component {
	render() {
		return (
			<div>
				<Message />
			</div>
		);
	}
}
export default HeaderNav

在上面的示例中，Message就是一個被封裝的模塊。Message被封裝後可能會被重複調用，每次調用時，內部展示的內容可能都是不定的。所以我們可以在調用Message時向其傳參。

5. 調用封裝好的模塊並向其傳參

// header-nav.js
import React from 'react'

// 封裝Message模塊，並接收參數
function Message(props) {
	return (<div>
		<p>{props.arr[0]}</p>
		<p>{props.arr[1]}</p>
	</div>);
}
class HeaderNav extends React.Component {
	render() {
		return (
			<div>
				<Message  arr={['身無綵鳳雙飛翼','心有靈犀一點通']} />
				<Message  arr={['天長地久有時盡','此恨綿綿無絕期']} />
			</div>
		);
	}
}
export default HeaderNav

Message模塊被複用，並且再被複用時接收了動態的數據。

注:

• 如果還有其他參數，那就和arr一樣，在調用該組件時以屬性的形式傳參即可；
• props對象接收模塊被調用時的參數列表；
• 公共模塊的封裝一般比較複雜，可以將其瘋轉在單獨的JS文件中，再在需要調用的組件內導入使用；
• 如果某些公共模塊內部的組件邏輯較爲複雜，建議直接將其封裝成組件，不推薦函數封裝這種方法；

二、React.createElement()函數

JSX聲明元素本質上是React對象的createElement()函數提供的語法糖。

// JSX:
const el = <h1></h1>;

// 本質：
React.createElement('h1');

所以如果要在某個JS文件中編寫JSX語法，必須要提前引入React。

/* 
React.createElement(elName,props,...children);
elName: 要新建的模塊的名稱；
props: 屬性列表；（具體請參照文檔）
children: 子元素列表；
*/

---

參考文檔：
官方文檔中對於項目目錄樹的說明