title: Taro 规范

项目组织

文件组织形式

以下文件组织规范为最佳实践的建议

所有项目源代码请放在项目根目录 src 目录下，项目所需最基本的文件包括 入口文件 以及 页面文件

  • 入口文件为 app.js
  • 页面文件建议放置在 src/pages 目录下

一个可靠的 Taro 项目可以按照如下方式进行组织

  1. ├── config                 配置目录
  2. |   ├── dev.js             开发时配置
  3. |   ├── index.js           默认配置
  4. |   └── prod.js            打包时配置
  5. ├── src                    源码目录
  6. |   ├── components         公共组件目录
  7. |   ├── pages              页面文件目录
  8. |   |   ├── index          index 页面目录
  9. |   |   |   ├── banner     页面 index 私有组件
  10. |   |   |   ├── index.js   index 页面逻辑
  11. |   |   |   └── index.css  index 页面样式
  12. |   ├── utils              公共方法库
  13. |   ├── app.css            项目总通用样式
  14. |   └── app.js             项目入口文件
  15. └── package.json

文件命名

Taro 中普通 JS/TS 文件以小写字母命名，多个单词以下划线连接，例如 util.js、util_helper.js

Taro 组件文件命名遵循 Pascal 命名法，例如 ReservationCard.jsx

文件后缀

Taro 中普通 JS/TS 文件以 .js 或者 .ts 作为文件后缀

Taro 组件则以 .jsx 或者 .tsx 作为文件后缀，当然这不是强制约束，只是作为一个实践的建议，组件文件依然可以以 .js 或者 .ts 作为文件后缀

JavaScript 书写规范

在 Taro 中书写 JavaScript 请遵循以下规则

基本书写

使用两个空格进行缩进

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

  1. function hello (name) {
  2.   console.log('hi', name)   // ✓ 正确
  3.     console.log('hello', name)   // ✗ 错误
  4. }

除了缩进，不要使用多个空格

  1. const id =    1234    // ✗ 错误
  2. const id = 1234       // ✓ 正确

不要在句末使用分号

  1. const a = 'a'   // ✓ 正确
  2. const a = 'a';  // ✗ 错误

字符串统一使用单引号

  1. console.log('hello there')
  2. // 如果遇到需要转义的情况，请按如下三种写法书写
  3. const x = 'hello "world"'
  4. const y = 'hello \'world\''
  5. const z = `hello 'world'`

代码块中避免多余留白

  1. if (user) {
  2.                             // ✗ 错误
  3.   const name = getName()
  5. }
  7. if (user) {
  8.   const name = getName()    // ✓ 正确
  9. }

关键字后面加空格

  1. if (condition) { ... }   // ✓ 正确
  2. if(condition) { ... }    // ✗ 错误

函数声明时括号与函数名间加空格

  1. function name (arg) { ... }   // ✓ 正确
  2. function name(arg) { ... }    // ✗ 错误
  4. run(function () { ... })      // ✓ 正确
  5. run(function() { ... })       // ✗ 错误

展开运算符与它的表达式间不要留空白

  1. fn(... args)    // ✗ 错误
  2. fn(...args)     // ✓ 正确

遇到分号时空格要后留前不留

  1. for (let i = 0 ;i < items.length ;i++) {...}    // ✗ 错误
  2. for (let i = 0; i < items.length; i++) {...}    // ✓ 正确

代码块首尾留空格

  1. if (admin){...}     // ✗ 错误
  2. if (admin) {...}    // ✓ 正确

圆括号间不留空格

  1. getName( name )     // ✗ 错误
  2. getName(name)       // ✓ 正确

属性前面不要加空格

  1. user .name      // ✗ 错误
  2. user.name       // ✓ 正确

一元运算符前面跟一个空格

  1. typeof!admin        // ✗ 错误
  2. typeof !admin        // ✓ 正确

注释首尾留空格

  1. //comment           // ✗ 错误
  2. // comment          // ✓ 正确
  4. /*comment*/         // ✗ 错误
  5. /* comment */       // ✓ 正确

模板字符串中变量前后不加空格

  1. const message = `Hello, ${ name }`    // ✗ 错误
  2. const message = `Hello, ${name}`      // ✓ 正确

逗号后面加空格

  1. // ✓ 正确
  2. const list = [1, 2, 3, 4]
  3. function greet (name, options) { ... }
  1. // ✗ 错误
  2. const list = [1,2,3,4]
  3. function greet (name,options) { ... }

不允许有连续多行空行

  1. // ✓ 正确
  2. const value = 'hello world'
  3. console.log(value)
  1. // ✗ 错误
  2. const value = 'hello world'
  6. console.log(value)

单行代码块两边加空格

  1. function foo () {return true}    // ✗ 错误
  2. function foo () { return true }  // ✓ 正确
  3. if (condition) { return true }  // ✓ 正确

不要使用非法的空白符

  1. function myFunc () /*<NBSP>*/{}   // ✗ 错误

始终将逗号置于行末

  1. const obj = {
  2.   foo: 'foo'
  3.   ,bar: 'bar'   // ✗ 错误
  4. }
  6. const obj = {
  7.   foo: 'foo',
  8.   bar: 'bar'   // ✓ 正确
  9. }

点号操作符须与属性需在同一行

  1. console.log('hello')  // ✓ 正确
  3. console.
  4.   log('hello')  // ✗ 错误
  6. console
  7.   .log('hello') // ✓ 正确

文件末尾留一空行

函数调用时标识符与括号间不留间隔

  1. console.log ('hello') // ✗ 错误
  2. console.log('hello')  // ✓ 正确

键值对当中冒号与值之间要留空白

  1. const obj = { 'key' : 'value' }    // ✗ 错误
  2. const obj = { 'key' :'value' }     // ✗ 错误
  3. const obj = { 'key':'value' }      // ✗ 错误
  4. const obj = { 'key': 'value' }     // ✓ 正确

变量定义

使用 const/let 定义变量

当前作用域不需要改变的变量使用 const，反之则使用 let

  1. const a = 'a'
  2. a = 'b'   // ✗ 错误，请使用 let 定义
  4. let test = 'test'
  6. var noVar = 'hello, world'   // ✗ 错误，请使用 const/let 定义变量

每个 const/let 关键字单独声明一个变量

  1. // ✓ 正确
  2. const silent = true
  3. let verbose = true
  5. // ✗ 错误
  6. const silent = true, verbose = true
  8. // ✗ 错误
  9. let silent = true,
  10.     verbose = true

不要重复声明变量

  1. let name = 'John'
  2. let name = 'Jane'     // ✗ 错误
  4. let name = 'John'
  5. name = 'Jane'         // ✓ 正确

不要使用 undefined 来初始化变量

  1. let name = undefined    // ✗ 错误
  3. let name
  4. name = 'value'          // ✓ 正确

对于变量和函数名统一使用驼峰命名法

  1. function my_function () { }    // ✗ 错误
  2. function myFunction () { }     // ✓ 正确
  4. const my_var = 'hello'           // ✗ 错误
  5. const myVar = 'hello'            // ✓ 正确

不要定义未使用的变量

  1. function myFunction () {
  2.   const result = something()   // ✗ 错误
  3. }

避免将变量赋值给自己

  1. name = name   // ✗ 错误

基本类型

不要省去小数点前面的 0

  1. const discount = .5      // ✗ 错误
  2. const discount = 0.5     // ✓ 正确

字符串拼接操作符 (Infix operators) 之间要留空格

  1. // ✓ 正确
  2. const x = 2
  3. const message = 'hello, ' + name + '!'
  1. // ✗ 错误
  2. const x=2
  3. const message = 'hello, '+name+'!'

不要使用多行字符串

  1. const message = 'Hello \
  2.                  world'     // ✗ 错误

检查 NaN 的正确姿势是使用 isNaN()

  1. if (price === NaN) { }      // ✗ 错误
  2. if (isNaN(price)) { }       // ✓ 正确

用合法的字符串跟 typeof 进行比较操作

  1. typeof name === undefined       // ✗ 错误
  2. typeof name === 'undefined'     // ✓ 正确

对象与数组

对象中定义了存值器，一定要对应的定义取值器

  1. const person = {
  2.   set name (value) {    // ✗ 错误
  3.     this._name = value
  4.   }
  5. }
  7. const person = {
  8.   set name (value) {
  9.     this._name = value
  10.   },
  11.   get name () {         // ✓ 正确
  12.     return this._name
  13.   }
  14. }

使用数组字面量而不是构造器

  1. const nums = new Array(1, 2, 3)   // ✗ 错误
  2. const nums = [1, 2, 3]            // ✓ 正确

不要解构空值

  1. const { a: {} } = foo         // ✗ 错误
  2. const { a: { b } } = foo      // ✓ 正确

对象字面量中不要定义重复的属性

  1. const user = {
  2.   name: 'Jane Doe',
  3.   name: 'John Doe'    // ✗ 错误
  4. }

不要扩展原生对象

  1. Object.prototype.age = 21     // ✗ 错误

外部变量不要与对象属性重名

  1. let score = 100
  2. function game () {
  3.   score: while (true) {      // ✗ 错误
  4.     score -= 10
  5.     if (score > 0) continue score
  6.     break
  7.   }
  8. }

对象属性换行时注意统一代码风格

  1. const user = {
  2.   name: 'Jane Doe', age: 30,
  3.   username: 'jdoe86'            // ✗ 错误
  4. }
  6. const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ 正确
  8. const user = {
  9.   name: 'Jane Doe',
  10.   age: 30,
  11.   username: 'jdoe86'
  12. }

避免使用不必要的计算值作对象属性

  1. const user = { ['name']: 'John Doe' }   // ✗ 错误
  2. const user = { name: 'John Doe' }       // ✓ 正确

函数

避免使用 arguments.callee 和 arguments.caller

  1. function foo (n) {
  2.   if (n <= 0) return
  4.   arguments.callee(n - 1)   // ✗ 错误
  5. }
  7. function foo (n) {
  8.   if (n <= 0) return
  10.   foo(n - 1)
  11. }

不要定义冗余的函数参数

  1. function sum (a, b, a) {  // ✗ 错误
  2.   // ...
  3. }
  5. function sum (a, b, c) {  // ✓ 正确
  6.   // ...
  7. }

避免多余的函数上下文绑定

  1. const name = function () {
  2.   getName()
  3. }.bind(user)    // ✗ 错误
  5. const name = function () {
  6.   this.getName()
  7. }.bind(user)    // ✓ 正确

不要使用 eval()

  1. eval( "var result = user." + propName ) // ✗ 错误
  2. const result = user[propName]             // ✓ 正确

不要使用多余的括号包裹函数

  1. const myFunc = (function () { })   // ✗ 错误
  2. const myFunc = function () { }     // ✓ 正确

避免对声明过的函数重新赋值

  1. function myFunc () { }
  2. myFunc = myOtherFunc    // ✗ 错误

注意隐式的 eval()

  1. setTimeout("alert('Hello world')")                   // ✗ 错误
  2. setTimeout(function () { alert('Hello world') })     // ✓ 正确

嵌套的代码块中禁止再定义函数

  1. if (authenticated) {
  2.   function setAuthUser () {}    // ✗ 错误
  3. }

禁止使用 Function 构造器

  1. const sum = new Function('a', 'b', 'return a + b')    // ✗ 错误

禁止使用 Object 构造器

  1. let config = new Object()   // ✗ 错误

自调用匿名函数 (IIFEs) 使用括号包裹

  1. const getName = function () { }()     // ✗ 错误
  3. const getName = (function () { }())   // ✓ 正确
  4. const getName = (function () { })()   // ✓ 正确

不使用 Generator 函数语法

使用 Promise 或者 async functions 来实现异步编程

  1. function* helloWorldGenerator() {     // ✗ 错误
  2.   yield 'hello';
  3.   yield 'world';
  4.   return 'ending';
  5. }

正则

正则中不要使用控制符

  1. const pattern = /\x1f/    // ✗ 错误
  2. const pattern = /\x20/    // ✓ 正确

正则中避免使用多个空格

  1. const regexp = /test   value/   // ✗ 错误
  3. const regexp = /test {3}value/  // ✓ 正确
  4. const regexp = /test value/     // ✓ 正确

类定义

类名要以大写字母开头

  1. class animal {}
  2. const dog = new animal()    // ✗ 错误
  4. class Animal {}
  5. const dog = new Animal()    // ✓ 正确

避免对类名重新赋值

  1. class Dog {}
  2. Dog = 'Fido'    // ✗ 错误

子类的构造器中一定要调用 super

  1. class Dog {
  2.   constructor () {
  3.     super()   // ✗ 错误
  4.   }
  5. }
  7. class Dog extends Mammal {
  8.   constructor () {
  9.     super()   // ✓ 正确
  10.   }
  11. }

使用 this 前请确保 super() 已调用

  1. class Dog extends Animal {
  2.   constructor () {
  3.     this.legs = 4     // ✗ 错误
  4.     super()
  5.   }
  6. }

禁止多余的构造器

  1. class Car {
  2.   constructor () {      // ✗ 错误
  3.   }
  4. }
  6. class Car {
  7.   constructor () {      // ✗ 错误
  8.     super()
  9.   }
  10. }

类中不要定义冗余的属性

  1. class Dog {
  2.   bark () {}
  3.   bark () {}    // ✗ 错误
  4. }

无参的构造函数调用时要带上括号

  1. function Animal () {}
  2. const dog = new Animal    // ✗ 错误
  3. const dog = new Animal()  // ✓ 正确

new 创建对象实例后需要赋值给变量

  1. new Character()                     // ✗ 错误
  2. const character = new Character()   // ✓ 正确

模块

同一模块有多个导入时一次性写完

  1. import { myFunc1 } from 'module'
  2. import { myFunc2 } from 'module'          // ✗ 错误
  4. import { myFunc1, myFunc2 } from 'module' // ✓ 正确

import, export 和解构操作中，禁止赋值到同名变量

  1. import { config as config } from './config'     // ✗ 错误
  2. import { config } from './config'               // ✓ 正确

语句

避免在 return 语句中出现赋值语句

  1. function sum (a, b) {
  2.   return result = a + b     // ✗ 错误
  3. }

禁止使用 with

  1. with (val) {...}    // ✗ 错误

不要使用标签语句

  1. label:
  2.   while (true) {
  3.     break label     // ✗ 错误
  4.   }

不要随意更改关键字的值

  1. let undefined = 'value'     // ✗ 错误

return，throw，continue 和 break 后不要再跟代码

  1. function doSomething () {
  2.   return true
  3.   console.log('never called')     // ✗ 错误
  4. }

逻辑与循环

始终使用 === 替代 ==

例外： obj == null 可以用来检查 null || undefined

  1. if (name === 'John')   // ✓ 正确
  2. if (name == 'John')    // ✗ 错误
  1. if (name !== 'John')   // ✓ 正确
  2. if (name != 'John')    // ✗ 错误

避免将变量与自己进行比较操作

  1. if (score === score) {}   // ✗ 错误

if/else 关键字要与花括号保持在同一行

  1. // ✓ 正确
  2. if (condition) {
  3.   // ...
  4. } else {
  5.   // ...
  6. }
  1. // ✗ 错误
  2. if (condition)
  3. {
  4.   // ...
  5. }
  6. else
  7. {
  8.   // ...
  9. }

多行 if 语句的的括号不能省略

  1. // ✓ 正确
  2. if (options.quiet !== true) console.log('done')
  1. // ✓ 正确
  2. if (options.quiet !== true) {
  3.   console.log('done')
  4. }
  1. // ✗ 错误
  2. if (options.quiet !== true)
  3.   console.log('done')

对于三元运算符 ? 和 : 与他们所负责的代码处于同一行

  1. // ✓ 正确
  2. const location = env.development ? 'localhost' : 'www.api.com'
  4. // ✓ 正确
  5. const location = env.development
  6.   ? 'localhost'
  7.   : 'www.api.com'
  9. // ✗ 错误
  10. const location = env.development ?
  11.   'localhost' :
  12.   'www.api.com'

请书写优雅的条件语句（avoid Yoda conditions）

  1. if (42 === age) { }    // ✗ 错误
  2. if (age === 42) { }    // ✓ 正确

避免使用常量作为条件表达式的条件（循环语句除外）

  1. if (false) {    // ✗ 错误
  2.   // ...
  3. }
  5. if (x === 0) {  // ✓ 正确
  6.   // ...
  7. }
  9. while (true) {  // ✓ 正确
  10.   // ...
  11. }

循环语句中注意更新循环变量

  1. for (let i = 0; i < items.length; j++) {...}    // ✗ 错误
  2. for (let i = 0; i < items.length; i++) {...}    // ✓ 正确

如果有更好的实现，尽量不要使用三元表达式

  1. let score = val ? val : 0     // ✗ 错误
  2. let score = val || 0          // ✓ 正确

switch 语句中不要定义重复的 case 分支

  1. switch (id) {
  2.   case 1:
  3.     // ...
  4.   case 1:     // ✗ 错误
  5. }

switch 一定要使用 break 来将条件分支正常中断

  1. switch (filter) {
  2.   case 1:
  3.     doSomething()    // ✗ 错误
  4.   case 2:
  5.     doSomethingElse()
  6. }
  8. switch (filter) {
  9.   case 1:
  10.     doSomething()
  11.     break           // ✓ 正确
  12.   case 2:
  13.     doSomethingElse()
  14. }
  16. switch (filter) {
  17.   case 1:
  18.     doSomething()
  19.     // fallthrough  // ✓ 正确
  20.   case 2:
  21.     doSomethingElse()
  22. }

避免不必要的布尔转换

  1. const result = true
  2. if (!!result) {   // ✗ 错误
  3.   // ...
  4. }
  6. const result = true
  7. if (result) {     // ✓ 正确
  8.   // ...
  9. }

避免使用逗号操作符

  1. if (doSomething(), !!test) {}   // ✗ 错误

错误处理

不要丢掉异常处理中 err 参数

  1. // ✓ 正确
  2. run(function (err) {
  3.   if (err) throw err
  4.   window.alert('done')
  5. })
  1. // ✗ 错误
  2. run(function (err) {
  3.   window.alert('done')
  4. })

catch 中不要对错误重新赋值

  1. try {
  2.   // ...
  3. } catch (e) {
  4.   e = 'new value'             // ✗ 错误
  5. }
  7. try {
  8.   // ...
  9. } catch (e) {
  10.   const newVal = 'new value'  // ✓ 正确
  11. }

用 throw 抛错时，抛出 Error 对象而不是字符串

  1. throw 'error'               // ✗ 错误
  2. throw new Error('error')    // ✓ 正确

finally 代码块中不要再改变程序执行流程

  1. try {
  2.   // ...
  3. } catch (e) {
  4.   // ...
  5. } finally {
  6.   return 42     // ✗ 错误
  7. }

使用 Promise 一定要捕捉错误

  1. asyncTask('google.com').catch(err => console.log(err))   // ✓ 正确

组件及 JSX 书写规范

基本书写

组件创建

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

代码缩进

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   render () {
  6.     return (
  7.       <View className='test'>     // ✓ 正确
  8.         <Text>12</Text>     // ✗ 错误
  9.       </View>
  10.     )
  11.   }
  12. }

单引号

JSX 属性均使用单引号

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   render () {
  6.     return (
  7.       <View className='test'>     // ✓ 正确
  8.         <Text className="test_text">12</Text>     // ✗ 错误
  9.       </View>
  10.     )
  11.   }
  12. }

对齐方式

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

  1. // bad
  2. <Foo superLongParam='bar'
  3.      anotherSuperLongParam='baz' />
  5. // good
  6. <Foo
  7.   superLongParam='bar'
  8.   anotherSuperLongParam='baz'
  9. />
  11. // 如果组件的属性可以放在一行就保持在当前一行中
  12. <Foo bar='bar' />
  14. // 多行属性采用缩进
  15. <Foo
  16.   superLongParam='bar'
  17.   anotherSuperLongParam='baz'
  18. >
  19.   <Quux />
  20. </Foo>

空格使用

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

  1. // bad
  2. <Foo/>
  4. // very bad
  5. <Foo                 />
  7. // bad
  8. <Foo
  9.  />
  11. // good
  12. <Foo />

属性书写

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

  1. // bad
  2. <Foo
  3.   UserName='hello'
  4.   phone_number={12345678}
  5. />
  7. // good
  8. <Foo
  9.   userName='hello'
  10.   phoneNumber={12345678}
  11. />

JSX 与括号

用括号包裹多行 JSX 标签

  2. // bad
  3. render () {
  4.   return <MyComponent className='long body' foo='bar'>
  5.            <MyChild />
  6.          </MyComponent>
  7. }
  9. // good
  10. render () {
  11.   return (
  12.     <MyComponent className='long body' foo='bar'>
  13.       <MyChild />
  14.     </MyComponent>
  15.   )
  16. }
  18. // good
  19. render () {
  20.   const body = <div>hello</div>
  21.   return <MyComponent>{body}</MyComponent>
  22. }

标签

当标签没有子元素时，始终使用自闭合标签

  1. // bad
  2. <Foo className='stuff'></Foo>
  4. // good
  5. <Foo className='stuff' />

如果控件有多行属性，关闭标签要另起一行

  1. // bad
  2. <Foo
  3.   bar='bar'
  4.   baz='baz' />
  6. // good
  7. <Foo
  8.   bar='bar'
  9.   baz='baz'
  10. />

书写顺序

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

  1. static 静态方法
  2. constructor
  3. componentWillMount
  4. componentDidMount
  5. componentWillReceiveProps
  6. shouldComponentUpdate
  7. componentWillUpdate
  8. componentDidUpdate
  9. componentWillUnmount
  10. 点击回调或者事件回调 比如 onClickSubmit() 或者 onChangeDescription()
  11. render

通用约束与建议

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   render () {
  6.     return (
  7.       <View className='test'>     // ✓ 正确
  8.         <Text>12</Text>     // ✗ 错误
  9.       </View>
  10.     )
  11.   }
  12. }

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12
  7.   }
  8.   render () {
  9.     const { isEnable } = this.props     // ✓ 正确
  10.     const { myTime } = this.state     // ✓ 正确
  11.     return (
  12.       <View className='test'>
  13.         {isEnable && <Text className='test_text'>{myTime}</Text>}
  14.       </View>
  15.     )
  16.   }
  17. }

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

  1. <Hello class='foo' />     // ✗ 错误
  2. <Hello id='foo' />     // ✗ 错误
  3. <Hello style='foo' />     // ✗ 错误

不要使用 HTML 标签

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

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

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

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

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

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

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

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12
  7.   }
  9.   componentDidMount () {
  10.     this.setState({     // ✗ 尽量避免，可以在 componentWillMount 中处理
  11.       name: 1
  12.     })
  13.   }
  15.   render () {
  16.     const { isEnable } = this.props
  17.     const { myTime } = this.state
  18.     return (
  19.       <View className='test'>
  20.         {isEnable && <Text className='test_text'>{myTime}</Text>}
  21.       </View>
  22.     )
  23.   }
  24. }

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12
  7.   }
  9.   componentWillUpdate () {
  10.     this.setState({     // ✗ 错误
  11.       name: 1
  12.     })
  13.   }
  15.   componentDidUpdate () {
  16.     this.setState({     // ✗ 错误
  17.       name: 1
  18.     })
  19.   }
  21.   render () {
  22.     const { isEnable } = this.props
  23.     const { myTime } = this.state
  24.     this.setState({     // ✗ 错误
  25.       name: 11
  26.     })
  27.     return (
  28.       <View className='test'>
  29.         {isEnable && <Text className='test_text'>{myTime}</Text>}
  30.       </View>
  31.     )
  32.   }
  33. }

不要定义没有用到的 state

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12,
  7.     noUsed: true   // ✗ 没有用到
  8.   }
  10.   render () {
  11.     const { myTime } = this.state
  12.     return (
  13.       <View className='test'>
  14.         <Text className='test_text'>{myTime}</Text>
  15.       </View>
  16.     )
  17.   }
  18. }

组件最好定义 defaultProps

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  6.   static defaultProps = {
  7.     isEnable: true
  8.   }
  10.   state = {
  11.     myTime: 12
  12.   }
  14.   render () {
  15.     const { isEnable } = this.props
  16.     const { myTime } = this.state
  18.     return (
  19.       <View className='test'>
  20.         {isEnable && <Text className='test_text'>{myTime}</Text>}
  21.       </View>
  22.     )
  23.   }
  24. }

render 方法必须有返回值

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12
  7.   }
  9.   render () {   // ✗ 没有返回值
  10.     const { isEnable } = this.props
  11.     const { myTime } = this.state
  13.     <View className='test'>
  14.       {isEnable && <Text className="test_text">{myTime}</Text>}
  15.     </View>
  16.   }
  17. }

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

  1. <Hello personal />
  2. <Hello personal={false} />

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

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

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

事件绑定均以 on 开头

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. class MyComponent extends Component {
  5.   state = {
  6.     myTime: 12
  7.   }
  9.   clickHandler (e) {
  10.     console.log(e)
  11.   }
  13.   render () {
  14.     const { myTime } = this.state
  16.     return (
  17.       <View className='test' onClick={this.clickHandler}>    // ✓ 正确
  18.         <Text className='test_text'>{myTime}</Text>
  19.       </View>
  20.     )
  21.   }
  22. }

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

  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Input } from '@tarojs/components'
  4. import Tab from '../../components/Tab/Tab'
  6. class MyComponent extends Component {
  7.   state = {
  8.     myTime: 12
  9.   }
  11.   clickHandler (e) {
  12.     console.log(e)
  13.   }
  15.   render () {
  16.     const { myTime } = this.state
  18.     return (
  19.       <View className='test'>
  20.         <Tab onChange={this.clickHandler} />    // ✓ 正确
  21.         <Text className='test_text'>{myTime}</Text>
  22.       </View>
  23.     )
  24.   }
  25. }

Taro 自身限制规范

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

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

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

  1. test.push(<View />)
  3. numbers.forEach(number => {
  4.   if (someCase) {
  5.     a = <View />
  6.   }
  7. })
  9. test.shift(<View />)
  11. components.find(component => {
  12.   return component === <View />
  13. })
  15. components.some(component => component.constructor.__proto__ === <View />.constructor)

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

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

解决方案

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

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