You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
1.1 KiB
30 lines
1.1 KiB
// 导入中间件，连接mobx、react，完成响应式变化
|
|
import { observer } from 'mobx-react-lite'
|
|
import { useStore } from './store/index'
|
|
|
|
|
|
function App() {
|
|
// 注意：解构赋值到 store 实例对象就可以了，防止破坏响应式，用哪个 store 就解构那个 store
|
|
const { counterStore } = useStore()
|
|
|
|
return (
|
|
<div className="App">
|
|
{/* list = [1, 2, 3, 4, 5, 6] 是引用型数据类型，值存放在堆内存中，在栈内存存放的是一个地址，这个地址将会指向堆内存中引用数据类型的具体数值 */}
|
|
{counterStore.list.map((item) => {
|
|
return <div key={item}>{item}</div>;
|
|
})}
|
|
<br />
|
|
<button onClick={() => {
|
|
counterStore.addList();
|
|
console.log(counterStore.list);
|
|
}
|
|
}>+</button>
|
|
<br />
|
|
{/* {counterStore.count}
|
|
<br/>
|
|
<button onClick={counterStore.addCount}>+</button> */}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default observer(App)
|