\u5b89\u88c5<\/p>\n\n\n\n
yarn add mobx
yarn add mobx-react
yarn add babel-plugin-transform-decorators-legacy -D
yarn add @babel\/preset-env -D
yarn add babel-plugin-transform-class-properties -D
yarn add @babel\/plugin-proposal-decorators -D<\/code><\/pre>\n\n\n\nreact\u914d\u7f6e\u6587\u4ef6\u62bd\u79bb (\u5728\u5206\u79bb\u524d\u8981commit\u672c\u5730\u7684\u4ee3\u7801)<\/p>\n\n\n\n
yarn eject<\/code><\/pre>\n\n\n\n\u914d\u7f6e package.json \u6587\u4ef6<\/p>\n\n\n\n
\"babel\": {
\"plugins\": [
[
\"@babel\/plugin-proposal-decorators\",
{
\"legacy\": true
}
],
\"transform-class-properties\"
],
\"presets\": [
\"react-app\",
\"@babel\/preset-env\"
]
},<\/code><\/pre>\n\n\n\n\u4f7f\u7528<\/h3>\n\n\n\n
\u6a21\u5757\u5316\u72b6\u6001\u6587\u4ef6 auth.js<\/p>\n\n\n\n
import {makeObservable ,observable ,action} from \"mobx\"
class AuthStore {
\/\/ \u521d\u59cb\u5316\u72b6\u6001\u503c
@observable values = {
username:\"\",
password:\"\"
}
\/\/ \u4fee\u6539\u72b6\u6001\u503c
@action setIsUsername(username){
this.values.username = username
}
@action setIsPassword(password){
this.values.password = password
}
\/\/ mobx5.0\u4ee5\u4e0a\u7248\u672c\u6dfb\u52a0\u6784\u9020\u51fd\u6570
constructor(){
makeObservable(this)
}
}
export default AuthStore<\/code><\/pre>\n\n\n\n\u521b\u5efa\u7edf\u4e00\u5bfc\u51fa\u5165\u53e3 index.js<\/p>\n\n\n\n
import React,{createContext,useContext} from \"react\"
import AuthStore from \".\/auth\"
\u200b
const context = createContext({
AuthStore: new AuthStore()
})
export const useStore = ()=>useContext(context)<\/code><\/pre>\n\n\n\n\u5728\u51fd\u6570\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/p>\n\n\n\n
import React, { useRef } from \"react\";
import { observer } from \"mobx-react\";
import { useStore } from \"..\/stores\/index\";
const Component = observer(() => {
const { AuthStore } = useStore();
const inputRef = useRef();
const handelChange = () => {
AuthStore.setIsUsername(inputRef.current.value)
};
return (
<>
<div>Login:{AuthStore.values.username}<\/div>
<input type=\"text\" onChange={handelChange} ref={inputRef} \/>
<\/>
);
});
export default Component;<\/code><\/pre>\n\n\n\n
\n\n\n\n\u8def\u7531\u914d\u7f6e<\/h2>\n\n\n\n
index.js\u6587\u4ef6\u4e2d<\/p>\n\n\n\n
import React from 'react';
import ReactDOM from 'react-dom\/client';
import App from '.\/App';
import {
BrowserRouter
} from \"react-router-dom\"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App \/>
<\/BrowserRouter>
<\/React.StrictMode>
);<\/code><\/pre>\n\n\n\napp.js\u6587\u4ef6– \u6ce8\u610f\u7248\u672c\u4e0d\u540c react18.0 \u4e2d\u7684 element\u5c5e\u6027\u63a5\u53d7\u7684\u662f <\u7ec4\u4ef6\u540d\/>; \u4ee5\u4e0b\u7248\u672c\u63a5\u53d7\u7684 “\u7ec4\u4ef6\u540d”<\/p>\n\n\n\n
import '.\/App.css';
import React,{Suspense,lazy} from \"react\"
import {
Routes,
Route
} from \"react-router-dom\"
import Header from \".\/components\/header\"
import Footer from \".\/components\/footer\"
import Loading from \".\/components\/Loading\"
\u200b
\/\/ \u8def\u7531\u61d2\u52a0\u8f7d
const Home = lazy(()=>import(\".\/pages\/home.js\"))
const History = lazy(()=>import(\".\/pages\/history.js\"))
const About = lazy(()=>import(\".\/pages\/about.js\"))
const Login = lazy(()=>import(\".\/pages\/Login\"))
const Register = lazy(()=>import(\".\/pages\/register\"))
\u200b
function App() {
return (
<div className=\"App\">
<Header\/>
<main>
{\/* \u61d2\u52a0\u8f7d\u524d\u7684Loading\u52a8\u753b *\/}
<Suspense fallback={<Loading\/>}>
<Routes>
<Route path=\"\/\" exact element={<Home\/>}><\/Route>
<Route path=\"\/history\" exact element={<History\/>}><\/Route>
<Route path=\"\/about\" exact element={<About\/>}><\/Route>
<Route path=\"\/login\" exact element={<Login\/>}><\/Route>
<Route path=\"\/register\" exact element={<Register\/>}><\/Route>
<\/Routes>
<\/Suspense>
<\/main>
<Footer\/>
<\/div>
);
}
\u200b
export default App;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u4e00\u3001mobx\u914d\u7f6e \u5b89\u88c5 react\u914d\u7f6e\u6587\u4ef6\u62bd\u79bb (\u5728\u5206\u79bb\u524d\u8981commit\u672c\u5730\u7684\u4ee3\u7801) \u914d\u7f6e package.j […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-442","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/442","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=442"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/442\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/442\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}