Taro Tips

DO NOT DO IT

— Do not use class / id / style as component property name

— Do not use HTML tag in Taro

— Do not use this.state in this.setState

— Avoid call this.setState in componentDidMount

— Do not call this.setState in componentWillUpdate/componentDidUpdate/render

— Do not define the unused state

— Do not use anonymous function in JSX

<View onClick={this.handleClick} />
<View onClick={this.handleClick.bind(this)} />
<View onClick={this.props.handleClick} />
<View onClick={this.props.handleClick.bind(this)} />

Below Code can not work

<View onClick={() => this.handleClick()} />

<View onClick={(e) => this.handleClick(e)} />

<View onClick={() => ({})} />

<View onClick={function () {}} />

<View onClick={function (e) {this.handleClick(e)}} />

<Custom child={<View />} />

<Custom child={() => <View />} />

<Custom child={function () { <View /> }} />

<Custom child={ary.map(a => <View />)} />

— Do not use object spread operator in JSX

— Do not use non functional component

DO IT in Taro

— Assign key when you use map loop

— It is better to define defaultProps

class ComponentName extends Component{
  static defaultProps = {
    propName: propValue,
  }
}

— Must return in render()

— PLEASE use on as prefix for component event property

<View className='container' onClick={this.handleClick} />

— It is better to use map to operate Array