mbox - useObserver vs Observer vs observer

在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;