提前声明：以下内容基本就是官方文档的(不正规)翻译~官方介绍链接
特点
- 基于react。添加一些到应用程序中，获得快速灵活的共享状态。
- 数据流图。派生数据和异步查询被纯函数和高效订阅驯服。
- 通过观察应用程序中的所有状态更改来实现持久性、路由、时间旅行调试或撤消，而不影响代码拆分。
使用背景
出于兼容性和简便性的考虑，编写代码时最好使用React的内置状态管理功能，而不要使用外部全局状态。但是react有这些缺陷：
- 组件状态只能通过将其提升到公共祖先来共享，但这可能包括一棵巨大的树，然后需要整个公共组件重新渲染。
- 上下文只能存储一个值，且不能存储不确定的一组值，每个值都需要有自己的使用者。
- 这两种方法都使得树的顶部（状态必须存在的地方）很难从树的叶子（使用状态的地方）代码分割出来。
recoil优点
状态变化从该图的根（我们称为原子--atom）开始，通过纯函数（我们称为选择器--seletor）进入组件。
通过使用这种方法：
- 获得了一个无样板的API，其中共享状态具有与React本地状态相同的简单get / set接口（但如果需要，也可以用reducer等封装）。
- 有可能与并发模式和其他新的React功能兼容。
- 状态定义是增量式和分布式的，从而可以进行代码拆分。
- 可以用派生数据替换状态，而无需修改使用它的组件。
- 派生数据可以在同步和异步之间移动，而无需修改使用它的组件。
- 可以将导航视为一流的概念，甚至可以对链接中的状态转换进行编码。
- 以向后兼容的方式持久保存整个应用程序状态，可以在应用程序更改后持久保存的状态。
核心概念
使用Recoil，您可以创建一个数据流图，数据从atoms（共享状态）通过selectors（纯函数）一直注入到React组件。atoms是组件可以预订的状态单位。selectors可以同步或异步转换此状态。
atoms
atoms是状态单位,它们是可更新和可订阅的,当atoms被更新时，每个订阅的组件都将使用新值重新呈现。它们也可以在运行时创建,可以使用atoms来代替React本地组件状态。如果多个组件使用相同的原子，则所有这些组件共享其状态。
const fontSizeState = atom （{
key：'fontSizeState' ，
default：14 ，
} ）;
原子需要一个唯一的key，该key可用于调试，持久性以及某些高级API，这些API可让您查看所有atoms的图。确保key在全局上是唯一的,像React组件状态一样，它们也具有默认值。
要从组件读取和写入原子，我们使用Hook useRecoilState。就像React一样useState，但是现在状态可以在组件之间共享：
function FontButton （）{
const [ fontSize ，setFontSize ] = useRecoilState(fontSizeState);
return（
<button onClick = { （）=> setFontSize （（size ）=> size + 1 ）} style = { { fontSize } } >
Click to Enlarge
</ button>
）;
}
单击该按钮将使按钮的字体大小增加一，但是现在其他组件也可以使用相同的字体大小：
seletor
是接受的原子或其它选择作为输入的纯函数。当这些上游原子或选择器更新时，seletor函数将被重新评估。组件可以像atoms一样订阅到选择器，然后在选择器更改时将重新渲染。
selector用于计算基于状态的派生数据，这使我们避免了冗余状态，通常无需使用reduce来保持状态同步和有效。取而代之的是，最小状态集存储在atoms中，而其他所有内容都根据该最小状态有效地进行了计算,由于选择器会跟踪哪些组件需要他们以及它们所依赖的状态，因此它们使这种功能方法更加有效。
从组件的角度来看，selector和原子具有相同的接口，因此可以互相替换。
const fontSizeLabelState = selector（{
key：'fontSizeLabelState' ，
get ：（{ get } ）=> {
const fontSize = get(fontSizeState);
const unit = 'px' ;
return ` $ { fontSize } $ { unit } ` ;
} ，
} ）;
该get属性是要计算的函数。它可以使用get传递给它的参数访问atoms和其他选择器的值。每当它访问另一个原子或选择器时，就会创建一个依赖关系，以便更新另一个原子或选择器将导致重新计算该原子或选择器。
在此fontSizeLabelState示例中，选择器具有一种依赖性：fontSizeState atom。从概念上讲，fontSizeLabelState selector的行为就像一个纯函数，将fontSizeState作为输入并返回格式化的字体大小标签作为输出。
可以使用读取选择器useRecoilValue()，该选择器将原子或选择器作为参数并返回相应的值。我们不使用useRecoilState()，因为fontSizeLabelState选择器不可写.
function FontButton （）{
const [ fontSize ，setFontSize ] = useRecoilState （fontSizeState ）;
const fontSizeLabel = useRecoilValue （fontSizeLabelState ）;
return（
< >
< div > Current font size：$ { fontSizeLabel } </ div >
<button onClick = { （）=> setFontSize （fontSize + 1 ）} style= { { fontSize } } >
Click to Enlarge
</ button>
</ >
）;
}
现在，单击按钮有两件事：增加按钮的字体大小，同时更新字体大小标签以反映当前字体大小。
网友评论