【React】valtio快速上手

前言

现在有很多人抛弃redux转向valtio，包括Umi最新版也开始使用它。
react状态管理门派一般分为以下几类：
没有状态管理工具：直接用 props 或者 context
单项数据流：redux、zustand
双向绑定：mobx、valtio
状态原子化：jotai、recoil
有限状态机：xstate
我觉得一个好的状态管理器要有超低的学习成本、能产生符合预期的效果、并且性能不会很差。
valtio和jotai 是同一个作者，今天主角valtio是以proxy为核心的状态管理库。
valtio由于以proxy为核心，所以可以脱离react使用。
这里摘抄云谦大佬对umi加入valtio的原话：
1、数据与视图分离的心智模型。不再需要在 React 组件或 hooks 里用 useState 和 useReducer 定义数据，或者在 useEffect 里发送初始化请求，或者考虑用 context 还是 props 传递数据。如果熟悉 dva，你会在此方案中找到一丝熟悉的感觉，概念上就是 reducer 和 effects 换成了 actions，subscriptions 则换了种形式存在。
2、更现代的 dva？「现代」主要出于这些点，1）基于 proxy，mutable，所以更新更简单，同时读取更高效，无需 selector，tracking with usage，2）没有中心化的 actions，以及基于组合式的扩展机制，这些都是对 TypeScript 更友好的方式，3）更少脚手架代码。
再看缺点。
1、兼容性。由于基于 proxy，所以不支持 IE 11、Chrome 48、Safari 9.1、Firefox 17 和 Opera 35 等。如果你的项目目前或未来有兼容需求，不要用。
2、非 Hooks 数据流。这不一定算缺点，看从什么角度看。但如果你是从 useModel、hox 这类 Hooks 数据流切过来，会发现有些事情不能做了。不能在 state 里组合其他的 hooks 数据，也不能在 actions 调用其他的 hooks 方法。我就想用 hooks 的方式组织，怎么办？解法是把 valtio 的 store 作为一个原子，和其他 hook 结合使用，而不是在 store 里调用其他 hook。

使用

安装

npm i valtio

proxy与useSnapshot

使用proxy包装需要代理的对象。
在任意的地方去进行更改。
在需要刷新显示的地方使用useSnapshot监听该对象变化

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot } from "valtio";

const state = proxy({
    
     count: 0, text: "hello" });

setInterval(() => {
    
    
	++state.count;
}, 1000);

export default function App() {
    
    
	const snap = useSnapshot(state);
	console.log("refresh");
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			{
    
    snap.count}
		</div>
	);
}

可以发现深度的检测也是可以的：

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot } from "valtio";

const state = proxy({
    
     count: 0, text: "hello", aaa: {
    
     bbb: 1 } });
setInterval(() => {
    
    
	state.aaa.bbb++;
}, 1000);

function Child1() {
    
    
	console.log("child1 refresh");
	return <div>child1</div>;
}
function Child2() {
    
    
	console.log("child2 refresh");
	return <div>child2</div>;
}
export default function App() {
    
    
	const snap = useSnapshot(state);
	console.log("refresh");
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			{
    
    snap.aaa.bbb}
			<Child1></Child1>
			<Child2></Child2>
		</div>
	);
}

其余行为符合react规律，如果不依赖变化的属性，该组件也不会刷新。

subscribe与subscribeKey

订阅顾名思义，任何地方使用后改变其然后执行函数。

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot, subscribe } from "valtio";

const state = proxy({
    
     count: 0, text: "hello", aaa: {
    
     bbb: 1 } });
setInterval(() => {
    
    
	state.aaa.bbb++;
}, 1000);

function Child1() {
    
    
	console.log("child1 refresh");
	return <div>child1</div>;
}
function Child2() {
    
    
	console.log("child2 refresh");
	return <div>child2</div>;
}
export default function App() {
    
    
	console.log("refresh");
	useEffect(() => {
    
    
		const unsubscribe = subscribe(state, () => {
    
    
			console.log("jjjjjjjjj", state.aaa.bbb);
		});
		return () => unsubscribe();
	}, []);
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			<Child1></Child1>
			<Child2></Child2>
		</div>
	);
}

调试发现第一个只能接对象。如果state内部的对象没更新他也可以不更新。
如果想要subscribe对象外的可以使用subscribeKey解决。

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot, subscribe } from "valtio";
import {
    
     subscribeKey } from "valtio/utils";
const state = proxy({
    
    
	count: 0,
	text: "hello",
	aaa: {
    
     bbb: 1 },
	ccc: {
    
     dd: 1 },
});
setInterval(() => {
    
    
	state.count++;
}, 1000);

function Child1() {
    
    
	console.log("child1 refresh");
	return <div>child1</div>;
}
function Child2() {
    
    
	console.log("child2 refresh");
	return <div>child2</div>;
}
export default function App() {
    
    
	console.log("refresh");
	useEffect(() => {
    
    
		const unsubscribe = subscribeKey(state, "count", (v) => {
    
    
			console.log("jjjjjjjjj", v);
		});
		return () => unsubscribe();
	}, []);
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			<Child1></Child1>
			<Child2></Child2>
		</div>
	);
}

watch

watch可以拿到索要的state，只要它进行了变化：

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot, subscribe } from "valtio";
import {
    
     subscribeKey, watch } from "valtio/utils";
const state = proxy({
    
    
	count: 0,
	text: "hello",
	aaa: {
    
     bbb: 1 },
	ccc: {
    
     dd: 1 },
});
const state2 = proxy({
    
    
	count: 0,
	text: "hello",
});
setInterval(() => {
    
    
	state.count++;
}, 1000);

function Child1() {
    
    
	console.log("child1 refresh");
	return <div>child1</div>;
}
function Child2() {
    
    
	console.log("child2 refresh");
	return <div>child2</div>;
}
export default function App() {
    
    
	console.log("refresh");
	useEffect(() => {
    
    
		const stop = watch((get) => {
    
    
			console.log("state has changed to", get(state2),); // auto-subscribe on use
		});
		return () => stop();
	}, []);
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			<Child1></Child1>
			<Child2></Child2>
		</div>
	);

ref

如果这个东西你不想被proxy代理又想取值，那么可以使用ref进行包裹：

import {
    
     proxy, ref } from 'valtio'

const state = proxy({
    
    
  count: 0,
  dom: ref(document.body),
})

取消批量更新

默认情况是开启的，但是如果是输入框这种情况，当你键入一些值后，光标移动到之前地方输入，光标还会跳转到最末尾。使用sync则可以解决这个问题。

function TextBox() {
    
    
	const snap = useSnapshot(state, {
    
     sync: true });
	console.log("mmmm");
	return (
		<input
			value={
    
    snap.text}
			onChange={
    
    (e) => (state.text = e.target.value)}
		/>
	);
}

derive

派生类似于computed可以从一个被proxy的值里进行变化。
配合snapshot可以进行react组件刷新

import React, {
    
     useEffect, useState } from "react";
import {
    
     proxy, useSnapshot, subscribe } from "valtio";
import {
    
     subscribeKey, watch, derive } from "valtio/utils";
// create a base proxy
const state = proxy({
    
    
	count: 1,
});

// create a derived proxy
const derived = derive({
    
    
	doubled: (get) => get(state).count * 2,
});

// alternatively, attach derived properties to an existing proxy
const three = derive(
	{
    
    
		tripled: (get) => get(state).count * 3,
	},
	{
    
    
		proxy: state,
	}
);

setInterval(() => {
    
    
	++state.count;
}, 1000);

export default function App() {
    
    
	const snap = useSnapshot(state);
	return (
		<div className="App" style={
    
    {
    
     height: 500, padding: 20 }}>
			{
    
    derived.doubled}
			============
			{
    
    three.tripled}
			==============
			{
    
    three.count}
			{
    
    snap.count}
		</div>
	);
}

proxyWithComputed

类似于computed，与上面相比多了缓存。
作者建议尽量不要使用，因为和usesnapshot做了相同的事，而且有可能会导致内存泄漏

import memoize from 'proxy-memoize'
import {
    
     proxyWithComputed } from 'valtio/utils'

const state = proxyWithComputed(
  {
    
    
    count: 1,
  },
  {
    
    
    doubled: memoize((snap) => snap.count * 2),
  }
)

// Computed values accept custom setters too:
const state2 = proxyWithComputed(
  {
    
    
    firstName: 'Alec',
    lastName: 'Baldwin',
  },
  {
    
    
    fullName: {
    
    
      get: memoize((snap) => snap.firstName + ' ' + snap.lastName),
      set: (state, newValue) => {
    
    
        ;[state.firstName, state.lastName] = newValue.split(' ')
      },
    },
  }
)

// if you want a computed value to derive from another computed, you must declare the dependency first:
const state = proxyWithComputed(
  {
    
    
    count: 1,
  },
  {
    
    
    doubled: memoize((snap) => snap.count * 2),
    quadrupled: memoize((snap) => snap.doubled * 2),
  }
)

proxyWithHistory

proxyWithHistory 自带提供了redo和undo命令。

import {
    
     proxyWithHistory } from 'valtio/utils'

const state = proxyWithHistory({
    
     count: 0 })
console.log(state.value) // ---> { count: 0 }
state.value.count += 1
console.log(state.value) // ---> { count: 1 }
state.undo()
console.log(state.value) // ---> { count: 0 }
state.redo()
console.log(state.value) // ---> { count: 1 }

proxySet与proxyMap

这2都是提供创建proxy对象能力

import {
    
     proxySet } from 'valtio/utils'

const state = proxySet([1, 2, 3])
//can be used inside a proxy as well
//const state = proxy({
    
    
//    count: 1,
//    set: proxySet()
//})

state.add(4)
state.delete(1)
state.forEach((v) => console.log(v)) // 2,3,4

import {
    
     proxyMap } from 'valtio/utils'

const state = proxyMap([
  ['key', 'value'],
  ['key2', 'value2'],
])
state.set('key', 'value')
state.delete('key')
state.get('key') // ---> value
state.forEach((value, key) => console.log(key, value)) // ---> "key", "value", "key2", "value2"

总结

valtio提供了proxy封装的各种用法，使用上较为简单，也容易满足需求。对于状态库要求不是特别高，以及对浏览器支持要求不高时，该状态库比较适合使用。

【React】valtio快速上手

前言

使用

安装

proxy与useSnapshot

subscribe与subscribeKey

watch

ref

取消批量更新

derive

proxyWithComputed

proxyWithHistory

proxySet与proxyMap

总结

猜你喜欢