docs: the-gist-of-mobx.md #1

WanderWang · 2021-02-21T12:33:13Z

No description provided.

vercel · 2021-02-21T12:33:17Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mobx-docs-cn/zh-mobx-js-org/66BVXfdMMYnbwhhmgKCXMvHmeqCw
✅ Preview: https://zh-mobx-js-org-git-fork-wanderwang-patch-1-mobx-docs-cn.vercel.app

iChenLei · 2021-02-21T12:58:51Z

感谢同学的参与，目前翻译流程还未完善，我尽快整理好流程写到README.md中。当前还未确定文档托管在netlify还是vercel平台，正在申请vercel的免费开源项目支持（vercel访问速度比netlify快，体验好一点）。你修改后可以通过preview检查是否有格式展示的问题，我们的文档项目在每次PR提交之后都会自动触发netlify和vercel的构建，生成预览网址。:heart:

WanderWang · 2021-02-21T13:05:41Z

好的，感谢

WanderWang · 2021-02-22T02:12:35Z

@iChenLei 请问在你们调整完翻译的基础设施和流程之前，我是否可以继续完善这个 PR，把 the gist of mobx 这个页面翻译完全？

iChenLei · 2021-02-22T02:30:37Z

@WanderWang 请继续您的工作，直接在Github提PR是我们的核心流程，您的工作可以照常进行。

我所说的是我需要提供一个完整的翻译Guide，这对于想要参与但是不怎么会使用Github同学来说很重要。另外就是我们会提供Mobx电脑贴纸和Mobx6 CheatSheet Paper奖励，这些工作还在进行中。目前zh.mobx.js.org目前还不能访问的原因是，我们正在和vercel官方交涉以确定最终将文档托管在哪个平台。因为我有正式的工作，所以这些事情不能立马完成，但我保证在本周完成所有的事项。最后，非常感谢您的积极参与，特别是在我还没有公开宣传此活动的前提下。

WanderWang · 2021-02-28T01:57:20Z

@iChenLei 这一部分章节已经翻译完，但是也存在一些问题，我相信其他的翻译者也会遇到，我先提出一些：

术语统一，比如 Model -> 业务模型
部分术语是否采用英文，比如 State , Action 等

iChenLei · 2021-02-28T12:45:03Z

@iChenLei 这一部分章节已经翻译完，但是也存在一些问题，我相信其他的翻译者也会遇到，我先提出一些：

术语统一，比如 Model -> 业务模型

部分术语是否采用英文，比如 State , Action 等

确实是一个问题，个人喜欢保留英文，听一下别的同学的意见 cc @BlackHole1 @wangjq4214

wangjq4214 · 2021-02-28T13:21:13Z

这确实一个问题，我觉得像 reaction、Action 之类的确实需要保留，我并不能找到特别贴切的词汇来翻译。

再提出一个问题，我们在格式方面是否需要统一：

比如保留的英文单词、链接的左右两端是否添加空格
保留的单词大小写
括号等使用中文符号还是英文符号
可以在翻译是一行英文对应一行中文，这样比较好校对？

wangjq4214

有一些建议欢迎讨论 @WanderWang @iChenLei

docs/the-gist-of-mobx.md

Neo42 · 2021-03-28T06:46:34Z

docs/the-gist-of-mobx.md

+
+这些计算类似于 Excel 单元格中的公式。它们仅在需要时自动更新。也就是说，如果有观察者使用其结果时才会更新。也就是说，如果有有人关心其结果时才会更新。
+
+#### 3.2. 使用 reaction 对副作用建模


Suggested change

#### 3.2. 使用 reaction 对副作用建模

#### 3.2. 使用 reaction 对副作用进行建模

仅供参考

Neo42 · 2021-03-28T06:53:03Z

docs/the-gist-of-mobx.md

+
+#### 3.2. 使用 reaction 对副作用建模
+
+作为用户，要想在屏幕上看到状态或计算值的变化，就需要一个重新绘制部分GUI的 _reactions_ 。


Suggested change

作为用户，要想在屏幕上看到状态或计算值的变化，就需要一个重新绘制部分GUI的 _reactions_ 。

对你这样的用户来说，想要在屏幕上看到状态或计算值的变化，就需要一个重绘部分 GUI 的 _reaction_ 。

Neo42 · 2021-03-28T07:06:38Z

docs/the-gist-of-mobx.md


-These computations resemble formulas in spreadsheet programs like MS Excel. They update automatically, but only when required. That is, if something is interested in their outcome.
+Reaction 和 computed 类似，但并不产生信息，而是产生副作用，如打印到控制台、发出网络请求、增量更新 React 组件树以便更新DOM等。


Suggested change

Reaction 和 computed 类似，但并不产生信息，而是产生副作用，如打印到控制台、发出网络请求、增量更新 React 组件树以便更新DOM等。

Reactions 和计算值类似，但它们并不生成数据，而是生成副作用，比如打印到控制台、发送网络请求、逐步更新 React 组件树来修补 DOM 等。

仅供参考

Neo42 · 2021-03-28T07:07:52Z

docs/the-gist-of-mobx.md

-When starting with MobX, people tend to overuse reactions.
-The golden rule is, always use `computed` if you want to create a value based on the current state.
+-   _Computed values_,总是可以通过纯函数从当前的可观测 State 中派生。
+-   _Reactions_, 当 State 改变时需要自动运行的副作用 (命令式编程和响应式编程之间的桥梁)


Suggested change

- _Reactions_, 当 State 改变时需要自动运行的副作用 (命令式编程和响应式编程之间的桥梁)

- _Reactions_, 当 State 改变时需要自动运行的副作用 (指令式编程和响应式编程之间的桥梁)

“指令式”上下文一致

Neo42 · 2021-03-28T07:12:04Z

docs/the-gist-of-mobx.md


-Reactions are similar to computed values, but instead of producing information, they produce side effects like printing to the console, making network requests, incrementally updating React component tree to patch the DOM, etc.
+到目前为止，最常用的 reaction 形式是UI组件。
+注意，action 和 reaction 都可能引起副作用。


Suggested change

注意，action 和 reaction 都可能引起副作用。

注意，用 action 和 reaction 都可以触发副作用。

possible

Neo42 · 2021-03-28T07:20:37Z

docs/the-gist-of-mobx.md

-Reactions are similar to computed values, but instead of producing information, they produce side effects like printing to the console, making network requests, incrementally updating React component tree to patch the DOM, etc.
+到目前为止，最常用的 reaction 形式是UI组件。
+注意，action 和 reaction 都可能引起副作用。
+副作用应有一个清晰的、显式的起源，例如在提交表单时发出网络请求，应该从相关的事件处理程序显式触发。


Suggested change

副作用应有一个清晰的、显式的起源，例如在提交表单时发出网络请求，应该从相关的事件处理程序显式触发。

类似在提交表单时发出网络请求这样的、有清晰明确的触发原由的副作用，应该从相关的事件处理程序中显式触发。

"Side effects...should be triggered...from...the event handler."
side effect 后 that... 是定语，修饰 side effect

Neo42 · 2021-03-28T07:30:21Z

docs/the-gist-of-mobx.md


-#### 3.3. Reactive React components
+如果使用 React，你可以将组件用[安装](installation.md#installation)中下载的包中的[`observer`](react-integration.md)函数来包装起来，以便让组件成为响应式的。在这个示例中，我们将用更轻量的 `mobx-react-lite` 包。


Suggested change

如果使用 React，你可以将组件用[安装](installation.md#installation)中下载的包中的[`observer`](react-integration.md)函数来包装起来，以便让组件成为响应式的。在这个示例中，我们将用更轻量的 `mobx-react-lite` 包。

如果你用的是 React，那么你就可以使用你在[安装](installation.md#installation)时所选绑定包中的 `observer` 函数把组件包装起来，把它们变成响应式组件。在这个示例中，我们会使用较为轻量的 `mobx-react-lite` 包。

if you are using：如果你使用的是...
during: 在...时

Neo42 · 2021-03-28T07:40:51Z

docs/the-gist-of-mobx.md

-`observer` converts React components into derivations of the data they render.
-When using MobX there are no smart or dumb components.
-All components render smartly, but are defined in a dumb manner. MobX will simply make sure the components are always re-rendered whenever needed, and never more than that.
+`observer` 将 React 组件转化为了从数据到渲染的派生过程。


Suggested change

`observer` 将 React 组件转化为了从数据到渲染的派生过程。

`observer` 会把 React 组件转化成它们所渲染的数据的 derivations。

如果是“转化成了”的话，应该是“converted into”,一般现在时表示规律性现象：会怎样怎样

Neo42 · 2021-03-28T07:49:28Z

docs/the-gist-of-mobx.md

-When using MobX there are no smart or dumb components.
-All components render smartly, but are defined in a dumb manner. MobX will simply make sure the components are always re-rendered whenever needed, and never more than that.
+`observer` 将 React 组件转化为了从数据到渲染的派生过程。
+当使用 MobX 的时，不存在“智能组件”和“哑巴组件”。所有的组件在渲染时都是智能的，但是在定义时是按照哑巴组件的方式去定义的。MobX会简单确定这个组件是否需要进行重绘，并止步于此。


Suggested change

当使用 MobX 的时，不存在“智能组件”和“哑巴组件”。所有的组件在渲染时都是智能的，但是在定义时是按照哑巴组件的方式去定义的。MobX会简单确定这个组件是否需要进行重绘，并止步于此。

在使用 MobX 时，不存在智能组件或者傻瓜组件。所有的组件都是智能渲染的，但却是以一种傻瓜式的方式被定义出来的。MobX 只是会确保组件始终在需要时被重新渲染，除此之外都不会被重新渲染。

dumb 是不智能的意思，跟 smart 对比，我是按“傻瓜相机”的译法来的

Neo42 · 2021-03-28T08:01:31Z

docs/the-gist-of-mobx.md


-So the `onClick` handler in the above example will force the proper `TodoView` component to re-render as it uses the `toggle` action, but will only cause the `TodoListView` component to re-render if the number of unfinished tasks has changed.
-And if you would remove the `Tasks left` line (or put it into a separate component), the `TodoListView` component would no longer re-render when ticking a task.
+因此，上述示例中的`onClick`事件处理器调用`toggle` Action 后，会使对应的`TodoView`组件重绘，但仅当未完成任务的数量发生更改时才会使 `TodoListView` 组件重绘。


Suggested change

因此，上述示例中的`onClick`事件处理器调用`toggle` Action 后，会使对应的`TodoView`组件重绘，但仅当未完成任务的数量发生更改时才会使 `TodoListView` 组件重绘。

因此，在上述示例中，随着 `onClick`事件处理程序对 `toggle` action 进行调用，它会迫使相应的 `TodoView` 组件重新渲染，但只有在未完成任务的数量发生更改后，它才会使 `TodoListView` 组件重新渲染。

as 随着
force 迫使
rerender 重新渲染（repaint 重绘）
有一部分改了下风格，仅供参考

Neo42 · 2021-03-28T08:44:07Z

docs/the-gist-of-mobx.md


-To learn more about how React works with MobX, check out the [React integration](react-integration.md) section.
+如果移除了`Tasks left`这行代码（或者把他拆分到另一个组件中）,`TodoListView`组件就不再 `toggle` 执行时产生重绘了。


Suggested change

如果移除了`Tasks left`这行代码（或者把他拆分到另一个组件中）,`TodoListView`组件就不再 `toggle` 执行时产生重绘了。

假如你移除 `Tasks left` 这行代码（或者把它放到另外一个组件中），`TodoListView` 组件就不会在划掉一个待办任务时重新渲染了。

if you would 虚拟语气，假如你
它
tick 划掉

Neo42 · 2021-03-28T09:41:29Z

docs/the-gist-of-mobx.md


-#### 3.4. Custom reactions
+您可以查阅[与 React 集成](react-integration.md)来了解更多有关 React 是如何与 MobX 协同运作的。


Suggested change

您可以查阅[与 React 集成](react-integration.md)来了解更多有关 React 是如何与 MobX 协同运作的。

您可以查阅[与 React 集成](react-integration.md)章节来了解更多有关怎样合用 React 与 Mobx 的内容。

work with: 使用（工具、材料）

Neo42 · 2021-03-28T09:49:57Z

docs/the-gist-of-mobx.md

+
+#### 3.4. 自定义 Reaction
+
+通常情况下你不需要使用它们，可以使用 [`autorun`](reactions.md#autorun) ,[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 方法来订制你的特殊业务场景。


Suggested change

通常情况下你不需要使用它们，可以使用 [`autorun`](reactions.md#autorun) ,[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 方法来订制你的特殊业务场景。

你很少会用到它们，不过它们可以由你根据具体情况，使用 [`autorun`](reactions.md#autorun)、[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 函数创建出来。

Neo42 · 2021-03-28T10:08:13Z

docs/the-gist-of-mobx.md

 autorun(() => {
    console.log("Tasks left: " + todos.unfinishedTodoCount)
 })
 ```

-Why does a new message get printed every time the `unfinishedTodoCount` is changed? The answer is this rule of thumb:
+为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是以下法则：


Suggested change

为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是以下法则：

为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是这个经验法则：

仅供参考

Neo42 · 2021-03-28T10:13:24Z

docs/the-gist-of-mobx.md

-Why does a new message get printed every time the `unfinishedTodoCount` is changed? The answer is this rule of thumb:
+为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是以下法则：
+
+_MobX对在执行跟踪函数期间读取的任何现有可观察属性作出响应_。


Suggested change

_MobX对在执行跟踪函数期间读取的任何现有可观察属性作出响应_。

_Mobx 会在一个被追踪的函数执行期间，对所有被读取的可观察属性作出反应_。

换下句式更通顺，仅供参考

Neo42 · 2021-03-28T10:17:48Z

docs/the-gist-of-mobx.md


-_MobX reacts to any existing observable property that is read during the execution of a tracked function._
+要了解更多关于MobX如何确定需要对哪些可观察对象作出响应的信息，请查看 [理解反应](understanding-reactivity.md) 章节。


Suggested change

要了解更多关于MobX如何确定需要对哪些可观察对象作出响应的信息，请查看 [理解反应](understanding-reactivity.md) 章节。

要了解更多关于MobX如何确定需要对哪些可观察对象作出响应的信息，请查看 [理解响应性](understanding-reactivity.md) 章节。

如果是反应，那应该是 reaction

Neo42 · 2021-03-28T10:29:48Z

docs/the-gist-of-mobx.md


-## Linting
+如果您发现很难适应 MobX 的心智模型，请将其配置为严格模式，在运行时偏离这些模式的情况下将会发出警告。更多信息请查看[linting MobX](configuration.md#linting-options)章节。


Suggested change

如果您发现很难适应 MobX 的心智模型，请将其配置为严格模式，在运行时偏离这些模式的情况下将会发出警告。更多信息请查看[linting MobX](configuration.md#linting-options)章节。

如果你觉得很难适应 MobX 的心智模型，就请把它配置得非常严格，这样每当你背离了这些模式，它就会在运行时向你发出警告。更多信息请查看[Linting MobX](configuration.md#linting-options)章节。

find hard to... 觉得很难...
whenever 每当
linting 可以保留英文

Neo42 · 2021-03-28T10:39:44Z

docs/the-gist-of-mobx.md


-## Principles
+Mobx 使用单向数据流，利用 _action_ 改变 _state_ ，进而更新所有受影响的 _view_


Suggested change

Mobx 使用单向数据流，利用 _action_ 改变 _state_ ，进而更新所有受影响的 _view_

Mobx 使用单向数据流，利用 _action_ 改变 _state_ ，进而更新所有受影响的 _视图_

Neo42 · 2021-03-28T10:53:48Z

docs/the-gist-of-mobx.md


 ![Action, State, View](assets/action-state-view.png)

-1. All _derivations_ are updated **automatically** and **atomically** when the _state_ changes. As a result, it is never possible to observe intermediate values.
+1. 所有的 _derivations_ 将在 _state_ 改变时**自动且原子化地更新**。因此不可能观察中间值。


Suggested change

1. 所有的 _derivations_ 将在 _state_ 改变时**自动且原子化地更新**。因此不可能观察中间值。

1. 所有 _derivations_ 都将在 _state_ 改变时**自动且原子化地更新**。因此永远无法观察到中间值。

possible 同上文

Neo42 · 2021-03-28T11:02:23Z

docs/the-gist-of-mobx.md


 ![Action, State, View](assets/action-state-view.png)

-1. All _derivations_ are updated **automatically** and **atomically** when the _state_ changes. As a result, it is never possible to observe intermediate values.
+1. 所有的 _derivations_ 将在 _state_ 改变时**自动且原子化地更新**。因此不可能观察中间值。
+2. 所有的 _dervations_ 默认将会**同步**更新，这意味着 _action_ 可以在 _state_ 改变 之后安全的直接获得 computed 值。


Suggested change

2. 所有的 _dervations_ 默认将会**同步**更新，这意味着 _action_ 可以在 _state_ 改变之后安全的直接获得 computed 值。

2. 所有 _dervations_ 都是默认**同步**更新的，这意味着——比方说—— _action_ 在更改 _state_ 之后就可以安全直接地查到 computed 值。

仅供参考

Neo42 · 2021-03-28T11:07:01Z

docs/the-gist-of-mobx.md


-2. All _derivations_ are updated **synchronously** by default. This means that, for example, _actions_ can safely inspect a computed value directly after altering the _state_.
+想了解更多背景，请查阅 [MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)


Suggested change

想了解更多背景，请查阅 [MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)

想了解更多背景内容，请查阅[MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)。

仅供参考

Neo42 · 2021-03-28T11:18:32Z

docs/the-gist-of-mobx.md

-1. All _derivations_ are updated **automatically** and **atomically** when the _state_ changes. As a result, it is never possible to observe intermediate values.
+1. 所有的 _derivations_ 将在 _state_ 改变时**自动且原子化地更新**。因此不可能观察中间值。
+2. 所有的 _dervations_ 默认将会**同步**更新，这意味着 _action_ 可以在 _state_ 改变 之后安全的直接获得 computed 值。
+3. _computed value_ 的更新是**惰性**的，任何 computed value 在需要他们的副作用发生之前都是不激活的。


Suggested change

3. _computed value_ 的更新是**惰性**的，任何 computed value 在需要他们的副作用发生之前都是不激活的。

3. _computed value_ 的更新是**惰性**的，所有不在使用中的 computed value 都只在有副作用需要它们时才会被更新。如果有一个视图被停止使用了，那么它将会被自动垃圾收集。

这一句意译的有点片面。。
它

Neo42 · 2021-03-28T11:23:08Z

docs/the-gist-of-mobx.md

+1. 所有的 _derivations_ 将在 _state_ 改变时**自动且原子化地更新**。因此不可能观察中间值。
+2. 所有的 _dervations_ 默认将会**同步**更新，这意味着 _action_ 可以在 _state_ 改变 之后安全的直接获得 computed 值。
+3. _computed value_ 的更新是**惰性**的，任何 computed value 在需要他们的副作用发生之前都是不激活的。
+4. 所有的 _computed value_ 都应是**纯函数**,他们不应该修改 _state_。


Suggested change

4. 所有的 _computed value_ 都应是**纯函数**,他们不应该修改 _state_。

4. 所有的 _computed value_ 都应该是**纯函数**，它们不应该修改 _state_。

前后两个应该最好一致
它

Neo42 · 2021-03-28T11:30:19Z

docs/the-gist-of-mobx.md


-You can play with the above examples yourself on [CodeSandbox](https://codesandbox.io/s/concepts-principles-il8lt?file=/src/index.js:1161-1252).
+## 提示


Suggested change

## 提示

## 代码检查

如果是 hint，可以翻译成提示。
lint 也可以保留英文

WanderWang · 2021-04-06T03:12:55Z

@Neo42 前段时间一直在忙，感谢你的校对，这一部分内容我会在今晚完善。

Neo42 · 2021-04-06T14:07:25Z

@WanderWang 实在抱歉，你的这篇是我校对的第一篇，当时还没掌握方法，多有冒犯，请见谅😅。建议改动的都已经写明理由，风格方面的建议仅供参考~

Update the-gist-of-mobx.md

414d3d1

vercel bot deployed to Preview February 21, 2021 12:33 View deployment

Update the-gist-of-mobx.md

c8a22d7

vercel bot deployed to Preview February 21, 2021 12:38 View deployment

iChenLei added the 翻译中文档正在翻译中 label Feb 21, 2021

Update the-gist-of-mobx.md

a2c96ed

vercel bot deployed to Preview February 21, 2021 13:01 View deployment

update docs

a310627

vercel bot deployed to Preview February 23, 2021 12:43 View deployment

update docs

c305c4e

vercel bot deployed to Preview February 25, 2021 13:23 View deployment

update docs

f88c10b

vercel bot deployed to Preview February 27, 2021 01:39 View deployment

iChenLei changed the title ~~Update the-gist-of-mobx.md~~ docs: the-gist-of-mobx.md Feb 27, 2021

WanderWang mentioned this pull request Feb 28, 2021

Mobx中文文档讨论专用issue #35

Open

Update the-gist-of-mobx.md

531e0f3

vercel bot deployed to Preview February 28, 2021 01:33 View deployment

iChenLei mentioned this pull request Feb 28, 2021

docs: the-gist-of-mobx.md #39

Closed

iChenLei added 校对中文档翻译完成，需要至少一个同学进行review校对 and removed 翻译中文档正在翻译中 labels Feb 28, 2021

wangjq4214 reviewed Mar 2, 2021

View reviewed changes

Update the-gist-of-mobx.md

2a9b771

Neo42 reviewed Mar 28, 2021

View reviewed changes

iChenLei mentioned this pull request Jul 4, 2021

doc: The gist of MobX #93

Closed

iChenLei mentioned this pull request Jul 28, 2021

翻译「the gist of mobx」 #107

Closed

iChenLei merged commit a908634 into mobxjs:main Aug 21, 2021

TechQuery mentioned this pull request Jan 2, 2024

[add] Decorators translation #150

Closed


		这些计算类似于 Excel 单元格中的公式。它们仅在需要时自动更新。也就是说，如果有观察者使用其结果时才会更新。也就是说，如果有有人关心其结果时才会更新。

		#### 3.2. 使用 reaction 对副作用建模

	#### 3.2. 使用 reaction 对副作用建模
	#### 3.2. 使用 reaction 对副作用进行建模


		#### 3.2. 使用 reaction 对副作用建模

		作为用户，要想在屏幕上看到状态或计算值的变化，就需要一个重新绘制部分GUI的 _reactions_ 。

	作为用户，要想在屏幕上看到状态或计算值的变化，就需要一个重新绘制部分GUI的 _reactions_ 。
	对你这样的用户来说，想要在屏幕上看到状态或计算值的变化，就需要一个重绘部分 GUI 的 _reaction_ 。


		These computations resemble formulas in spreadsheet programs like MS Excel. They update automatically, but only when required. That is, if something is interested in their outcome.
		Reaction 和 computed 类似，但并不产生信息，而是产生副作用，如打印到控制台、发出网络请求、增量更新 React 组件树以便更新DOM等。

	Reaction 和 computed 类似，但并不产生信息，而是产生副作用，如打印到控制台、发出网络请求、增量更新 React 组件树以便更新DOM等。
	Reactions 和计算值类似，但它们并不生成数据，而是生成副作用，比如打印到控制台、发送网络请求、逐步更新 React 组件树来修补 DOM 等。

	- _Reactions_, 当 State 改变时需要自动运行的副作用 (命令式编程和响应式编程之间的桥梁)
	- _Reactions_, 当 State 改变时需要自动运行的副作用 (指令式编程和响应式编程之间的桥梁)

	注意，action 和 reaction 都可能引起副作用。
	注意，用 action 和 reaction 都可以触发副作用。

	副作用应有一个清晰的、显式的起源，例如在提交表单时发出网络请求，应该从相关的事件处理程序显式触发。
	类似在提交表单时发出网络请求这样的、有清晰明确的触发原由的副作用，应该从相关的事件处理程序中显式触发。


		#### 3.3. Reactive React components
		如果使用 React，你可以将组件用[安装](installation.md#installation)中下载的包中的[`observer`](react-integration.md)函数来包装起来，以便让组件成为响应式的。在这个示例中，我们将用更轻量的 `mobx-react-lite` 包。

	如果使用 React，你可以将组件用[安装](installation.md#installation)中下载的包中的[`observer`](react-integration.md)函数来包装起来，以便让组件成为响应式的。在这个示例中，我们将用更轻量的 `mobx-react-lite` 包。
	如果你用的是 React，那么你就可以使用你在[安装](installation.md#installation)时所选绑定包中的 `observer` 函数把组件包装起来，把它们变成响应式组件。在这个示例中，我们会使用较为轻量的 `mobx-react-lite` 包。

	`observer` 将 React 组件转化为了从数据到渲染的派生过程。
	`observer` 会把 React 组件转化成它们所渲染的数据的 derivations。

	当使用 MobX 的时，不存在“智能组件”和“哑巴组件”。所有的组件在渲染时都是智能的，但是在定义时是按照哑巴组件的方式去定义的。MobX会简单确定这个组件是否需要进行重绘，并止步于此。
	在使用 MobX 时，不存在智能组件或者傻瓜组件。所有的组件都是智能渲染的，但却是以一种傻瓜式的方式被定义出来的。MobX 只是会确保组件始终在需要时被重新渲染，除此之外都不会被重新渲染。

	因此，上述示例中的`onClick`事件处理器调用`toggle` Action 后，会使对应的`TodoView`组件重绘，但仅当未完成任务的数量发生更改时才会使 `TodoListView` 组件重绘。
	因此，在上述示例中，随着 `onClick`事件处理程序对 `toggle` action 进行调用，它会迫使相应的 `TodoView` 组件重新渲染，但只有在未完成任务的数量发生更改后，它才会使 `TodoListView` 组件重新渲染。


		To learn more about how React works with MobX, check out the [React integration](react-integration.md) section.
		如果移除了`Tasks left`这行代码（或者把他拆分到另一个组件中）,`TodoListView`组件就不再 `toggle` 执行时产生重绘了。

	如果移除了`Tasks left`这行代码（或者把他拆分到另一个组件中）,`TodoListView`组件就不再 `toggle` 执行时产生重绘了。
	假如你移除 `Tasks left` 这行代码（或者把它放到另外一个组件中），`TodoListView` 组件就不会在划掉一个待办任务时重新渲染了。


		#### 3.4. Custom reactions
		您可以查阅[与 React 集成](react-integration.md)来了解更多有关 React 是如何与 MobX 协同运作的。

	您可以查阅[与 React 集成](react-integration.md)来了解更多有关 React 是如何与 MobX 协同运作的。
	您可以查阅[与 React 集成](react-integration.md)章节来了解更多有关怎样合用 React 与 Mobx 的内容。


		#### 3.4. 自定义 Reaction

		通常情况下你不需要使用它们，可以使用 [`autorun`](reactions.md#autorun) ,[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 方法来订制你的特殊业务场景。

	通常情况下你不需要使用它们，可以使用 [`autorun`](reactions.md#autorun) ,[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 方法来订制你的特殊业务场景。
	你很少会用到它们，不过它们可以由你根据具体情况，使用 [`autorun`](reactions.md#autorun)、[`reaction`](reactions.md#reaction) 或 [`when`](reactions.md#when) 函数创建出来。

docs: the-gist-of-mobx.md #1

docs: the-gist-of-mobx.md #1

Conversation

WanderWang commented Feb 21, 2021

vercel bot commented Feb 21, 2021 • edited Loading

iChenLei commented Feb 21, 2021 • edited Loading

WanderWang commented Feb 21, 2021

WanderWang commented Feb 22, 2021

iChenLei commented Feb 22, 2021 • edited Loading

WanderWang commented Feb 28, 2021

iChenLei commented Feb 28, 2021

wangjq4214 commented Feb 28, 2021 • edited Loading

wangjq4214 left a comment • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

Neo42 Mar 28, 2021 • edited Loading

Choose a reason for hiding this comment

WanderWang commented Apr 6, 2021

Neo42 commented Apr 6, 2021

vercel bot commented Feb 21, 2021 •

edited

Loading

iChenLei commented Feb 21, 2021 •

edited

Loading

iChenLei commented Feb 22, 2021 •

edited

Loading

wangjq4214 commented Feb 28, 2021 •

edited

Loading

wangjq4214 left a comment •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

Neo42 Mar 28, 2021 •

edited

Loading

	为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是以下法则：
	为什么每次 `unfinishedTodoCount`发生改变时都会输出日志信息呢？答案是这个经验法则：

	_MobX对在执行跟踪函数期间读取的任何现有可观察属性作出响应_。
	_Mobx 会在一个被追踪的函数执行期间，对所有被读取的可观察属性作出反应_。


		_MobX reacts to any existing observable property that is read during the execution of a tracked function._
		要了解更多关于MobX如何确定需要对哪些可观察对象作出响应的信息，请查看 [理解反应](understanding-reactivity.md) 章节。


		## Linting
		如果您发现很难适应 MobX 的心智模型，请将其配置为严格模式，在运行时偏离这些模式的情况下将会发出警告。更多信息请查看[linting MobX](configuration.md#linting-options)章节。

	如果您发现很难适应 MobX 的心智模型，请将其配置为严格模式，在运行时偏离这些模式的情况下将会发出警告。更多信息请查看[linting MobX](configuration.md#linting-options)章节。
	如果你觉得很难适应 MobX 的心智模型，就请把它配置得非常严格，这样每当你背离了这些模式，它就会在运行时向你发出警告。更多信息请查看[Linting MobX](configuration.md#linting-options)章节。


		## Principles
		Mobx 使用单向数据流，利用 _action_ 改变 _state_ ，进而更新所有受影响的 _view_

	1. 所有的 _derivations_ 将在 _state_ 改变时自动且原子化地更新。因此不可能观察中间值。
	1. 所有 _derivations_ 都将在 _state_ 改变时自动且原子化地更新。因此永远无法观察到中间值。

	2. 所有的 _dervations_ 默认将会同步更新，这意味着 _action_ 可以在 _state_ 改变之后安全的直接获得 computed 值。
	2. 所有 _dervations_ 都是默认同步更新的，这意味着——比方说—— _action_ 在更改 _state_ 之后就可以安全直接地查到 computed 值。


		2. All _derivations_ are updated synchronously by default. This means that, for example, _actions_ can safely inspect a computed value directly after altering the _state_.
		想了解更多背景，请查阅 [MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)

	想了解更多背景，请查阅 [MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)
	想了解更多背景内容，请查阅[MobX背后的基本原则](https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8)。