react16.8.0以上MobX在hook中的使用方法詳解

更新時(shí)間：2023年07月12日 10:22:02 作者：Grewer

這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

關(guān)于 mobX 在 react 16.8.0 以上的用法

以下例子均取自官網(wǎng)文檔

一般用法

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 <div onClick={todo.toggle}>  
    <h3>{todo.title} {todo.emoji}</h3>  
 </div>  
})

可以看到原來(lái)的修飾符@observer,現(xiàn)在是使用 HOC 來(lái)進(jìn)行擴(kuò)展的;

修飾方法

1:

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

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

2:

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

使用部分渲染, 只有被 <Observer></Observer> 包裹的才能監(jiān)聽(tīng)到對(duì)應(yīng)值的改變

優(yōu)化,分離,傳值

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 (  
 <div>  
    <button id="inc" onClick={store.inc}>  
    {`Count: ${store.count}`}  
    </button>  
    <span>{store.multiplied}</span>  
 </div>  
 )})

這種分離的方法,基本已經(jīng)耦合性已經(jīng)很低了

2021.3.11 更新

之前 mobx 官方對(duì)于 api 又進(jìn)行了修改,本文也做對(duì)應(yīng)的修改

重要修改: useLocalStore 將要廢棄 !!

使用 useLocalObservable 替代, 而且他們的使用方案也不同:

import { useLocalObservable, Observer } from "mobx-react-lite"
const Todo = () => {
    const todo = useLocalObservable(() => ({
        title: "Test",
        done: true,
        toggle() {
            this.done = !this.done
        }
    }))
    return (
        <Observer>
            {() => (
                <h1 onClick={todo.toggle}>
                    {todo.title} {todo.done ? "[DONE]" : "[TODO]"}
                </h1>
            )}
        </Observer>
    )
}

可直接作為局部或者全局的變量存儲(chǔ)

const user = mobx.observable({
    name: "Noa"
})
const Todo = () => {
    return (
        <Observer>
            {() => (
                <h1>
                   {user.name}
                </h1>
            )}
        </Observer>
    )
}

以上就是react16.8.0以上MobX在hook中的使用方法詳解的詳細(xì)內(nèi)容，更多關(guān)于react MobX hook使用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: