Introduction to MobX
Reference documentation
Official documentation: mobx.js.org/getting-sta…
juejin.cn/post/684490…
Mobx-react 5.x migrate to mobx-react 6.x: mobx-react.js.org/recipes-mig…
Key terms translation:
English | Chinese |
---|---|
observable | That can be viewed |
observer | The observer |
Learn Observables and observers
1. Forget mobx and look at an example
const person = {
name: 'John'.// Getter method, executed when reading the welcomeTip property
get welcomeTip() {
console.log('run get welcomeTip');
return 'Welcome, ' + this.name
},
setName(name) {
this.name = name
}
};
const MobXExam = (a)= > {
return (
<div>
<p>{person.welcomeTip}</p>
<input onBlur={e= > e.target.value && person.setName(e.target.value)} placeholder="change name"/>
<button type="button" onClick={()= > console.log(person.name)}>log person.name</button>
<button type="button" onClick={()= > console.log(person.welcomeTip)}>log person.welcomeTip</button>
</div>)}; export default MobXExam;Copy the code
The interface and operation are as follows:
Conclusion:
The MobXExam component can read and change the Person object;
The DOM in the component is not updated after the person object property is changed;
Transform the example with Observable and Observer
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
const person = observable({
// name...
});
const MobXExam = observer((a)= > {
// return ...
});
export default MobXExam;
Copy the code
The usage is very simple. An Observable is used to wrap the original object, and an Observer is used to wrap the original component. After refreshing the page, we find that “Welcome, John” in the webpage is automatically updated to “Welcome, Tom” after the person object is changed.
Observable and Observer can only be used together, and the absence of either becomes unresponsive.
3. Add an Observable
const person2 = observable({
name: 'John'
});
const MobXExam = observer((a)= > {
return (
<div>
{/*other code*/}
<p>{person2.name}</p>
<input onBlur={e= > e.target.value && (person2.name = e.target.value)} placeholder="change name"/>
</div>)});Copy the code
Conclusion: A single observer can observe multiple Observables.
4. Add an Observer component
const person = observable({ name: 'John' });
const PersonName = observer(() => <p>{person.name}</p>);
const MobXExam = observer(() => {
return (
<div>
<PersonName/>
<p>{person.name}</p>
<input onBlur={e => e.target.value && (person.name = e.target.value)} placeholder="change name"/>
</div>
)
});
Copy the code
Conclusion: Multiple Observers can observe multiple Observables.
Observables are global objects that all components can read. Let’s try creating local observables inside components.
How to use MobX in React Hook components
Create a local observable – useLocalStore
UseLocalStore Hook creates a locally observable store that will remain observable throughout the life of the component.
UseLocalStore is an Observable wrapper. The following two methods work the same
const [person] = useState((a)= > observable({ name: 'John' }));
const person = useLocalStore((a)= > ({ name: 'John' }));
Copy the code
Three observe methods
1. observer HOC
import { useLocalStore, observer } from 'mobx-react-lite';
const MobXExam = observer(() => {
const person = useLocalStore(() => ({
name: 'John',
get welcomeTip() {
console.log('run get welcomeTip');
return 'Welcome, ' + this.name
},
}));
return (
<div>
<p>{person.name}</p>
<p>{person.welcomeTip}</p>
<input onBlur={e => e.target.value && (person.name = e.target.value)} placeholder="change name"/>
</div>
)
});
export default MobXExam;
Copy the code
2. Observer component
import { useLocalStore, Observer } from 'mobx-react-lite';
const MobXExam = (a)= > {
// const person = ...
return (
<div>
<Observer>{() = ><p>{person.name}</p>}</Observer>
<p>{person.welcomeTip}</p>{/ *<input .* /} < /div>)};Copy the code
3. useObserver hook
import { useLocalStore, useObserver } from 'mobx-react-lite';
export const MobXExam = (a)= > {
// const person = ...
return useObserver((a)= >({/*}}));Copy the code
Comparison of three observe methods:
Observer HOC and useObserver hooks rerender the entire component when the data changes;
The Observer Component can render locally.
Old usage of mobx 6.xProvider
and inject
(Understand can be)
import { Provider, inject, observer } from 'mobx-react';
import { observable } from "mobx";
const PersonName = inject('user')(
observer(({ user }) = > {
return (<p>{user.name}</p>); }));function Person() {
return <PersonName/>;
}
function MobXExam() {
const person = observable({ name: 'John' });
const toggleName = (a)= > {
person.name = person.name === 'John' ? 'Tom' : 'John';
};
return (
<div>
<Provider user={person}>
<Person/>
</Provider>
<button type="button" onClick={()= > toggleName()}>Change Name</button>
</div>)}export default MobXExam;
Copy the code
MobXProviderContext
mobx-react@6 Add a Context object. The following example reads the lang property in the common module
import { observer, MobXProviderContext } from 'mobx-react';
import { useContext } from 'react';
function useStores() {
return useContext(MobXProviderContext);
}
const MobXExam = observer((a)= > {
const { common } = useStores();
return (
<div>
common.lang: {common.lang}
</div>)});export default MobXExam;
Copy the code