组件化 & Props

组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的 Taro 元素。

你也可以使用 ES6 class 来定义一个组件:

  1. class Welcome extends Component {
  2.     render() {
  3.         return <View>Hello, {this.props.name}</View>;
  4.     }
  5. }

组件渲染

在前面，我们遇到的 Taro 元素都是内置组件：

  1. const element = <View />;

然而，Taro 元素也可以是用户自定义的组件：

  1. const element = <Welcome name="Wallace" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

例如,这段代码会在页面上渲染出”Hello, Wallace”:

  1. // welcome.js
  2. class Welcome extends Component {
  3.     render() {
  4.         return <View>Hello, {this.props.name}</View>;
  5.     }
  6. }
  8. // app.js
  9. class App extends Component {
  10.     render() {
  11.         return <Welcome name="Wallace" />
  12.     }
  13. }

Props的只读性

一个声明的组件决不能修改它自己的 props。来看这个sum函数：

  1. function sum(a, b) {
  2.   return a + b;
  3. }

类似于上面的这种函数称为「纯函数」，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

与之相对的是非纯函数，它会改变它自身的输入值：

  1. function withdraw(account, amount) {
  2.   account.total -= amount;
  3. }

Taro 和 React 一样，也有一个严格的规则：

所有的 Taro 组件必须像纯函数那样使用它们的props。

当然，应用的界面是随时间动态变化的，我们将在下一节介绍一种称为state的新概念，State可以在不违反上述规则的情况下，根据用户操作、网络响应、或者其他状态变化，使组件动态的响应并改变组件的输出。