函數(shù)定義/類定義組件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
上面兩個組件在React中是相同的。
只是第一種是JS函數(shù)定義的組件，第二種是ES6 Class定義的組件雕擂。
組件渲染
React元素可以是DOM標(biāo)簽踊东，也可以是用戶自定義的組件。
const element = <Welcome name="Sara" />;
當(dāng)React遇到的元素是用戶自定義的組件胞四，它會將JSX屬性作為單個對象傳遞給該組件恬汁，這個對象稱之為“props”。
如上圖會將{name: 'Sara'}作為props的值入Welcome組件內(nèi)部辜伟。
警告:
組件名稱必須以大寫字母開頭氓侧。
例如，<div />表示一個DOM標(biāo)簽导狡，但<Welcome />表示一個組件约巷，并且在使用該組件時你必須定義或引入它。
組合組件
組件可以在它的輸出中引用其它組件旱捧，這就可以讓我們用同一組件來抽象出任意層次的細節(jié)独郎。
多考慮組件的可復(fù)用性，視情況細化組件粒度枚赡。
例如氓癌，我們可以創(chuàng)建一個 App 組件，用來多次渲染 Welcome 組件：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
警告:
組件的返回值只能有一個根元素贫橙。這也是我們要用一個<div>來包裹所有<Welcome />元素的原因贪婉。
Props的只讀性
React是非常靈活的，但它也有一個嚴格的規(guī)則：
無論是使用 函數(shù) 或是 類 來聲明一個組件卢肃，它決不能修改它自己的props疲迂！
組件定義及引入步驟
- 首先創(chuàng)建一個Hello.js文件(在React中，約定成俗的習(xí)慣是組件命名首字母大寫)
import React from 'react';
const hello = () => {
return <p>Hello莫湘，React鬼譬！</p>
};
export default hello;
- 在需要引入的地方import，如果我們最常見的App.js文件里逊脯。
import Hello from './Hello/Hello';
ReactDOM.render(<Hello/>, document.getElementById('root'));
效果如圖：
