React之Context源码分析与实践

原創

2020-06-04 10:28

{children}

\n \n )\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此处只传递单个属性color，也可以结合mobx定义store，将整个store对象传递下去。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后在子组件内通过inject选择指定的值:"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"@inject(“color”)\n@observer\nclass Button extends React.Component {\n render() {\n return \n }\n}\n\nclass Message extends React.Component {\n render() {\n return (\n

\n {this.props.text} \n

\n )\n }\n}"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Provider源码分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Provider内部使用"},{"type":"codeinline","content":[{"type":"text","text":"React.createContext"}]},{"type":"text","text":"来定义Context"}]},{"type":"codeblock","attrs":{"lang":""},"content":[{"type":"text","text":"export const MobXProviderContext = React.createContext({})\n\nexport interface ProviderProps extends IValueMap {\n children: React.ReactNode\n}\n\nexport function Provider(props: ProviderProps) {\n\tconst { children, ...stores } = props\n\t// 通过useContext消费Context\n\tconst parentValue = React.useContext(MobXProviderContext)\n\t// 通过ref保持所有context值\n\tconst mutableProviderRef = React.useRef({ …parentValue, …stores })\n const value = mutableProviderRef.current\n\treturn {children}\n}"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"inject源码分析"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import { MobXProvider } from \"./Provider”\n/**\n* 可接收一个字符串数组，或一个回调函数：storesToProps(mobxStores, props, context) => newProps\n*/\nexport function inject(...storeNames: Array) {\n\tif (typeof arguments[0] === \"function”) {\n\t\tlet grabStoreFn = arguments[0]\n\t\treturn (componentClass: React.ComponentClass) =>\n createStoreInjector(grabStoresFn, componentClass, grabStoresFn.name, true)\n\n\t} else {\n\t\treturn (componentClass: React.ComponentClass) =>\n createStoreInjector(\n grabStoresByName(storeNames),\n componentClass,\n storeNames.join(“-“),\n false\n )\n\t}\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可见其内部调用了"},{"type":"codeinline","content":[{"type":"text","text":"createStoreInjector(grabStoreFn, componentClass, storesName, boolean)"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"grabStoreFn: 用来处理选择哪些store，当参数为函数时则使用自定义函数作为处理函数"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"componentClass: 子组件"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"storesName: 需要选择的store名称"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"boolean: 是否将组件监听变为observer"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function createStoreInjector(\n grabStoresFn: IStoresToProps,\n component: IReactComponent,\n injectNames: string,\n makeReactive: boolean\n): IReactComponent {\n // 支持forward refs\n let Injector: IReactComponent = React.forwardRef((props, ref) => {\n const newProps = { …props }\n\t\t\t// 通过useContext来消费全局的Context\n const context = React.useContext(MobXProviderContext)\n\t\t\t// 赋值操作，将指定store作为子组件的最新props\n Object.assign(newProps, grabStoresFn(context || {}, newProps) || {})\n if (ref) {\n newProps.ref = ref\n }\n\t\t\t// 返回包裹后的子组件\n return React.createElement(component, newProps)\n })\n\t // inject接收函数回调时，则默认讲组件变为observer\n if (makeReactive) Injector = observer(Injector)\n Injector[“isMobxInjector\"] = true // assigned late to suppress observer warning\n // 拷贝子组件的静态方法\n copyStaticProperties(component, Injector)\n\t // 将wrappedComponent指向原始子组件\n Injector[“wrappedComponent”] = component\n Injector.displayName = getInjectName(component, injectNames)\n return Injector\n}\n"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"总结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面关于React的Context内容已经结束了，包括基本使用方式，又通过源码解读来深入了解其原理，最后学习React-Router和MobX-React库的源码彻底掌握Context的使用场景。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"不想结束的部分"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Provider与Consumer本身，作为React中的特殊组件类型，有其特殊的实现方式，本文并没有仔细去分析。如果想深入了解其实现原理，可以自行去阅读React源码，但是直接阅读React代码库是比较费力的，分析定位起来会比较复杂。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"给爱学习的同学推荐React-Router依赖的"},{"type":"codeinline","content":[{"type":"text","text":"mini-create-react-context"}]},{"type":"text","text":"，该库单纯作为对React中"},{"type":"codeinline","content":[{"type":"text","text":"createContext"}]},{"type":"text","text":"方法的polyfill实现，其内部基于Class语法定义了Provider和Consumer两种组件，可以很好地理解内部原理，传送门："},{"type":"link","attrs":{"href":"https://github.com/StringEpsilon/mini-create-react-context/blob/master/src/implementation.ts","title":""},"content":[{"type":"text","text":"mini-create-react-context"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"核心代码：内部定义了一个EventEmitter，在Provider中value改变时，emit change事件，而在Consumer中则监听value的update事件，从而实现子组件接收Context的值，典型的跨组件通信实现方式，对该方式不提熟悉的同学可以自行了解[EventBus]通信方式，Vue中使用很常见，通过定义一个空的Vue示例作为EventBus，然后组件间通过"},{"type":"codeinline","content":[{"type":"text","text":"$emit"}]},{"type":"text","text":"和"},{"type":"codeinline","content":[{"type":"text","text":"$on"}]},{"type":"text","text":"来发布/订阅消息。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ee/eea9c1fb04cf40f92e9e3231ce8b4852.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}