koloer-blus | 个人小站

React中如何更好的使用MobX

在之前的文章中我们讲解了MobX的基本使用以及MobX的一些特点。本篇文章将结合React讲解如何在React中更好的使用MobX。

关于React MobX集成选择

MobX本身是可以独立于React执行，并且很多内容可以自主选择。在这里可以选择mobx-react和mobx-react-lite两个包。mobx-react-lite更加轻量，但是它只支持React函数式组件。

如何管理我们的state

props使用

在我们定义了一个外部的Observable State后，我们除了直接使用（全局变量）外，我们还可以通过使用React组件参数传递来实现我们的功能。

const myTimer = new Timer() // See the Timer definition above.  
  
const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)  
  
// 通过props传递myTimer.  
const TimerApp = () => <TimerView timer={myTimer} />

结合Context使用

既然这是一种状态，那么当我们需要全局管理或者跨层传递使用时，使用React Context是一种更好的选择。我们可以将我们的ObservableState作为context。

const TimerContext = createContext<Timer>()  
  
const TimerView = observer(() => {  
// 从context中获取timer.  
const timer = useContext(TimerContext) // 可以在上面查看 Timer的定义。  
	return (  
		<span>Seconds passed: {timer.secondsPassed}</span>  
	)  
})  
  
const TimerApp = () => (  
<TimerContext.Provider value={new Timer()}>  
	<TimerView />  
</TimerContext.Provider>
)

使用useLocalObservable

通过使用useLocalObservable可以为我们实现const [store] = useState(() => observable({ /* something */}))这样的功能。

const TimerView = observer(() => {  
const timer = useLocalObservable(() => ({  
		secondsPassed: 0,  
		increaseTimer() {  
			this.secondsPassed++  
		}  
	}))  
	return <span>Seconds passed: {timer.secondsPassed}</span>  
})

注意

  • observer 会自动的使用 memo, 所以 observer 不需要再包裹 memo。 memo 会被 observer 组件安全的使用，因为任何在props中的改变(很深的) 都会被observer响应。
  • 晚一点使用间接引用值。推荐尽可能晚的使用间接引用值。 这是因为当使用 observable 间接引用值时 MobX 会自动重新渲染组件。 如果间接引用值发生在组件树的层级越深，那么需要重新渲染的组件就越少。
  • 不要使用数组的索引作为 key

参考