Skip to content

Commit

Permalink
feat(taro-tt): 字节跳动小程序 props 改造
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chen-jj
Chen-jj committed Apr 15, 2019
1 parent ee708c5 commit 0af1d46
Show file tree
Hide file tree
Showing 13 changed files with 180 additions and 140 deletions.
2 changes: 1 addition & 1 deletion docs/optimized-practice.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ title: 性能优化实践

### 预加载

在**微信小程序中**，从调用 `Taro.navigateTo`、`Taro.redirectTo` 或 `Taro.switchTab` 后，到页面触发 componentWillMount 会有一定延时。因此一些网络请求可以提前到发起跳转前一刻去请求。
在**微信小程序**和**字节跳动小程序**中，从调用 `Taro.navigateTo`、`Taro.redirectTo` 或 `Taro.switchTab` 后，到页面触发 componentWillMount 会有一定延时。因此一些网络请求可以提前到发起跳转前一刻去请求。

Taro 提供了 `componentWillPreload` 钩子，它接收页面跳转的参数作为参数。可以把需要预加载的内容通过 `return` 返回，然后在页面触发 componentWillMount 后即可通过 `this.$preloadData` 获取到预加载的内容。

Expand Down
2 changes: 1 addition & 1 deletion packages/taro-swan/src/create-component.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getCurrentPageUrl } from '@tarojs/utils'

import { isEmptyObject, noop } from './util'
import { isEmptyObject } from './util'
import { updateComponent } from './lifecycle'
import { cacheDataGet, cacheDataHas } from './data-cache'
import propsManager from './propsManager'
Expand Down
8 changes: 4 additions & 4 deletions packages/taro-transformer-wx/src/class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function processThisPropsFnMemberProperties (
]
)
)
} else if (Adapters.weapp !== Adapter.type && Adapters.swan !== Adapter.type) {
} else if (Adapters.weapp !== Adapter.type && Adapters.swan !== Adapter.type && Adapters.tt !== Adapter.type) {
path.replaceWith(
t.callExpression(
t.memberExpression(t.thisExpression(), t.identifier('__triggerPropsFn')),
Expand Down Expand Up @@ -415,14 +415,14 @@ class Transformer {
t.isIdentifier(expr.callee.property, { name: 'bind' })
) {
if (
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan) ||
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan && Adapters.tt !== Adapter.type) ||
(t.isJSXIdentifier(jsx.node.name) && DEFAULT_Component_SET.has(jsx.node.name.name))
) {
self.buildPropsAnonymousFunc(attr, expr, true)
}
} else if (t.isMemberExpression(expr)) {
if (
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan) ||
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan && Adapters.tt !== Adapter.type) ||
(t.isJSXIdentifier(jsx.node.name) && DEFAULT_Component_SET.has(jsx.node.name.name))
) {
self.buildPropsAnonymousFunc(attr, expr as any, false)
Expand Down Expand Up @@ -642,7 +642,7 @@ class Transformer {
if (methodName.startsWith('on')) {
this.componentProperies.add(`__fn_${methodName}`)
}
const method = (Adapters.weapp !== Adapter.type && Adapters.swan !== Adapter.type) ?
const method = (Adapters.weapp !== Adapter.type && Adapters.swan !== Adapter.type && Adapters.tt !== Adapter.type) ?
t.classMethod('method', t.identifier(funcName), [], t.blockStatement([
t.expressionStatement(t.callExpression(
t.memberExpression(t.thisExpression(), t.identifier('__triggerPropsFn')),
Expand Down
6 changes: 3 additions & 3 deletions packages/taro-transformer-wx/src/jsx.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export function parseJSXElement (element: t.JSXElement): string {
if (attributes.length) {
attributesTrans = attributes.reduce((obj, attr) => {
if (t.isJSXSpreadAttribute(attr)) {
if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan) return {}
if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan || Adapter.type === Adapters.tt) return {}
throw codeFrameError(attr.loc, 'JSX 参数暂不支持 ...spread 表达式')
}
let name = attr.name.name
Expand Down Expand Up @@ -261,13 +261,13 @@ export function parseJSXElement (element: t.JSXElement): string {
obj[isDefaultComponent && !name.includes('-') && !name.includes(':') ? kebabCase(name) : name] = value
}
}
if (!isDefaultComponent && !specialComponentName.includes(componentName) && Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan) {
if (!isDefaultComponent && !specialComponentName.includes(componentName) && Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan && Adapter.type !== Adapters.tt) {
obj[TRIGGER_OBSERER] = '{{ _triggerObserer }}'
}
return obj
}, {})
} else if (!isDefaultComponent && !specialComponentName.includes(componentName)) {
if (Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan) {
if (Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan && Adapter.type !== Adapters.tt) {
attributesTrans[TRIGGER_OBSERER] = '{{ _triggerObserer }}'
}
}
Expand Down
59 changes: 6 additions & 53 deletions packages/taro-transformer-wx/src/render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,28 +336,6 @@ export class RenderParser {
}
}

setProperies () {
if ([Adapters.alipay, Adapters.weapp, Adapters.swan].includes(Adapter.type)) {
return
}
const properties: t.ObjectProperty[] = []
this.componentProperies.forEach((propName) => {
properties.push(
t.objectProperty(t.stringLiteral(propName), t.objectExpression([
t.objectProperty(t.stringLiteral('type'), t.nullLiteral()),
t.objectProperty(t.stringLiteral('value'), t.nullLiteral())
]))
)
})
let classProp = t.classProperty(
t.identifier('properties'),
t.objectExpression(properties)
) as any
classProp.static = true
const classPath = this.renderPath.findParent(isClassDcl) as NodePath<t.ClassDeclaration>
classPath.node.body.body.unshift(classProp)
}

setLoopRefFlag () {
if (this.loopRefs.size) {
const classPath = this.renderPath.findParent(isClassDcl) as NodePath<t.ClassDeclaration>
Expand Down Expand Up @@ -614,7 +592,7 @@ export class RenderParser {
}

const blockAttrs: t.JSXAttribute[] = []
if ((Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan) && !this.finalReturnElement && process.env.NODE_ENV !== 'test') {
if ((Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan || Adapter.type === Adapters.tt) && !this.finalReturnElement && process.env.NODE_ENV !== 'test') {
blockAttrs.push(t.jSXAttribute(
t.jSXIdentifier(Adapter.if),
t.jSXExpressionContainer(t.jSXIdentifier('$taroCompReady'))
Expand Down Expand Up @@ -1016,7 +994,7 @@ export class RenderParser {
.node as t.JSXElement
const componentName = JSXElement.openingElement.name
if (
(Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan) &&
(Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan || Adapter.type === Adapters.tt) &&
t.isJSXIdentifier(componentName) &&
!DEFAULT_Component_SET.has(componentName.name)
) {
Expand Down Expand Up @@ -1127,7 +1105,7 @@ export class RenderParser {
// }
if (!generate(value.expression).code.includes('.bind') &&
(
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan) ||
(Adapter.type !== Adapters.weapp && Adapter.type !== Adapters.swan && Adapter.type !== Adapters.tt) ||
(t.isJSXIdentifier(componentName) && DEFAULT_Component_SET.has(componentName.name))
)
) {
Expand Down Expand Up @@ -1160,18 +1138,6 @@ export class RenderParser {
}
}
}
if (t.isJSXIdentifier(componentName) && !DEFAULT_Component_SET.has(componentName.name)) {
const element = path.parent as t.JSXOpeningElement
if (
process.env.NODE_ENV !== 'test' &&
Adapter.type !== Adapters.alipay &&
Adapter.type !== Adapters.weapp &&
Adapter.type !== Adapters.swan
) {
const fnName = `__fn_${name.name}`
element.attributes = element.attributes.concat([t.jSXAttribute(t.jSXIdentifier(fnName))])
}
}
}
if (
t.isJSXIdentifier(jsxElementPath.node.openingElement.name)
Expand Down Expand Up @@ -1443,7 +1409,7 @@ export class RenderParser {
})
}
this.handleLoopComponents()
if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan) this.handleComponents(renderBody)
if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan || Adapter.type === Adapters.tt) this.handleComponents(renderBody)
renderBody.traverse(this.visitors)
this.setOutputTemplate()
this.checkDuplicateName()
Expand All @@ -1452,7 +1418,6 @@ export class RenderParser {
this.setPendingState()
this.setCustomEvent()
this.createData()
this.setProperies()
this.setLoopRefFlag()
}

Expand Down Expand Up @@ -1573,7 +1538,7 @@ export class RenderParser {
}
}

if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan) {
if (Adapter.type === Adapters.weapp || Adapter.type === Adapters.swan || Adapter.type === Adapters.tt) {
let loops: t.ArrayExpression | null = null

blockStatementPath.traverse({
Expand Down Expand Up @@ -1949,19 +1914,7 @@ export class RenderParser {

const componentProperies = cloneDeep(this.componentProperies)

if ([Adapters.alipay, Adapters.weapp, Adapters.swan].includes(Adapter.type)) {
componentProperies.clear()
} else {
componentProperies.forEach(s => {
if (s.startsWith('__fn_')) {
const eventName = s.slice(5)
if (componentProperies.has(eventName)) {
componentProperies.delete(s)
componentProperies.delete(eventName)
}
}
})
}
componentProperies.clear()

Array.from(this.reserveStateWords).forEach(this.setReserveWord)
const usedState = Array.from(
Expand Down
3 changes: 2 additions & 1 deletion packages/taro-tt/src/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,15 @@ class BaseComponent {
_pendingStates = []
_pendingCallbacks = []
$componentType = ''
refs = {}
$router = {
params: {},
path: ''
}

constructor (props = {}, isPage) {
this.state = {}
this.props = {}
this.props = props
this.$componentType = isPage ? 'PAGE' : 'COMPONENT'
this.isTaroComponent = this.$componentType && this.$router && this._pendingStates
}
Expand Down
Loading

0 comments on commit 0af1d46

Please sign in to comment.