mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
27 lines
1.4 KiB
Markdown
27 lines
1.4 KiB
Markdown
# Working with MobX
|
|
|
|
## Introduction
|
|
|
|
Lens uses MobX on top of React's state management system.
|
|
The result is a more declarative state management style, rather than React's native `setState` mechanism.
|
|
|
|
You can review how React handles state management [here](https://reactjs.org/docs/faq-state.html).
|
|
|
|
The following is a quick overview:
|
|
|
|
* `React.Component` is generic with respect to both `props` and `state` (which default to the empty object type).
|
|
* `props` should be considered read-only from the point of view of the component, and it is the mechanism for passing in arguments to a component.
|
|
* `state` is a component's internal state, and can be read by accessing the super-class field `state`.
|
|
* `state` **must** be updated using the `setState` parent method which merges the new data with the old state.
|
|
* React does some optimizations around re-rendering components after quick successions of `setState` calls.
|
|
|
|
## How MobX Works:
|
|
|
|
MobX is a package that provides an abstraction over React's state management system. The three main concepts are:
|
|
|
|
* `observable` is a marker for data stored in the component's `state`.
|
|
* `action` is a function that modifies any `observable` data.
|
|
* `computed` is a marker for data that is derived from `observable` data, but that is not actually stored. Think of this as computing `isEmpty` rather than an observable field called `count`.
|
|
|
|
Further reading is available on the [MobX website](https://mobx.js.org/the-gist-of-mobx.html).
|