mobx探究（二）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

主要讲mobx的react方向上的应用，粗略认识一下，它是一个简单，可扩展的状态管理

文档： github.com/mobxjs/mobx…

zh.mobx.js.org/react-integ…

observer

在函数或者类组件里，需要用这个来观察，才能让更改观察元素生效，更改数据时响应式更新

import { observer } from "mobx-react"
// 1---- ESNext syntax with decorator syntax enabled ----
@observer
class TodoView extends React.Component {
    render() {
        return <div>{store.todo.title}</div>
    }
}

// 2---- or just use function components: ----
const TodoView = observer(({ store }) => <div>{store.title}</div>)
// 3 不需要重渲染整个组件
class App extends React.Component {
    render() {
        return (
            <div>
                {this.props.person.name}
                <Observer>{() => <div>{this.props.person.name}</div>}</Observer>
            </div>
        )
    }
}

useLocalObservable

如果要组件共享就不要这个，只在一个组件里用的可以用这个

局部可观察对象，返回对象属性可观察，getter自动转计算属性，方法自动绑定和应用事务

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>
    )
}

例子 用户登陆退出

# user/index.js
import {makeAutoObservable} from 'mobx'
class UserStore {
    username = ''
    constructor() {
        makeAutoObservable(this,{},{autoBind:true})
    }
    get isLogin() {
        return this.username !== ''
    }
    login(username){
        this.username = username
    }
    logout(){
        this.username = ''
    }
}
const userStore = new UserStore()
export default userStore
# context.js
import React from 'react'
const StoreContext = React.createContext()
export default StoreContext
# App.js
import StoreContext from './context'
const App=()=>{
    <StoreContext.provider value = {store}>
        <User/>
    </StoreContext.provider>
}
# User.jsx
import {useContext} from 'react'
import StoreContext from './context'
const User = observer(()=>{
    // 拿到user对象
	const {userStore} = useContext(StoreContext)
	const ref = useRef(null)
	return (
		<div>
		{
			userStore.isLogin?(
				<>{userStore.username}<button onClick={userStore.logout}>退出</button></>
			):(
				<input ref={ref}/>
				<><button onClick={()=>userStore.login(ref.current.value)}>登陆</button></>
			)
		}	
		</div>
	)
})

代理对象属性值缓存

如果想要得到观察的代理对象里的某个属性值，且不要变动

基础类型可以直接解构赋值新变量存储，如果是复杂的，可以用toJS

。。。 内容比较少，但实际上简单的应用可以参考例子就行了，如果想深入，文档里有优化的内容，下一期讲源码实现