MobX 在 hook 中的使用

关于 mobX 在 react 16.8.0 以上的用法
以下例子均取自官网文档

一般用法:

import { observer, useLocalStore } from 'mobx-react';  
const Hooks = observer(() => {  
 const todo = useLocalStore(() =>  ({  
 title: 'Click to toggle', done: false,  toggle() {  
  todo.done = !todo.done  
  },  
 get emoji() {  
 return todo.done ? '' : ''  
  },  
  }));  
  
 return 
  
    
{todo.title} {todo.emoji}
  
 
  
})  

可以看到原来的修饰符@observer,
现在是使用 HOC 来进行扩展的;

还有另外的 2 种修饰方法:

1:

import { useLocalStore, useObserver } from 'mobx-react';  
function Person() {  
 const person = useLocalStore(() => ({ name: 'John' }))  
 return useObserver(() => (  
 
  
    {person.name}  
     (person.name = 'Mike')}>No! I am Mike  
 
  
 ))}  

使用 useObserver(()=>JSX.Element) 方法取代 observer(()=>JSX.Element)

2:

import { Observer, useLocalStore } from 'mobx-react';  
function ObservePerson() {  
 const person = useLocalStore(() => ({ name: 'John' }))  
 return (  
 
  
    {person.name} I will never change my name  
    
  
        {() => 
{person.name}
}  
         (person.name = 'Mike')}>  
 I want to be Mike    
    
  
 
  
 )}  

使用部分渲染, 只有被 包裹的才能监听到对应值的改变

优化,分离,传值

import React, { FC } from 'react';import { observer, useLocalStore } from 'mobx-react';  
function initialFn(source) {  
 return ({  
 count: 2, get multiplied() {  
 return source.multiplier * this.count  
  },  
  inc() {  
 this.count += 1  },  
  });  
}  
  
const Counter: FC<{ multiplier: number }> = observer(props => {  
  
 const store = useLocalStore(  
  initialFn,  
 Object.assign({ a: 1 }, props),// 可以传任意值  
  );  
  
 return (  
 
  
      
    {`Count: ${store.count}`}  
      
    {store.multiplied}  
 
  
 )})  

这种分离的方法,基本已经耦合性已经很低了