在本章中,我們將學(xué)習(xí)如何組合組件以使應(yīng)用程序更易于維護(hù)。 這種方法允許更新和更改組件,而不會(huì)影響頁(yè)面的其余部分。
下例中的第一個(gè)組件是App。 此組件是標(biāo)題和內(nèi)容的所有者。這里分別創(chuàng)建Header
和Content
,并將其添加到App組件的JSX樹中。 只有App組件需要導(dǎo)出。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text ~ </p>
</div>
);
}
}
export default App;
為了能夠在頁(yè)面上呈現(xiàn),需要將它導(dǎo)入main.js
文件并調(diào)用reactDOM.render()
。 在設(shè)置環(huán)境的時(shí)候就已經(jīng)這樣做了。
文件:main.js -
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
上面的代碼將生成以下結(jié)果 -
在這個(gè)例子中,我們將設(shè)置所有者組件(App)的狀態(tài)。 Header
組件就像上一個(gè)例子一樣添加,但它不需要任何狀態(tài)。這里創(chuàng)建table
和tbody
元素,而不是content
標(biāo)簽,在這里為數(shù)據(jù)數(shù)組中的每個(gè)對(duì)象動(dòng)態(tài)插入TableRow
。
可以看出,我們使用的EcmaScript 2015
箭頭語(yǔ)法(?)看起來比舊的JavaScript語(yǔ)法更清晰。 這將幫助我們用更少的代碼來創(chuàng)建元素。 當(dāng)需要?jiǎng)?chuàng)建一個(gè)包含很多項(xiàng)目的列表的時(shí)候,它是非常有用的。
文件:App.jsx -
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}
render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => <TableRow key = {i}
data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;
注意 - 注意我們?cè)?code>map()函數(shù)中使用key = {i}
。 這將有助于React更新只有必要的元素,而不是在發(fā)生更改時(shí)重新呈現(xiàn)整個(gè)列表。 對(duì)于大量動(dòng)態(tài)創(chuàng)建的元素來說,這是一個(gè)巨大的性能提升。得到以下結(jié)果 -