feats

config/dev.js

@@ -4,6 +4,8 @@ module.exports = {
   },
   defineConstants: {
   },
-  mini: {},
+  mini: {
+    debugReact: true
+  },
   h5: {}
 }

config/index.js

@@ -1,3 +1,5 @@
+const path = require('path')
+
 const config = {
   projectName: 'miniapp',
   date: '2020-11-24',
@@ -59,6 +61,9 @@ const config = {
         }
       }
     }
+  },  
+  alias: {
+    '@/store': path.resolve(__dirname, '..', 'src/store'),
   }
 }
 

package.json

@@ -37,23 +37,24 @@
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.0.14",
+    "@tarojs/react": "3.0.14",
     "@tarojs/runtime": "3.0.14",
     "@tarojs/taro": "3.0.14",
-    "@tarojs/react": "3.0.14",
-    "react-dom": "^16.10.0",
-    "react": "^16.10.0"
+    "fast-deep-equal": "^3.1.3",
+    "react": "^16.10.0",
+    "react-dom": "^16.10.0"
   },
   "devDependencies": {
-    "@types/webpack-env": "^1.13.6",
-    "@types/react": "^16.0.0",
-    "@tarojs/mini-runner": "3.0.14",
     "@babel/core": "^7.8.0",
+    "@tarojs/mini-runner": "3.0.14",
     "@tarojs/webpack-runner": "3.0.14",
+    "@types/react": "^16.0.0",
+    "@types/webpack-env": "^1.13.6",
     "babel-preset-taro": "3.0.14",
-    "eslint-config-taro": "3.0.14",
     "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.8.2",
+    "eslint-config-taro": "3.0.14",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
     "eslint-plugin-react-hooks": "^1.6.1",
     "stylelint": "9.3.0"
   }

src/app.config.js

@@ -1,6 +1,8 @@
 export default {
   pages: [
-    'pages/index/index'
+    'pages/index/index',
+    'pages/foo/index',
+    'pages/bar/index'
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.js

@@ -1,4 +1,5 @@
-import { Component } from 'react'
+import React, { Component } from 'react'
+import { StoreRoot } from './store'
 import './app.less'
 
 class App extends Component {
@@ -13,7 +14,11 @@ class App extends Component {
 
   // this.props.children 是将要会渲染的页面
   render () {
-    return this.props.children
+    return (
+      <StoreRoot>
+        {this.props.children}
+      </StoreRoot>
+    )
   }
 }
 

src/pages/bar/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '首页'
+}

src/pages/bar/index.jsx

@@ -0,0 +1,26 @@
+import React, { Component, useEffect } from 'react'
+import { View, Text, Navigator } from '@tarojs/components'
+import './index.less'
+
+import { useModel } from '@/store'
+
+export default (props) => {
+  const { foo, setFoo } = useModel('foo')
+  
+  console.log('-----bar-------')
+
+  useEffect(() => {
+    let i = 1;
+    console.log('-----bar-------')
+
+    const t = setInterval(() => setFoo(i++), 1000)
+    return () => clearInterval(t)
+  }, [])
+
+  return (
+    <View className='foo'>
+      <Text>{foo}</Text>
+      <Navigator url="/pages/foo/index">foo</Navigator>
+    </View>
+  )
+}

src/pages/foo/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '首页'
+}

src/pages/foo/index.jsx

@@ -0,0 +1,27 @@
+import React, { Component, useEffect } from 'react'
+import { View, Text, Navigator } from '@tarojs/components'
+import './index.less'
+
+import { useModel } from '@/store'
+
+export default (props) => {
+  // const { foo, setFoo } = useModel('foo')
+  const { foo } = useModel('foo')
+  
+  console.log('-----foo-------')
+
+  // useEffect(() => {
+  //   let i = 1;
+  //   console.log('-----setfoo-------')
+
+  //   const t = setInterval(() => setFoo(i++), 1000)
+  //   return () => console.log('descard foo') || clearInterval(t) 
+  // }, [])
+
+  return (
+    <View className='foo'>
+      <Text>{foo}</Text>
+      <Navigator url="/pages/bar/index">bar</Navigator>
+    </View>
+  )
+}

src/store/index.js

@@ -0,0 +1,7 @@
+// import { createStoreRoot, createStore, createModelHook } from '@zjxpcyc/react-tiny-store'
+import { createStoreRoot, createStore, createModelHook } from '../utils/store'
+import models from './models'
+
+export const store = createStore()
+export const StoreRoot = createStoreRoot(store, models)
+export const useModel = createModelHook(store)

src/store/models/index.js

@@ -0,0 +1,7 @@
+import useUser from './useUser'
+
+const models = {
+  'user': useUser
+}
+
+export default models

src/store/models/useUser.js

@@ -0,0 +1,14 @@
+import React, { useState } from 'react'
+
+export default function useBar() {
+  const [user, setUser] = useState({})
+
+  const signIn = () => {
+    // xxx
+  }
+
+  return {
+    user,
+    signIn
+  }
+}

src/utils/store/executor.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+import React, { useEffect, useMemo } from 'react'
+import useUpdate from './utils/useUpdate'
+
+const noop = () => undefined
+
+// 所有的 Model 会分别被绑定到各自 Executor 上
+// 借用 Executor onUpdate 把 Model 的变化传递到各订阅的组件上
+export function Executor(props) {
+  if (!props.store || !props.namespace) {
+    throw new Error("[Executor] props.store 与 props.namespace 不能为空")
+  }
+
+  const { store, namespace, model = noop } = props
+  const data = model()
+
+  // 首次加载立即执行
+  const deModel = useMemo(() => {
+    return store.model(namespace, data)
+  }, [])
+
+  // 如果组件卸载, 则卸载 model
+  useEffect(() => {
+    store.getModel(namespace).publish()
+    return deModel
+  }, [])
+
+  // 传递 model 变化到订阅组件
+  useUpdate(() => {
+    store.getModel(namespace).publish(data)
+  }, [data])
+
+  return <></>
+}
+
+export function createExecutors(store, models) {
+  return function Executors(props) {
+    return (
+      <>
+      {
+        Object.entries(models).map(pair => {
+          const [namespace, hook] = pair
+          return <Executor key={namespace} namespace={namespace} model={hook} store={store} />
+        })
+      }
+      </>
+    )
+  }
+}
+

src/utils/store/index.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+import React from 'react'
+import { createExecutors, Executor } from './executor'
+import { createModelHook } from './model'
+import { createStore } from './store'
+
+function createStoreRoot(store, models) {
+  const Executors = createExecutors(store, models)
+
+  return function StoreRoot(props) {
+    return (
+      <>
+        <Executors />
+        {props.children}
+      </>
+    )
+  }
+}
+
+export {
+  createStore,
+  createExecutors,
+  createStoreRoot,
+  createModelHook,
+  Executor
+}

src/utils/store/model.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+import React, { useRef, useEffect, useCallback, useState } from 'react'
+
+const isEqual = require('fast-deep-equal/react')
+const getBySelectorOrNot = (data, selector) => selector ? selector(data) : data
+
+export function createModelHook(store) {
+  return function useModel(namespace, selector) {
+    if (!namespace) {
+      throw new Error('[useModel] namespace 不能为空')
+    }
+  
+    const selectorRef = useRef()
+    selectorRef.current = selector
+  
+    const model = store.getModel(namespace)
+    const initialData = getBySelectorOrNot(model.getState(), selectorRef.current)
+    const [state, setState] = useState(initialData)
+    const stateRef = useRef()
+    stateRef.current = state
+  
+    const renderTrigger = useCallback((e) => {
+      const preState = stateRef.current
+      const curState = getBySelectorOrNot(e, selectorRef.current)
+  
+      if (!isEqual(preState, curState)) {
+        setState(curState)
+      } else {
+        setState(e)
+      }
+    },[])
+  
+    useEffect(() => {
+      // 如果需要触发修改则触发 renderTrigger
+      // subscribe 返回取消订阅的函数
+      const model = store.getModel(namespace)
+      const deSubscribe = model.subscribe(renderTrigger)
+      // 通知组件更新
+      model.publish()
+      return deSubscribe
+    }, [namespace])
+  
+    return state
+  }  
+}

src/utils/store/store.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+import observe from './utils/observe'
+
+export function createStore() {
+  let data = {}
+
+  const model = (namespace, state) => {
+    if (!data[namespace]) {
+      data[namespace] = observe(state)
+    }
+
+    return () => delete(data[namespace])
+  }
+
+  const getModel = namespace => data[namespace]
+
+  return {
+    model,
+    getModel
+  }
+}

src/utils/store/utils/observe.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+export default function(initialState) {
+  let state = initialState
+  const listeners = []
+
+  const subscribe = f => {
+    const len = listeners.length
+    listeners.push(f)
+    return () => listeners.splice(len, 1)
+  }
+
+  const publish = (s) => {
+    if (s) state = s
+
+    listeners.forEach(f => f(state))
+  }
+
+  const getState = () => state
+
+  return {
+    subscribe,
+    publish,
+    getState
+  }
+}

src/utils/store/utils/useUpdate.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) [2020] Zhang Yansen.All rights reserved.
+ *
+ * use-async is licensed under the Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *     http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+
+import React, { useEffect, useRef } from 'react'
+
+export default function useUpdate(effect, deps) {
+  const mounted = useRef(false)
+
+  useEffect(() => {
+    if (mounted.current) {
+      effect()
+    } else {
+      mounted.current = true
+    }
+  }, deps)
+}

yarn.lock

@@ -4146,7 +4146,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fast-deep-equal@^3.1.1:
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=