通用组件

通用组件必须定义在 components 目录中，里面建一个文件夹与组件名同名，下面 index.js 就是你编写组件的地方。

组件的样板

  1. //components/Animal/index.js
  2. import React from '@react';
  4. class Animal extends React.Component { //组件名必须大写开头，与目录名一样
  5.   constructor(props) {
  6.     super();
  7.     this.state = {
  8.       name: props.name,
  9.       age: props.age || 1
  10.     };
  11.   }
  13.   static defaultProps = {
  14.     age: 1,
  15.     name: 'animal'
  16.   };
  18.   changeAge() {
  19.     this.setState({
  20.       age: ~~(Math.random() * 10)
  21.     });
  22.   }
  24.   componentDidMount() {
  25.     console.log('Animal componentDidMount');
  26.   }
  28.   componentWillReceiveProps(props) {
  29.     this.setState({
  30.       name: props.name
  31.     });
  32.   }
  34.   render() {
  35.     return (
  36.       <div style={{ border: '1px solid #333' }}>
  37.         名字：
  38.         {this.state.name} 年龄：
  39.         {this.state.age} 岁
  40.         <button catchTap={this.changeAge.bind(this)}>换一个年龄</button>
  41.       </div>
  42.     );
  43.   }
  44. }
  46. export default Animal;

由于目录可能比较深，因此 nanachi 比较贴心地提供了两个默认的别名，@react 与 @components, @react 指向专门为小程序优化的 React, @components 指向开发目录下的 components 目录。

JSX 只能出现在 render() 方法或无状态组件的函数体中。

JSX 的所有填充数据必须带 this.props, this.state, this.context 前缀。

render() 方法里不能出现 var/const/let 语句，只能出现 if 语句与三元表达式或 JSX。

map() 方法调用的第一个参数最好使用匿名方法（因为这样会自动 bind this），否则它会自动添加上第二个参数 this

  1. <div class="group">
  2.   {this.state.iconSize.map(function(item) {
  3.     return <icon type="success" size={item} />;
  4.   })}
  5. </div>

会变成

  1. <div class="group">
  2.   {this.state.iconSize.map(function(item) {
  3.     return <icon type="success" size={item} />;
  4.   }, this)}
  5. </div>

JSX 禁止出现 instanceUid, classUid, eventUid, 这些是内部绑定事件时在编译阶段自动添加的。

render方法的第一个语句只能元素节点，不能是三元表达式或if语句等表示逻辑性的东西错误的写法

  1. class Dog extends React.Component{
  2.   //....略
  3.   render(){
  4.     return this.props.xxx ? <div>分支1</div>: <div>分支2</div>
  5.   }
  6. }

正确的写法

  1. class Dog extends React.Component{
  2.   //....略
  3.   render(){
  4.     return <div>{this.props.xxx ? <div>分支1</div>: <div>分支2</div>}</div>
  5.   }
  6. }

原因是三元表达式会变成block标签，而快应用与自定义组件方式不支持顶层元素为template/block