如何解决Mobx-React React不重新渲染
这里有一些使用Mobx来管理状态的React组件的代码,但是使用它的不同方法会导致完全不同的结果。
App.js
import React from "react";
import "./styles.css";
import { observer } from "mobx-react";
import store from "./store";
const Span = () => {
return <span>{store.count}</span>;
};
const app = function () {
return (
<div className="App">
{/* section 1 */}
<Span />
{/* section 2 */}
{/* <span>{store.count}</span> */}
<button onClick={() => store.setCount(store.count + 1)}>Click</button>
</div>
);
};
export default observer(app);
store.js
import { observable,action } from "mobx";
class Store {
@observable count = 0;
@action setCount(count) {
this.count = count;
}
}
export default new Store();
使用第1部分,单击按钮不会刷新视图,但使用第2部分会刷新视图。
1,我想知道这两种方法的区别吗?
2,如果我坚持第1节的规定,该如何更改代码?
解决方法
只需将observer
包裹在Span
组件上即可。
const Span = observer(() => {
return <span>{store.count}</span>;
});
Span
没有观察到您的商店,因此不知道发生了什么变化。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。