问题描述
我有一个带有 padding
和 padding2
的简单 MobX 商店,区别在于一个是对象:
import { observable,action,makeObservable } from "mobx"
export type Padding2 = {
horizontal: number
vertical: number
}
export interface IStore {
padding: number
updatePadding({ padding }: { padding: number }): void
padding2: Padding2
updatePadding2({ horizontal,vertical }: Partial<Padding2>): void
}
export class Store implements IStore {
padding = 100
padding2 = {
horizontal: 100,vertical: 50,}
constructor() {
makeObservable(this,{
padding: observable,updatePadding: action.bound,padding2: observable,updatePadding2: action.bound,})
}
updatePadding({ padding }: { padding: number }) {
this.padding = padding
}
updatePadding2({ horizontal,vertical }: Partial<Padding2>) {
if (horizontal) this.padding2.horizontal = horizontal
if (vertical) this.padding2.vertical = vertical
}
}
export const store = new Store()
我有一个简单的 <input type="range" />
像:
import * as React from "react"
import { observer } from "mobx-react"
import "./styles.css"
import { useStore } from "./context"
const App = () => {
const store = useStore()
const { padding,updatePadding,padding2,updatePadding2 } = store
return (
<div>
<h1>MobX Slow Perf for Range</h1>
<h2>Padding</h2>
<input
type="range"
name="padding"
value={padding}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const padding = Number(e.target.value)
updatePadding({
padding,})
}}
/>
<span>{padding} px</span>
<h2>Padding2</h2>
<input
type="range"
name="horizontal"
value={padding2.horizontal}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
const horizontal = Number(e.target.value)
updatePadding2({
horizontal,})
}}
/>
<span>{padding2.horizontal} px</span>
</div>
)
}
export default observer(App)
当我在 padding
(第一个滑块)上使用滑块时,它会顺利地从 100
到 0
但当我在 padding2
(第二个滑块)上使用它时它显示出明显的滞后。
这是一个最小的 CodesandBox → https://codesandbox.io/s/mobx-range-slow-perf-3zobu?file=/src/App.tsx
如何在不使用其他本地状态(例如 React.useState()
的 padding2
)的情况下解决此问题?
解决方法
这里的微妙错误是 updatePadding
检查 horizontal
或 vertical
是否为 truthy。这意味着 0 的值返回 false,然后存储根本没有更新。因此,当您快速向左拖动时,滑块会跳到 0,但其值不会更新。
要解决此问题,您需要明确检查它们是否为 undefined
updatePadding2({ horizontal,vertical }: Partial<Padding2>) {
if (horizontal !== undefined) this.padding2.horizontal = horizontal;
if (vertical !== undefined) this.padding2.vertical = vertical;
}