在mobx里面有3种方法去做observe：useObserver，Observer，observer。这三种方法的目的都是一样的，但是在使用场景和具体表现上还是有一些差别。下文就来探讨一下。
1： useObserver
//使用useObserver
import * as React from "react";
import {useObserver, useLocalStore} from 'mobx-react-lite' // 6.x or mobx-react-lite@1.4.0
function Person() {
console.log('in useObserver');
const person = useLocalStore(() => ({name: 'John'}))
return useObserver(() => (
<div>
{person.name}
<button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
</div>
))
}
export default Person;
虽然只是在返回DOM的地方使用useObserver( ), 但是，当person.name改变的时候，整个component，也就是Person(){}都会重新render。但是，<Observer>就不一样，下面看一个例子：
Observer
//使用<Observer></Observer>
import * as React from "react";
import {Observer, useLocalStore} from 'mobx-react-lite' // 6.x or mobx-react-lite@1.4.0
export default function ObservePerson() {
console.log('in Observer');
const person = useLocalStore(() => ({name: 'John'}))
return (
<div>
The old name is: {person.name}
<div>
<Observer>{() => <div>{person.name}</div>}</Observer>
<button onClick={() => (person.name = 'Mike')}>
I want to be Mike
</button>
</div>
</div>
)
}
在这个例子里，我们有2个地方显示person.name, 但是这2处的区别是第二处使用了<Observer></Observer>去包裹。当我们点击按钮，从而使得person.name发生改变的时候，会有3点表现从而来体现了<Observer></Observer>的特性。这三点表现就是：
1：整个component不会重新render
2：第一处{person.name}不会改变，页面上依然显示'John'
3: 第二处<Observer>{() => <div>{person.name}</div>}</Observer>会改变，页面上显示'Mike
从这里我们就可以看出来<Observer></Observer>可以使你更精细地控制你希望重新render的component。
observer
observer用来observe一个HOC（high order component）。看一下语法：
observer<P>(baseComponent: React.FC<P>, options?: IObserverOptions): React.FC<P>
看一个实际的例子：
//observer
import * as React from "react";
import {observer, useLocalStore} from 'mobx-react-lite' // 6.x or mobx-react-lite@1.4.0
const ObserverLowercasePerson: React.FC<any> = observer(() => {
const person = useLocalStore(() => ({name: 'John'}));
return (
<div>
<div>The name is: {person.name}</div>
<button onClick={() => (person.name = 'Mike')}>
Change name
</button>
</div>
)
})
export default ObserverLowercasePerson;
