feat(taro): 导出 API: createContext, useContext

原有的 wx.createContext 已废弃

packages/taro-weapp/src/index.js

@@ -18,7 +18,9 @@ import {
   useRef,
   useCallback,
   useMemo,
-  useImperativeHandle
+  useImperativeHandle,
+  useContext,
+  createContext
 } from '@tarojs/taro'
 
 import Component from './component'
@@ -56,7 +58,9 @@ export const Taro = {
   useRef,
   useCallback,
   useMemo,
-  useImperativeHandle
+  useImperativeHandle,
+  useContext,
+  createContext
 }
 
 export default Taro

packages/taro/src/create-context.js

@@ -0,0 +1,24 @@
+import { Emiter } from './emiter'
+
+export let contextUid = 0
+
+export function createContext (defaultValue) {
+  const contextId = '__context_' + contextUid++ + '__'
+  const context = {
+    emiter: null,
+    _id: contextId,
+    _defaultValue: defaultValue
+  }
+  function Provider (newValue) {
+    const emiter = context.emiter
+    if (!emiter) {
+      context.emiter = new Emiter(defaultValue)
+    } else {
+      emiter.set(newValue)
+    }
+  }
+  return {
+    Provider: Provider,
+    context
+  }
+}

packages/taro/src/emiter.js

@@ -0,0 +1,28 @@
+import { objectIs } from './util'
+
+class Emiter {
+  constructor (value) {
+    this.value = value
+    this.handlers = []
+  }
+
+  on (handler) {
+    this.handlers.push(handler)
+  }
+
+  off (handler) {
+    this.handlers = this.handlers.filter((h) => h !== handler)
+  }
+
+  set (value) {
+    if (objectIs(value, this.value)) {
+      return
+    }
+    this.value = value
+    this.handlers.forEach((h) => h(this.value))
+  }
+}
+
+export {
+  Emiter
+}

packages/taro/src/hooks.js

@@ -1,4 +1,4 @@
-import { isFunction, isUndefined, isArray, isNullOrUndef, defer } from './util'
+import { isFunction, isUndefined, isArray, isNullOrUndef, defer, objectIs } from './util'
 import { Current } from './current'
 
 function getHooks (index) {
@@ -54,22 +54,11 @@ export function useReducer (
   return hook.state
 }
 
-// Object.is polyfill
-// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-function is (x, y) {
-  if (x === y) { // Steps 1-5, 7-10
-    // Steps 6.b-6.e: +0 != -0
-    return x !== 0 || 1 / x === 1 / y
-  }
-  // eslint-disable-next-line no-self-compare
-  return x !== x && y !== y
-}
-
 function areDepsChanged (prevDeps, deps) {
   if (isNullOrUndef(prevDeps) || isNullOrUndef(deps)) {
     return true
   }
-  return deps.some((d, i) => !is(d, prevDeps[i]))
+  return deps.some((d, i) => !objectIs(d, prevDeps[i]))
 }
 
 export function invokeEffects (component, delay) {
@@ -174,3 +163,22 @@ export function useImperativeHandle (ref, init, deps) {
     }
   }, isArray(deps) ? deps.concat([ref]) : undefined)
 }
+
+export function useContext ({ context }) {
+  const emiter = context.emiter
+  if (emiter === null) {
+    return context._defaultValue
+  }
+  const hook = getHooks(Current.index++)
+  if (isUndefined(hook.context)) {
+    hook.context = true
+    hook.component = Current.current
+    emiter.on(_ => {
+      if (hook.component) {
+        hook.component._disable = false
+        hook.component.setState({})
+      }
+    })
+  }
+  return emiter.value
+}

packages/taro/src/index.js

@@ -26,9 +26,11 @@ import {
   useCallback,
   useMemo,
   useImperativeHandle,
-  invokeEffects
+  invokeEffects,
+  useContext
 } from './hooks'
 import { Current } from './current'
+import { createContext } from './create-context'
 
 const eventCenter = new Events()
 
@@ -61,7 +63,9 @@ export {
   useCallback,
   useMemo,
   useImperativeHandle,
-  invokeEffects
+  invokeEffects,
+  useContext,
+  createContext
 }
 
 export default {
@@ -93,5 +97,7 @@ export default {
   useCallback,
   useMemo,
   useImperativeHandle,
-  invokeEffects
+  invokeEffects,
+  useContext,
+  createContext
 }

packages/taro/src/native-apis.js

@@ -77,7 +77,7 @@ const noPromiseApis = {
   createAnimation: true,
   createSelectorQuery: true,
   createCanvasContext: true,
-  createContext: true,
+  // createContext: true,
   drawCanvas: true,
   hideKeyboard: true,
   stopPullDownRefresh: true,

packages/taro/src/util.js

@@ -10,6 +10,17 @@ export function isEmptyObject (obj) {
   return true
 }
 
+// Object.is polyfill
+// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+export function objectIs (x, y) {
+  if (x === y) { // Steps 1-5, 7-10
+    // Steps 6.b-6.e: +0 != -0
+    return x !== 0 || 1 / x === 1 / y
+  }
+  // eslint-disable-next-line no-self-compare
+  return x !== x && y !== y
+}
+
 export function isFunction (arg) {
   return typeof arg === 'function'
 }