組件化 & Props

組件可以將 UI 切分成一些的獨(dú)立的、可復(fù)用的部件，這樣你就只需專注于構(gòu)建每一個(gè)單獨(dú)的部件。

組件從概念上看就像是函數(shù)，它可以接收任意的輸入值（稱之為 props），并返回一個(gè)需要在頁面上展示的 Taro 元素。

你也可以使用 ES6 Class 來定義一個(gè)組件:

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

組件渲染

在前面，我們遇到的 Taro 元素都是內(nèi)置組件：

const element = <View />

然而，Taro 元素也可以是用戶自定義的組件：

const element = <Welcome name="Wallace" />

當(dāng) React 遇到的元素是用戶自定義的組件，它會(huì)將 JSX 屬性作為單個(gè)對(duì)象傳遞給該組件，這個(gè)對(duì)象稱之為 props。

例如,這段代碼會(huì)在頁面上渲染出 Hello, Wallace:

// welcome.js
class Welcome extends Component {
  render () {
    return <View><Text>Hello, {this.props.name}</Text></View>
  }
}

// app.js
class App extends Component {
  render () {
    return <Welcome name="Wallace" />
  }
}

Props 的只讀性

一個(gè)聲明的組件決不能修改它自己的 props。來看這個(gè) sum 函數(shù)：

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

類似于上面的這種函數(shù)稱為「純函數(shù)」，它沒有改變它自己的輸入值，當(dāng)傳入的值相同時(shí)，總是會(huì)返回相同的結(jié)果。

與之相對(duì)的是非純函數(shù)，它會(huì)改變它自身的輸入值：

function withdraw (account, amount) {
  account.total -= amount
}

Taro 和 React 一樣，也有一個(gè)嚴(yán)格的規(guī)則：

所有的 Taro 組件必須像純函數(shù)那樣使用它們的 props。

當(dāng)然，應(yīng)用的界面是隨時(shí)間動(dòng)態(tài)變化的，我們將在下一節(jié)介紹一種稱為 state 的新概念，State 可以在不違反上述規(guī)則的情況下，根據(jù)用戶操作、網(wǎng)絡(luò)響應(yīng)、或者其他狀態(tài)變化，使組件動(dòng)態(tài)的響應(yīng)并改變組件的輸出。

使用 PropTypes 檢查類型

隨著應(yīng)用日漸龐大，你可以通過類型檢查捕獲大量錯(cuò)誤。要檢查組件的屬性，你需要配置特殊的 propTypes 屬性：

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string
};

如上例，Taro 與 React 一樣，也支持 PropTypes 檢查類型，目前在小程序端還有些問題，但在 H5 端可以使用，用法和在 React 里一樣.