04. react 初次見面---組件&Props

    組件從概念上看就像是函數，它能夠接收任意的輸入值（稱之爲「props」），並返回一個須要在頁面上展現的React元素。

一、組件定義的兩種方式

1.1 函數定義組件

    定義一個組件最簡單的方式是使用JavaScript函數：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

    該函數是一個有效的React組件，它接收一個單一的「props」對象並返回了一個React元素。咱們之因此稱這種類型的組件爲函數定義組件，是由於從字面上來看，它就是一個JavaScript函數。

1.2 ES6 class 來定義組件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

二、組件渲染

    React元素也能夠是用戶自定義的組件。當React遇到的元素是用戶自定義的組件，它會將JSX屬性做爲單個對象傳遞給該組件,這個對象稱之爲「props」。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

    上段代碼會在頁面上渲染出」Hello,Sara」。這裏定義組件使用的是第一種方式 函數定義組件，我本身嘗試了第二種 ES6 class方式來定義組件，報錯。先日後學，再邊學便理解。

    官網上告訴咱們上段代碼執行過程以下：

1. 咱們對 <Welcome name="Sara" /> 元素調用了 ReactDOM.render() 方法。
2. React將 {name: 'Sara'}做爲props傳入並調用 Welcome組件。
3. Welcome組件將 <h1>Hello, Sara</h1>元素做爲結果返回。
4. React DOM將DOM更新爲 <h1>Hello, Sara</h1>。

警告:

組件名稱必須以大寫字母開頭。

例如，<div /> 表示一個DOM標籤，但 <Welcome /> 表示一個組件，而且在使用該組件時你必須定義或引入它。

3. 組件組合 

    組件能夠在它的輸出中引用其它組件，這就可讓咱們用同一組件來抽象出任意層次的細節。在React應用中，按鈕、表單、對話框、整個屏幕的內容等，這些一般都被表示爲組件。

警告:

組件的返回值只能有一個根元素。這也是咱們要用一個<div>來包裹全部<Welcome />元素的緣由。

 4. 提取組件

    你能夠將組件切分爲更小的組件。

提取組件一開始看起來像是一項單調乏味的工做，可是在大型應用中，構建可複用的組件徹底是值得的。當你的UI中有一部分重複使用了好幾回（好比，Button、Panel、Avatar），或者其自身就足夠複雜（好比，App、FeedStory、Comment），相似這些都是抽象成一個可複用組件的絕佳選擇，這也是一個比較好的作法。

5. Props的只讀性

    不管是使用函數或是類來聲明一個組件，它決不能修改它本身的props。