Taro: 这种简单的语法可以加入支持吗？

Created on 12 Oct 2018 · 11Comments · Source: NervJS/taro

问题描述
这种简单的语法可以加入支持吗？

复现步骤

class ActivitiesPage extends BaseComponent {
  list = [1,2,3]

  render() {
     // 场景1.这种语法是无效果的，页面上没数据
     return(
        <View>{this.list.length}</View>
     )

      // 场景2.这种语法会报错，list is not defined。
     const { list } = this
     return(
        <View>{list.length}</View>
     )

      // 场景3.这种语法可行，因为在 _createData 里，这个属性会被解构出来，跟 state 合并到 data 上
     const { length } = this.list 
     return(
        <View>{length}</View>
     )
  }
}

期望行为
场景 1，2 可以通过

系统信息

操作系统: [e.g. macOS 10.13.6]
Taro 版本 [e.g. v.1.0.3]
Node.js 版本 [e.g. v10.0.0]

Source

jamieYou

Most helpful comment

那就都实现吧

yuche on 12 Oct 2018

👍2

All 11 comments

想了一下还是决定不支持把 this 作用域的变量挂载到 _createData，如果我们支持这么做的话，实际上就有 this.state 和 this.props 和 this. 三种情况，他们的下面变量的名字还不能相同。

从可维护的角度讲，使用 this.list 这样的数据源直接来渲染也不好，因为他和 state/props 不同，很难追踪到哪个地方更改了 this.list。这样就会导致当组件变得复杂时，就要经常要使用 forceUpdate 才能更新视图。

我个人更建议你使用一个外部的常量（对于展示型无状态组件）来表示你的 list 或者直接放到 state 去（对于复杂型组件），在小程序中不管你放到哪，最终都要变成 data，因此像本例这么做是没有任何优化效果的。

yuche on 12 Oct 2018

@yuche 主要现在我在项目中做 mobx 的支持(不改 taro 源码的情况下)，尝试了一下，可以使用，但是有限制。因为 mobx 的 store 是挂载到 this 上，然后发现只能通过场景3的方式使用，场景1，2没效果。

jamieYou on 12 Oct 2018

那你可以搞一个 mobx，我单独给你开后门编译或者支持这样的写法

yuche on 12 Oct 2018

👍1

那你可以搞一个 mobx，我单独给你开后门编译或者支持这样的写法

不是很懂，是说单独提供一个测试版本吗

jamieYou on 12 Oct 2018

不是，例如说你需要 this.store 能用，那 this.store 在你的前两种情况都能用。如果只有 this.xx 所有都能访问，那就做成都能访问。关键是 mobx 能用。

yuche on 12 Oct 2018

不是，例如说你需要 this.store 能用，那 this.store 在你的前两种情况都能用。如果只有 this.xx 所有都能访问，那就做成都能访问。关键是 mobx 能用。

我这边项目的习惯是 this.aStore、this.bStore 这样多个 store 用的，如果实现困难，this.store .aStore、this.store.bStore 也可以的。

其实我也尝试过同时把 store 也放到 state，this.state.aStore = this.aStore, 但是 mobx 的数组是一个伪数组，没有被传输到页面上。感觉其实 this.state.aStore 和 this.store.aStore 用起来不会有太大区别。

jamieYou on 12 Oct 2018

那就都实现吧

yuche on 12 Oct 2018

👍2

你的写法在

https://github.com/NervJS/taro/blob/8f012ba9a64a3ed6f67c7604068aaa53f09bce82/packages/taro-transformer-wx/__tests__/state.spec.ts#L153-L226

测试用例中通过了。

不过还是有以下限制：

从 this 直接取下来使用的变量不得与 props/state 中的变量重名；
使用 const { list } = this 这样直接解构的变量不能加入 state 和 props（换言之 state 和 props 如果需要从 this 中取出来需要单独起一行解构语句），详情看之前的测试用例。