Skip to content

Commit fc5d1be

Browse files
mweststratemweststrate
committed
Small improvements
1 parent 575366c commit fc5d1be

5 files changed

Lines changed: 38 additions & 3 deletions

File tree

‎docs/best/syntax.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,4 @@ but it will also cause the `button` (or any other component) to be always re-ren
125125
Decorators are not supported by default when using TypeScript or Babel pending a definitive definition in the ES standard.
126126
* For _typescript_, enable the `--experimentalDecorators` compiler flag or set the compiler option `experimentalDecorators` to `true` in `tsconfig.json` (Recommended)
127127
* For _babel5_, make sure `--stage 0` is passed to the Babel CLI
128-
* For _babel6_, see the example configuration as suggested in this [issue](https://github.com/mobxjs/mobx/issues/105)
128+
* For _babel6_, see the example configuration as suggested in this [issue](https://github.com/mobxjs/mobx/issues/105). In short, use the transform plugin `transform-decorators-legacy` and make sure it is first in the plugins list!

‎docs/refguide/modifiers.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,17 @@ will return the same dimensions after each run. `asStructure` signals to MobX th
9292
if the value returned by the computed has _structurally_ changed (by default strict equality is used to determine whether observers need to be notified).
9393
This means that a new object that is returned from `viewPortSize` won't trigger a `render` if its contents are (structurally) the same as the previous value.
9494
95+
To use the `asStructure` modifier in combination with the `@computed` decorator, use the following:
96+
97+
```javascript
98+
@computed({ asStructure: true }) get viewPortSize() {
99+
return {
100+
width: Math.max(screenSize.width, minSize.width),
101+
height: Math.max(screenSize.height, minSize.height)
102+
}
103+
}
104+
```
105+
95106
## asFlat
96107
97108
Similar to `asReference`, except that `asFlat` does not prevent its value to become observable, but only the children of the value.

‎docs/refguide/observable-decorator.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @observable
22

3-
Decorator that can be used on ES6 or TypeScript class properties to make them observable.
3+
Decorator that can be used on ES7- or TypeScript class properties to make them observable.
44
The @observable can be used on instance fields and property getters.
55
This offers fine-grained control on which parts of your object become observable.
66

‎docs/refguide/observer-component.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,30 @@ This behavior is similar to [React PureRender mixin](https://facebook.github.io/
8686
If a component provides its own `shouldComponentUpdate`, that one takes precedence.
8787
See for an explanation this [github issue](https://github.com/mobxjs/mobx/issues/101)
8888

89+
## `componentWillReact` (lifecycle hook)
90+
91+
React components usually render on a fresh stack, so that makes it often hard to figure out what _caused_ a component to re-render.
92+
When using `mobx-react` you can define a new life cycle hook, `componentWillReact` (pun intended) that will be triggered when a component will be scheduled to re-render because
93+
data it observes has changed. This makes it easy to trace renders back to the action that caused the rendering.
94+
95+
```javascript
96+
import {observer} from "mobx-react";
97+
98+
@observer class TodoView extends React.Component {
99+
componentWillReact() {
100+
console.log("I will re-render, since the todo has changed!");
101+
}
102+
103+
render() {
104+
return <div>this.props.todo.title</div>
105+
}
106+
}
107+
```
108+
109+
* `componentWillReact` doesn't take arguments
110+
* `componentWillReact` won't fire before the initial render (use `componentWillMount` instead)
111+
* `componentWillReact` won't fire when receiving new props or after `setState` calls (use `componentWillUpdate` instead)
112+
89113
## Optimizing components
90114

91115
See the relevant [section](../best/react-performance.md).

‎getting-started.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h2 id="project_tagline" style="font-size: 18pt">Ten minute introduction to MobX
4343
<h3>The core idea</h3>
4444
<p>
4545
State is the heart of each application and there is no quicker way to create buggy, unmanageable applications than by
46-
producing inconsistent state. Or state that is inconsistent, with local variables that linger around.
46+
producing inconsistent state. Or state that is out-of-sync with local variables that linger around.
4747
Hence many state management solutions try to restrict the ways in which you can modify state, for example by making state immutable.
4848
But this introduces new problems; data needs to be normalized, referential integrity can no longer be guaranteed and it becomes next to impossible to use powerful concepts like prototypes.
4949
</p><p>

0 commit comments

Comments
 (0)