{"id":510,"date":"2022-11-05T11:43:46","date_gmt":"2022-11-05T03:43:46","guid":{"rendered":"http:\/\/gjweb.top\/?p=510"},"modified":"2022-11-22T21:21:50","modified_gmt":"2022-11-22T13:21:50","slug":"mobx-react%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=510","title":{"rendered":"mobx-react\u4f7f\u7528"},"content":{"rendered":"\n

\u5b89\u88c5<\/h2>\n\n\n\n
yarn add mobx@5 mobx-react@5 -S<\/code><\/pre>\n\n\n\n
\u4f7f\u7528<\/h2>\n\n\n\n
\u521b\u5efa mobx \/ store.js \u7528\u4e8e\u5b58\u653e\u72b6\u6001\u6570\u636e<\/p>\n\n\n\n
import {observable,action} from \"mobx\"
class Store {
    @observable number = 0; \/\/ \u89c2\u5bdf\u5bf9\u8c61
    @action add = ()=>{ \/\/\u4e25\u683c\u6a21\u5f0f\u4e0b\u5b9a\u4e49\u7684\u5bf9\u5916\u66b4\u9732\u7684\u4fee\u6539\u65b9\u6cd5
        this.number = 111
    }    
}
const store = new Store()
export default store<\/code><\/pre>\n\n\n\n
\u521b\u5efa app \u7ec4\u4ef6 (app \u7ec4\u4ef6\u8868\u793a\u7236\u7ec4\u4ef6)<\/p>\n\n\n\n
import React from \"react\"
import ChildA form \".\/childA\"
import ChildB from \".\/childB\"
import store from \".\/mobx\/store.js\"
import {Provider} from \"mobx-react\"
class Index extends React.component{
    render(){
        return (
            <Provider store={store}>
                <div>
                    <ChildA \/>
                    <ChildB \/>
                <\/div>
            <\/Provider>
        )
    }
}
export default Index<\/code><\/pre>\n\n\n\n
\u7c7b\u7ec4\u4ef6\u4e2d\u7684\u4f7f\u7528<\/h3>\n\n\n\n
\u5728\u7ec4\u4ef6\u8c03\u7528 ChildA.jsx \u6a21\u62df\u7c7b\u7ec4\u4ef6\u7684\u4f7f\u7528\u65b9\u5f0f<\/p>\n\n\n\n
\u7ecf\u8fc7\u9ad8\u9636\u51fd\u6570\u7684\u5305\u88c5\u540e, \u539f\u59cb\u7684\u7ec4\u4ef6\u7684 props \u4e2d\u5c31\u643a\u5e26\u4e86 store \u7684\u5bf9\u8c61<\/p>\n\n\n\n
import React from \"react\"
import {inject,observer} from \"mobx-react\"
\u200b
@inject(\"store\")
@observer
class ChildA extends React.component{
    handelClick = ()=>{
        this.props.store.add()
    }
    render(){
        return (
            <div>
                <h2>this is ChildA {this.props.store.number}<\/h2>
                <button onClick={handelClick}>click<\/button>
            <\/div>
        )
    }
}<\/code><\/pre>\n\n\n\n
\u51fd\u6570\u7ec4\u4ef6\u4e2d\u7684\u4f7f\u7528<\/h3>\n\n\n\n
\u5728\u7ec4\u4ef6\u4e2d\u8c03\u7528 ChildB \u4e2d\u4f7f\u7528\u51fd\u6570\u7ec4\u4ef6<\/p>\n\n\n\n
import React from \"react\"
import {observer} from \"mobx-react\"
import store from \".\/mobx\/store\"
const ChildB = ()=>{
    return (
        <div>
            <Observer>
                {
                    ()=>{
                        return (
                            <h2>this is childB {store.name}<\/h2>
                        )
                    }
                }
            <\/Observer>
        <\/div>
    )
}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u51fd\u6570\u7ec4\u4ef6\u4e2d\u7684\u9ad8\u9636\u7ec4\u4ef6\u7528\u6cd5<\/h2>\n\n\n\n
import React from \"react\"\r\nimport {inject,observer} from \"mobx-react\"\r\nconst ChildC = (props)=>{\r\n    const handleClick = ()=>{\r\n       props.store.add()\r\n    }\r\n    return (\r\n    \t<div>\r\n        \t<p>this is ChildC {props.store.number}<\/p>\r\n            <button onClick={()=>handleClick()}>click<\/button>\r\n        <\/div>\r\n    )\r\n}\r\nexport default inject(\"store\")(observer(ChildC))<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5b89\u88c5 \u4f7f\u7528 \u521b\u5efa mobx \/ store.js \u7528\u4e8e\u5b58\u653e\u72b6\u6001\u6570\u636e \u521b\u5efa app \u7ec4\u4ef6 (app \u7ec4\u4ef6\u8868\u793a\u7236\u7ec4 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60],"tags":[],"class_list":["post-510","post","type-post","status-publish","format-standard","hentry","category-mobx"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/510","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=510"}],"version-history":[{"count":2,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/510\/revisions"}],"predecessor-version":[{"id":518,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/510\/revisions\/518"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}