【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
1

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>
	);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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>
	);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

• 其余行为符合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>
	);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 调试发现第一个只能接对象。如果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>
	);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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>
	);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

ref

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

import { proxy, ref } from 'valtio'

const state = proxy({
  count: 0,
  dom: ref(document.body),
})
1
2
3
4
5
6

取消批量更新

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

function TextBox() {
	const snap = useSnapshot(state, { sync: true });
	console.log("mmmm");
	return (
		<input
			value={snap.text}
			onChange={(e) => (state.text = e.target.value)}
		/>
	);
}
1
2
3
4
5
6
7
8
9
10

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>
	);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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),
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

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 }
1
2
3
4
5
6
7
8
9
10

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
1
2
3
4
5
6
7
8
9
10
11
12

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"
1
2
3
4
5
6
7
8
9
10

总结

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