mobx

2020 年你应该知道的 React 库

由 和自甴很熟 提交于 2021-02-16 07:29:44
声明：本文为译文，原文链接：https://www.robinwieruch.de/react-libraries React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。这是优势还是劣势取决于你自己。当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。它带有一些内置的解决方案，例如，用于本地状态和副作用的 React Hooks。 下面的文章将向您提供一些自己总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。 如何开始 React 如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序

mobx observer suddenly not rerendering when observable changes

由 送分小仙女□ 提交于 2021-02-05 06:43:45
问题 My app stopped updating on observable changes and I'm going crazy trying to figure out why. The code below shows only "Counter: 5" on the screen even though the console shows that it is updating. The relevant parts of package.json are: { "scripts": { "start": "react-scripts start", "build": "react-scripts build", }, "dependencies": { "mobx": "^6.0.4", "mobx-react": "^7.0.5", "react": "17.0.0", "react-dom": "17.0.0", "react-icons": "^4.1.0", "react-router-dom": "^5.2.0", "typescript": "^4.0.3"

如何利用 React Hooks 管理全局状态

由 不想你离开。 提交于 2021-01-22 18:01:43
来源 | https://www.cnblogs.com/xhyccc/p/14242492.html React 社区最火的全局状态管理库必定是 Redux，但是 Redux 本身就是为了大型管理数据而妥协设计的——这就会让一些小一点的应用一旦用上 Redux 就变得复杂无比。 后来又有了 Mobx，它对于小型应用的状态管理确实比 Redux 简单不少。可是不得不说 Mobx+React 简直就是一个繁琐版本的 Vue。所以我也不太喜欢，不如直接用 Vue3。 总而言之，不管是 react-redux 还是 mobx，他们使用的时候都非常复杂，甚至需要你去组件函数或是组件类上修修改改，从审美角度上来说就令人不太喜欢。 直到后来某一天用了 Angular，我就开始对 SOA 产生好感，ng 的 Service 的写法与依赖注入控制反转着实惊艳到了我。 Service 是 Angular 的逻辑复用方法，并且解决了共享状态的问题，那 React 的自定义 Hook 可以达到类似的效果嘛？ 可以，并且会比 Angular 更简洁！！！ 什么是 Service 我们先来想一下，Service 到底是什么？ Service 包含 n 个方法； Service 包含有状态； Service 应该是个单例。 这些方法与状态应该是高度整合的，一个 Service 解决的是一个模块的问题。

【React】668- React Hooks的优缺点

由 最后都变了- 提交于 2021-01-12 07:49:52
https://zhihu.com/people/zhan-zi-zhen-84 下面我谈一下我认为的 react hooks 的优缺点，优缺点通过和传统的 React.Component 进行对比得出。 优点 一、更容易复用代码 这点应该是 react hooks 最大的优点，它通过自定义 hooks 来复用状态，从而解决了类组件有些时候难以复用逻辑的问题。 hooks 是怎么解决这个复用的问题呢，具体如下： 每调用 useHook 一次都会生成一份独立的状态，这个没有什么黑魔法，函数每次调用都会开辟一份独立的内存空间。虽然状态( from useState )和副作用( useEffect )的存在依赖于组件，但它们可以在组件外部进行定义。这点是 class component 做不到的，你无法在外部声明 state 和副作用（如 componentDidMount ）。上面这两点，高阶组件和renderProps也同样能做到。但hooks实现起来的代码量更少，以及更直观（代码可读性）。 举个例子，我们经常使用的 antd-table ，我们经常需要写一些状态： pagination={current:xxx，pageSize:xxx,total:xxx} 。但许多场景只是简单的表格，我们希望封装一个高阶组件，自带这些状态，并可以自动调用 server 去获取 remote

mobx-react observer don't fires when I set observable

由 女生的网名这么多〃 提交于 2021-01-09 08:46:53
问题 I am trying to create a react application using mobx and typescript. But it doesn't work. I expect the timer to count the seconds. And I see that the event happens and updates the counter. But the component is not rerender. What am I doing wrong? import React from "react"; import { observable, action } from "mobx"; import { observer, inject, Provider } from "mobx-react"; export class TestStore { @observable timer = 0; @action timerInc = () => { this.timer += 1; }; } interface IPropsTestComp {

mobx-react observer don't fires when I set observable

由 ≡放荡痞女 提交于 2021-01-09 08:43:22
问题 I am trying to create a react application using mobx and typescript. But it doesn't work. I expect the timer to count the seconds. And I see that the event happens and updates the counter. But the component is not rerender. What am I doing wrong? import React from "react"; import { observable, action } from "mobx"; import { observer, inject, Provider } from "mobx-react"; export class TestStore { @observable timer = 0; @action timerInc = () => { this.timer += 1; }; } interface IPropsTestComp {

mobx-react observer don't fires when I set observable

由 …衆ロ難τιáo~ 提交于 2021-01-09 08:40:02
问题 I am trying to create a react application using mobx and typescript. But it doesn't work. I expect the timer to count the seconds. And I see that the event happens and updates the counter. But the component is not rerender. What am I doing wrong? import React from "react"; import { observable, action } from "mobx"; import { observer, inject, Provider } from "mobx-react"; export class TestStore { @observable timer = 0; @action timerInc = () => { this.timer += 1; }; } interface IPropsTestComp {

How can I access mobx store in another mobx store?

由 你说的曾经没有我的故事 提交于 2020-12-30 08:35:11
问题 Assume following structure stores/ RouterStore.js UserStore.js index.js each of ...Store.js files is a mobx store class containing @observable and @action . index.js just exports all stores, so import router from "./RouterStore"; import user from "./UserStore"; export default { user, router }; What is correct way to access one store inside another? i.e. inside my UserStore, I need to dispatch action from RouterStore when users authentication changes. I tired import store from "./index" inside

How can I access mobx store in another mobx store?

由 假装没事ソ 提交于 2020-12-30 08:34:26
问题 Assume following structure stores/ RouterStore.js UserStore.js index.js each of ...Store.js files is a mobx store class containing @observable and @action . index.js just exports all stores, so import router from "./RouterStore"; import user from "./UserStore"; export default { user, router }; What is correct way to access one store inside another? i.e. inside my UserStore, I need to dispatch action from RouterStore when users authentication changes. I tired import store from "./index" inside

【JS】395-重温基础：事件

由 空扰寡人 提交于 2020-12-13 10:43:16
本文是 重温基础 系列文章的第二十篇。 这是第三个基础系列的第一篇，欢迎持续关注呀！ 重温基础 系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】(http://js.pingan8787.com)的JavaScript基础系列中。 今日感受：电影有时候看的是缘分。 本章节复习的是JS中的事件，事件冒泡捕获代理模拟等等。 前置知识： JavaScript与HTML的交互式通过 事件 来实现的，是文档或浏览器窗口中发生的一些特定的交互瞬间。 1.事件流 事件流描述的是从页面中接收事件的顺序，通常有这样两种完全相反的事件流概念： 事件冒泡流 （IE团队提出）和 事件捕获流 （网景团队提出）。 1.1 事件冒泡 冒泡事件（Event Bubbling）：事件开始时由最具体的元素接收（文档中嵌套层次最深的那个节点），然后逐层向上传播到较为不具体的节点（文档），看下示例代码： <!DOCTYPE html> <html> <head> <title> leo 事件冒泡 </title> </head> <body> <div id = "leo" > 点击 </div> </body> </html> 点击页面中 <div> 元素，这个 click 事件就会按照下面顺序传播： <div> <body> <html> document 由此可见
订阅 mobx