fix(mobx): 生命周期 getDerivedStateFromProps 不被触发问题修复

packages/taro-mobx-common/src/index.js

@@ -4,10 +4,10 @@ export const onError = fn => errorsReporter.on(fn)
 
 export { PropTypes } from "./propTypes"
 
-export { observer } from './observer'
 export { useLocalStore } from './useLocalStore'
 export { useAsObservableSource } from './useAsObservableSource'
 export { isUsingStaticRendering, useStaticRendering } from './staticRendering'
 
 export { getStore, setStore } from './store'
+export { errorsReporter } from './reporter'
 export { inject, getInjectName, mapStoreToProps } from './inject'

packages/taro-mobx-common/src/utils.js

@@ -1,13 +1,7 @@
-import Taro from '@tarojs/taro'
-
 export function isPlainObject (value) {
   if (!value || typeof value !== 'object') {
     return false
   }
   const proto = Object.getPrototypeOf(value)
   return !proto || proto === Object.prototype
 }
-
-export function isMiniPlatform () {
-  return !(/^WEB|RN$/i.test(Taro.getEnv()))
-}

packages/taro-mobx-h5/src/index.js

@@ -3,7 +3,6 @@ import { useState } from '@tarojs/taro-h5'
 import {
   PropTypes,
   onError,
-  observer,
   isUsingStaticRendering,
   useStaticRendering,
   useLocalStore as originUseLocalStore,
@@ -12,6 +11,7 @@ import {
 
 import Provider from './Provider'
 import { inject } from './inject'
+import { observer } from './observer'
 
 function useLocalStore (initializer, current) {
   return originUseLocalStore(initializer, current, useState)

packages/taro-mobx-h5/src/observer.js

@@ -0,0 +1,50 @@
+import { Reaction } from 'mobx'
+import { errorsReporter, isUsingStaticRendering } from '@tarojs/mobx-common'
+
+export function observer (component) {
+  if (isUsingStaticRendering()) {
+    return component
+  }
+
+  if (component.isMobxInjector === true) {
+    console.warn(
+      "Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"
+    )
+  }
+
+  const target = component.prototype
+
+  const originComponentWillUnmount = target.componentWillUnmount
+  target.componentWillUnmount = function () {
+    this._reaction.dispose()
+    originComponentWillUnmount && originComponentWillUnmount.call(this)
+  }
+
+  const originRender = target.render
+  target.render = function (...args) {
+    if (!this._reaction) {
+      const initialName = this.displayName || this.name
+      this._reaction = new Reaction(`${initialName}_${Date.now()}`, () => {
+        this.componentWillReact && this.componentWillReact()
+        this.forceUpdate()
+      })
+    }
+
+    let result
+    let exception
+    this._reaction.track(() => {
+      try {
+        result = originRender.call(this, null, null, args[2])
+      } catch (e) {
+        exception = e
+      }
+    })
+    if (exception) {
+      errorsReporter.emit(exception)
+      throw exception
+    }
+    return result
+  }
+
+  return component
+}

packages/taro-mobx-rn/src/index.js

@@ -3,7 +3,6 @@ import { useState } from '@tarojs/taro-rn'
 import {
   PropTypes,
   onError,
-  observer,
   isUsingStaticRendering,
   useStaticRendering,
   useLocalStore as originUseLocalStore,
@@ -12,6 +11,7 @@ import {
 
 import Provider from './Provider'
 import { inject } from './inject'
+import { observer } from './observer'
 
 function useLocalStore (initializer, current) {
   return originUseLocalStore(initializer, current, useState)

packages/taro-mobx-rn/src/observer.js

@@ -0,0 +1,50 @@
+import { Reaction } from 'mobx'
+import { errorsReporter, isUsingStaticRendering } from '@tarojs/mobx-common'
+
+export function observer (component) {
+  if (isUsingStaticRendering()) {
+    return component
+  }
+
+  if (component.isMobxInjector === true) {
+    console.warn(
+      "Mobx observer: You are trying to use 'observer' on a component that already has 'inject'. Please apply 'observer' before applying 'inject'"
+    )
+  }
+
+  const target = component.prototype
+
+  const originComponentWillUnmount = target.componentWillUnmount
+  target.componentWillUnmount = function () {
+    this._reaction.dispose()
+    originComponentWillUnmount && originComponentWillUnmount.call(this)
+  }
+
+  const originRender = target.render
+  target.render = function (...args) {
+    if (!this._reaction) {
+      const initialName = this.displayName || this.name
+      this._reaction = new Reaction(`${initialName}_${Date.now()}`, () => {
+        this.componentWillReact && this.componentWillReact()
+        this.forceUpdate()
+      })
+    }
+
+    let result
+    let exception
+    this._reaction.track(() => {
+      try {
+        result = originRender.call(this, null, null, args[2])
+      } catch (e) {
+        exception = e
+      }
+    })
+    if (exception) {
+      errorsReporter.emit(exception)
+      throw exception
+    }
+    return result
+  }
+
+  return component
+}

packages/taro-mobx/src/index.js

@@ -5,14 +5,14 @@ import {
   onError,
   getStore,
   setStore,
-  observer,
   isUsingStaticRendering,
   useStaticRendering,
   useLocalStore as originUseLocalStore,
   useAsObservableSource as originUseAsObservableSource
 } from '@tarojs/mobx-common'
 
 import { inject } from './inject'
+import { observer } from './observer'
 
 class Provider {}
 

packages/taro-mobx/src/inject.js

@@ -8,19 +8,11 @@ function createStoreInjector (grabStoresFn, injectNames, Component) {
       super(Object.assign(...arguments, mapStoreToProps(grabStoresFn, props)), isPage)
     }
 
-    componentWillMount () {
+    _constructor () {
       Object.assign(this.props, mapStoreToProps(grabStoresFn, this.props))
-      if (typeof super.componentWillMount === 'function') {
-        super.componentWillMount()
-      }
+      super._constructor && super._constructor(this.props)
     }
   }
-  const target = Injector.prototype
-  const originCreateData = target._createData
-  target._createData = function (...args) {
-    Object.assign(this.props, mapStoreToProps(grabStoresFn, this.props))
-    return originCreateData.call(this, null, null, args[2])
-  }
   return Injector
 }
 

packages/taro-mobx-common/src/observer.js → packages/taro-mobx/src/observer.js

@@ -1,7 +1,5 @@
 import { Reaction } from 'mobx'
-import { isMiniPlatform } from './utils'
-import { errorsReporter } from './reporter'
-import { isUsingStaticRendering } from './staticRendering'
+import { errorsReporter, isUsingStaticRendering } from '@tarojs/mobx-common'
 
 export function observer (component) {
   if (isUsingStaticRendering()) {
@@ -15,15 +13,16 @@ export function observer (component) {
   }
 
   const target = component.prototype
-  const originComponentWillMount = target.componentWillMount
-  const originComponentWillReact = target.componentWillReact
-  target.componentWillMount = function () {
-    const initialName = this.displayName || this.name
-    this._reaction = new Reaction(`${initialName}_${Date.now()}`, () => {
-      this.forceUpdate()
-      originComponentWillReact && originComponentWillReact.call(this)
-    })
-    originComponentWillMount && originComponentWillMount.call(this)
+  const originConstructor = target._constructor
+  target._constructor = function () {
+    if (this.$scope) {
+      const initialName = this.displayName || this.name
+      this._reaction = new Reaction(`${initialName}_${Date.now()}`, () => {
+        this.componentWillReact && this.componentWillReact()
+        this.forceUpdate()
+      })
+    }
+    originConstructor && originConstructor.call(this, this.props)
   }
 
   const originComponentWillUnmount = target.componentWillUnmount
@@ -32,9 +31,8 @@ export function observer (component) {
     originComponentWillUnmount && originComponentWillUnmount.call(this)
   }
 
-  const renderMethod = isMiniPlatform() ? '_createData' : 'render'
-  const originRender = target[renderMethod]
-  target[renderMethod] = function (...args) {
+  const originRender = target._createData
+  target._createData = function (...args) {
     let result
     let exception
     if (this._reaction instanceof Reaction) {

packages/taro-mobx/types/index.d.ts

@@ -14,10 +14,9 @@ export function useLocalStore<TStore extends Record<string, any>, TSource extend
 export function useAsObservableSource<TSource>(current: TSource): TSource;
 export type ITaroComponent<P = any> =
    | Taro.ComponentClass<P>
-   | Taro.FunctionComponent<P>
+   | Taro.FunctionComponent<P>;
 
-export function observer<P extends ITaroComponent>(component: P): P
-// export function observer(component);
+export function observer<P extends ITaroComponent>(component: P): P;
 export function inject(...stores: string[]);
 export function inject(fn: (stores: IValueMap, nextProps: IValueMap) => IValueMap);