feat(with-weapp): 支持 properties::observer

NervJS · Nov 19, 2018 · dad17ef · dad17ef
1 parent 66d691b
commit dad17ef
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/packages/taro-with-weapp/package.json b/packages/taro-with-weapp/package.json
@@ -21,7 +21,8 @@
   "author": "yuche",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/taro": "1.2.0-alpha.2"
+    "@tarojs/taro": "1.2.0-alpha.2",
+    "lodash.isequal": "^4.5.0"
   },
   "devDependencies": {
     "@types/jest": "^22.2.3",

diff --git a/packages/taro-with-weapp/src/index.ts b/packages/taro-with-weapp/src/index.ts
@@ -3,8 +3,15 @@ import {
   ComponentLifecycle,
   internal_safe_set as safeSet
 } from '@tarojs/taro'
+import isEqual from 'lodash.isequal'
 
 type WeappLifeCycle = () => void
+type Observer = (newProps, oldProps, changePath: string) => void
+
+interface ObserverProperties {
+  name: string,
+  observer: string | Observer
+}
 
 interface WeappComponent<P, S> extends Component<P, S> {
   created?: WeappLifeCycle
@@ -14,6 +21,7 @@ interface WeappComponent<P, S> extends Component<P, S> {
   moved?: WeappLifeCycle,
   globalData?: any,
   setData: Function
+  _observeProps?: ObserverProperties[]
 }
 
 interface ComponentClass<P = {}, S = {}> extends ComponentLifecycle<P, S> {
@@ -28,6 +36,10 @@ function defineGetter (component: Component, key: string, getter: string) {
   })
 }
 
+function isFunction (o): o is Function {
+  return typeof o === 'function'
+}
+
 export default function withWeapp (componentType: string) {
   const isComponent = componentType === 'Component'
 
@@ -58,6 +70,27 @@ export default function withWeapp (componentType: string) {
       this.setState(state)
     }
 
+    componentWillReceiveProps (nextProps) {
+      if (Array.isArray(this._observeProps)) {
+        this._observeProps.forEach(({ name: key, observer }) => {
+          const prop = this.props[key]
+          const nextProp = nextProps[key]
+          // 小程序是深比较不同之后才 trigger observer
+          if (!isEqual(prop, nextProp)) {
+            if (typeof observer === 'string') {
+              const ob = this[observer]
+              if (isFunction(ob)) {
+                ob.call(this, nextProp, prop, key)
+              }
+            } else if (isFunction(observer)) {
+              observer.call(this, nextProp, prop, key)
+            }
+          }
+        })
+      }
+      this.executeComponentFunc(super.componentWillReceiveProps)
+    }
+
     componentWillMount () {
       this.executeComponentFunc(this.created)
       this.safeExecute(super.componentWillMount)

diff --git a/packages/taro-with-weapp/yarn.lock b/packages/taro-with-weapp/yarn.lock
@@ -16,9 +16,9 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@tarojs/taro@^1.0.0-beta.24":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@tarojs/taro/-/taro-1.0.3.tgz#5bab6f5e5d6f59f9baa31403ceb05c6a16b54e48"
+"@tarojs/taro@1.2.0-alpha.2":
+  version "1.2.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tarojs/taro/-/taro-1.2.0-alpha.2.tgz#82616cb10e87263718182893f75f2f6dee474194"
 
 "@types/estree@0.0.39":
   version "0.0.39"
@@ -2309,6 +2309,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"