03組件與props

1.組件理解

組件，從概念上類似于 JavaScript 函數(shù)辰晕。它接受任意的入參（即 “props”），并返回用于描述頁面展示內容的 React 元素痊末。簡單理解就是一個產生React元素的東西乓土，同時它可以復用(個人理解)

2.定義組件的方式

函數(shù)組件：通過函數(shù)定義毕荐，返回React元素
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
該函數(shù)是一個有效的 React 組件郁惜，因為它接收唯一帶有數(shù)據的 “props”（代表屬性）對象與并返回一個 React 元素涡上。這類組件被稱為“函數(shù)組件”柬唯，因為它本質上就是 JavaScript 函數(shù)认臊。

class組件：利用es6的class來定義組件

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

注意： 組件名稱必須以大寫字母開頭。(區(qū)別DOM標簽)

3.props

React 元素也可以是用戶自定義的組件锄奢。當 React 元素為用戶自定義組件時失晴，它會將 JSX 所接收的屬性（attributes）以及子組件（children）轉換為單個對象傳遞給組件，這個對象被稱之為 “props”拘央。

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
/*
    1.我們調用 ReactDOM.render() 函數(shù)涂屁，并傳入 <Welcome name="Sara" /> 作   為參數(shù)。
    2.React 調用 Welcome 組件灰伟，并將 {name: 'Sara'} 作為 props 傳入拆又。
    3.Welcome 組件將 <h1>Hello, Sara</h1> 元素作為返回值儒旬。
    4.React DOM 將 DOM 高效地更新為 <h1>Hello, Sara</h1>。
*/

4.props的只讀性

組件無論是使用函數(shù)聲明還是通過 class 聲明帖族，都決不能修改自身的 props栈源。

function sum(a, b) {
  return a + b;
}

這樣的函數(shù)被稱為純函數(shù)，因為該函數(shù)不會嘗試更改入參竖般，且多次調用下相同的入參始終返回相同的結果甚垦。相反，下面這個函數(shù)則不是純函數(shù)涣雕，因為它更改了自己的入參：

function withdraw(account, amount) {
  account.total -= amount; //account對應的實參與account指向同一對象艰亮，account內部數(shù)據的改變會改變實參
}

React 非常靈活，但它也有一個嚴格的規(guī)則：

所有 React 組件都必須像純函數(shù)一樣保護它們的 props 不被更改挣郭。組件無法修改自己的props屬性迄埃。

當然，應用程序的 UI 是動態(tài)的兑障，并會伴隨著時間的推移而變化侄非。React提供一種新的概念，稱之為 “state”流译。在不違反上述規(guī)則的情況下彩库，state 允許 React 組件隨用戶操作、網絡響應或者其他變化而動態(tài)更改輸出內容先蒋。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者