通用约束与建议

所有内置组件均需要引入后再使用

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
class MyComponent extends Component {
  render () {
    return (
      <View className='test'>     // ✓ 正确
        <Text>12</Text>     // ✗ 错误
      </View>
    )
  }
}

推荐使用对象解构的方式来使用 state、props

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  render () {
    const { isEnable } = this.props     // ✓ 正确
    const { myTime } = this.state     // ✓ 正确
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

不要以 class/id/style 作为自定义组件的属性名

<Hello class='foo' />     // ✗ 错误
<Hello id='foo' />     // ✗ 错误
<Hello style='foo' />     // ✗ 错误

不要使用 HTML 标签

<div className='foo'></div>     // ✗ 错误
<span id='foo' /></span>    // ✗ 错误

不要在调用 this.setState 时使用 this.state

由于 this.setState 异步的缘故，这样的做法会导致一些错误，可以通过给 this.setState 传入函数来避免

this.setState({
  value: this.state.value + 1
})   // ✗ 错误
this.setState(prevState => ({ value: prevState.value + 1 }))    // ✓ 正确

map 循环时请给元素加上 key 属性

list.map(item => {
  return (
    <View className='list_item' key={item.id}>{item.name}</View>
  )
})

尽量避免在 componentDidMount 中调用 this.setState

因为在 componentDidMount 中调用 this.setState 会导致触发更新

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  componentDidMount () {
    this.setState({     // ✗ 尽量避免，可以在 componentWillMount 中处理
      name: 1
    })
  }
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

不要在 componentWillUpdate/componentDidUpdate/render 中调用 this.setState

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  componentWillUpdate () {
    this.setState({     // ✗ 错误
      name: 1
    })
  }
  componentDidUpdate () {
    this.setState({     // ✗ 错误
      name: 1
    })
  }
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state
    this.setState({     // ✗ 错误
      name: 11
    })
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

不要定义没有用到的 state

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12,
    noUsed: true   // ✗ 没有用到
  }
  render () {
    const { myTime } = this.state
    return (
      <View className='test'>
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}

组件最好定义 defaultProps

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  static defaultProps = {
    isEnable: true
  }
  state = {
    myTime: 12
  }
  render () {
    const { isEnable } = this.props
    const { myTime } = this.state
    return (
      <View className='test'>
        {isEnable && <Text className='test_text'>{myTime}</Text>}
      </View>
    )
  }
}

render 方法必须有返回值

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  render () {   // ✗ 没有返回值
    const { isEnable } = this.props
    const { myTime } = this.state
    <View className='test'>
      {isEnable && <Text className="test_text">{myTime}</Text>}
    </View>
  }
}

值为 true 的属性可以省略书写值

<Hello personal />
<Hello personal={false} />

JSX 属性或者表达式书写时需要注意空格

属性书写不带空格，如果属性是一个对象，则对象括号旁边需要带上空格

<Hello name={ firstname } />   // ✗ 错误
<Hello name={ firstname} />   // ✗ 错误
<Hello name={firstname } />   // ✗ 错误
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />      // ✓ 正确

事件绑定均以 on 开头

在 Taro 中所有默认事件如 onClick、onTouchStart 等等，均以 on 开头

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  clickHandler (e) {
    console.log(e)
  }
  render () {
    const { myTime } = this.state
    return (
      <View className='test' onClick={this.clickHandler}>    // ✓ 正确
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}

子组件传入函数时属性名需要以 on 开头

import Taro, { Component } from '@tarojs/taro'
import { View, Input } from '@tarojs/components'
import Tab from '../../components/Tab/Tab'
class MyComponent extends Component {
  state = {
    myTime: 12
  }
  clickHandler (e) {
    console.log(e)
  }
  render () {
    const { myTime } = this.state
    return (
      <View className='test'>
        <Tab onChange={this.clickHandler} />    // ✓ 正确
        <Text className='test_text'>{myTime}</Text>
      </View>
    )
  }
}