从 CDN 加载 mobx-react 作为 UMD 时出错

Question

从6.0.0版本开始，从 CDN 加载mobx-react作为 UMD 会导致错误。 有针对这个的解决方法吗？

例子

 const { observer } = mobxReact; const App = observer(() => <div>Example</div>); ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mobx@6.0.4/dist/mobx.umd.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mobx-react@7.0.5/dist/mobxreact.umd.production.min.js"></script> <div id="root"></div>

Answer 1

从6.0.0版本开始， mobx-react依赖于mobx-react-lite package，它在使用observer时在 function 组件上使用。

如果您只在应用程序中使用 function 组件，您可以根据需要直接使用mobx-react-lite ，它更快更小（压缩后仅 1.5kB）。

例子

 const { observer } = mobxReact; const App = observer(() => <div>Example</div>); ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mobx@6.0.4/dist/mobx.umd.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mobx-react-lite@3.1.6/dist/mobxreactlite.umd.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mobx-react@7.0.5/dist/mobxreact.umd.production.min.js"></script> <div id="root"></div>