本篇规范针对跨平台方案Taro，在React、React-native开发中酌情调整

组件及 JSX 书写规范

基本书写

组件创建

组件以类的形式进行创建，并且单个文件中只能存在单个组件

代码缩进

使用两个空格进行缩进，不要混合使用空格与制表符作为缩进

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

单引号

JSX 属性均使用单引号

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

对齐方式

多个属性，多行书写，每个属性占用一行，标签结束另起一行

// bad
<Foo superLongParam='bar'
     anotherSuperLongParam='baz' />
// good
<Foo
  superLongParam='bar'
  anotherSuperLongParam='baz'
/>
// 如果组件的属性可以放在一行就保持在当前一行中
<Foo bar='bar' />
// 多行属性采用缩进
<Foo
  superLongParam='bar'
  anotherSuperLongParam='baz'
>
  <Quux />
</Foo>

空格使用

终始在自闭合标签前面添加一个空格

// bad
<Foo/>
// very bad
<Foo                 />
// bad
<Foo
 />
// good
<Foo />

属性书写

属性名称始终使用驼峰命名法

// bad
<Foo
  UserName='hello'
  phone_number={12345678}
/>
// good
<Foo
  userName='hello'
  phoneNumber={12345678}
/>

JSX 与括号

用括号包裹多行 JSX 标签

// bad
render () {
  return <MyComponent className='long body' foo='bar'>
           <MyChild />
         </MyComponent>
}
// good
render () {
  return (
    <MyComponent className='long body' foo='bar'>
      <MyChild />
    </MyComponent>
  )
}
// good
render () {
  const body = <div>hello</div>
  return <MyComponent>{body}</MyComponent>
}

书写顺序

在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下）

static 静态方法
constructor
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
点击回调或者事件回调比如 onClickSubmit() 或者 onChangeDescription()
render

通用约束与建议

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

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
class MyComponent extends Component {
  render () {
    return (
      <View className='test'>     // ✓ 正确
        <Text>12</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>
    )
  }
}

Taro 自身限制规范

不能使用 Array#map 之外的方法操作 JSX 数组

Taro 在小程序端实际上把 JSX 转换成了字符串模板，而一个原生 JSX 表达式实际上是一个 React/Nerv 元素(react-element)的构造器，因此在原生 JSX 中你可以随意地对一组 React 元素进行操作。但在 Taro 中你只能使用 map 方法，Taro 转换成小程序中 wx:for

以下代码会被 ESLint 提示警告，同时在 Taro（小程序端）也不会有效：

test.push(<View />)
numbers.forEach(number => {
  if (someCase) {
    a = <View />
  }
})
test.shift(<View />)
components.find(component => {
  return component === <View />
})
components.some(component => component.constructor.__proto__ === <View />.constructor)

以下代码不会被警告，也应当在 Taro 任意端中能够运行：

numbers.filter(Boolean).map((number) => {
  const element = <View />
  return <View />
})

解决方案
先处理好需要遍历的数组，然后再用处理好的数组调用 map 方法。

numbers.filter(isOdd).map((number) => <View />)
for (let index = 0; index < array.length; index++) {
  // do you thing with array
}
const element = array.map(item => {
  return <View />
})

kanducloud's norms and standards

前端规范 React篇（包含Taro）