taro 最佳实践

对 JSX 支持程度补充说明:

  1. 不能在包含 JSX 元素的 map 循环中使用 if 表达式
  2. 不能使用 Array#map 之外的方法操作 JSX 数组
  3. 不能在 JSX 参数中使用匿名函数
  4. 暂不支持在 render() 之外的方法定义 JSX
  5. 不允许在 JSX 参数(props)中传入 JSX 元素
  6. 不能在 JSX 参数中使用对象展开符
  7. 不支持无状态组件

最佳编码方式

  • 组件样式说明
    微信小程序的自定义组件样式默认是不能受外部样式影响的,例如在页面中引用了一个自定义组件,在页面样式中直接写自定义组件元素的样式是无法生效的。这一点,在 Taro 中也是一样,而这也是与大家认知的传统 web 开发不太一样。
  • 给组件设置 defaultProps
    在微信小程序端的自定义组件中,只有在 properties 中指定的属性,才能从父组件传入并接收。
    而在 Taro 中,对于在组件代码中使用到的来自 props 的属性,会在编译时被识别并加入到编译后的 properties 中。
    能会有某一属性没有使用而是直接传递给子组件的情况,这种情况是编译时无论如何也处理不到的,这时候就需要大家在编码时给组件设置 defaultProps 来解决了。
    组件设置的 defaultProps 会在运行时用来弥补编译时处理不到的情况,里面所有的属性都会被设置到 properties 中初始化组件,正确设置 defaultProps 可以避免很多异常的情况的出现。
  • 组件传递函数属性名以 on 开头
    这是因为,微信小程序端组件化是不能直接传递函数类型给子组件的,在 Taro 中是借助组件的事件机制来实现这一特性,而小程序中传入事件的时候属性名写法为 bindmyevent 或者 bind:myevent
<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

所以 Taro 中约定组件传递函数属性名以 on 开头,同时这也和内置组件的事件绑定写法保持一致了。

  • 小程序端不要在组件中打印传入的函数
    前面已经提到小程序端的组件传入函数的原理,所以在小程序端不要在组件中打印传入的函数,因为拿不到结果,但是 this.props.onXxx && this.props.onXxx() 这种判断函数是否传入来进行调用的写法是完全支持的。
  • 小程序端不要将在模板中用到的数据设置为 undefined,用 null 替代
    由于小程序不支持将 data 中任何一项的 value 设为 undefined ,在 setState 的时候也请避免这么用。你可以使用 null 来替代。
  • 小程序端不要在组件中打印 this.props.children
    在微信小程序端是通过
  • 组件属性传递注意
    不要以 id、class、style 作为自定义组件的属性与内部 state 的名称,因为这些属性名在微信小程序小程序中会丢失。

猜你喜欢

转载自www.cnblogs.com/cag2050/p/9930639.html
今日推荐