我useRef在功能组件中使用了 React 来获取 html 对象上的链接并将其存储在 Recoilatom 中。例如:
const Children = () => {
const [refLink, setSrefLink] = useRecoilState(refLink)
return <input ref={someRef}/>
}
const Parent = () => {
const [refLink, setSrefLink] = useRecoilState(refLink)
const someRef = useRef();
setSomeRef(someRef)
return <Children />;
}
export const refLink = atom({
key: 'refLink',
default: null ,
});
Run Code Online (Sandbox Code Playgroud)
但是当我的父组件卸载时我收到错误:
react-dom.development.js:20997未捕获类型错误:无法分配给文件reac-dom.development.js中对象“#”的只读属性“当前”
我无法想象有什么问题;
我一直在研究Zustand和Recoil——两个相对较新的状态管理库。
Recoil 被大力宣传为具有深度嵌套结构的 React 应用程序“非常高性能”。然而,我不知道它如何(或究竟如何)在性能方面优于 Zustand(除了并发模式)。
我可能会弄错,但这是我从文章和演讲中理解的:“为什么”Recoil 具有高性能的主要原因是您所做的任何更新只会触发相关组件重新渲染,而不会影响任何其他组件。Recoil 在设计上允许它并且开箱即用,而基于上下文的库必须通过整个树传递每个更改,对这些更改进行比较/协调,然后可能只重新渲染必须更改的内容。
现在,Zustand 根本不使用 Context API。因此,我假设(除了并发模式),它具有与 Recoil 相当的性能优势,其中 Zustand 只会“接触”相关组件,而不会通过整个组件树传递更改。
如果我的理解有误,请告诉我。这两个库在性能上是否具有可比性(没有并发模式)?或者,Recoil 的原子范式是否存在其他一些固有属性,使其在理论上具有优越的性能?
请注意:我希望答案不要过多地受到模式和实践的影响。我理解,有时范式的最大好处可能在于“它强制执行的健全模式”,但我感兴趣的不是它们强制执行的内容,而是它们允许通过类似的努力来做什么。例如,我知道平坦的标准化状态将允许 Zustand 获得更好的性能,并且 Zustand 不一定“强迫您以适当/可扩展的方式进行操作”。但我不希望正确模式的“可选性”成为一个缺点。
我是 Recoil.js 的新手,我在应用程序中为登录用户提供了以下原子和选择器:
const signedInUserAtom = atom<SignedInUser | null>({
key: 'signedInUserAtom',
default: null
})
export const signedInUserSelector = selector<SignedInUser | null>({
key: 'signedInUserSelector',
get: ({ get }) => get(signedInUserAtom),
set: ({ set, get }, newUserValue) => {
// ... Do a bunch of stuff when a user signs in ...
set(signedInUserAtom, newUserValue)
}
})
Run Code Online (Sandbox Code Playgroud)
所以基本上我用它signedInUserSelector来设置新用户。
现在,我想要一些函数可以通过选择器设置用户,并在我的组件中使用它们,例如:
export async function signInWithGoogleAccount() {
const googleUser = async googleClient.signIn()
// here I need to set the user atom like:
// const …Run Code Online (Sandbox Code Playgroud) 我确实在我的 nextjs 应用程序中使用了反冲力。但是,如果我接下来运行(在开发或生产中没有区别),我会收到以下错误消息:
重复的原子键“companyData”。这是生产中的致命错误。但如果由于热模块更换而发生此警告,则可以安全地忽略此警告。
这是我实现它的方式:
/src/stores/CompanyStore.js:
import { useSetRecoilState, useRecoilValue , atom } from 'recoil';
import config from '../../content/config.yml';
const companyData = atom({
key: 'companyData',
default: {...config.company},
});
export const useSetCompanyData = () => useSetRecoilState(companyData);
export const useCompanyData = () => useRecoilValue(companyData);
export default {
useSetCompanyData,
useCompanyData,
};
Run Code Online (Sandbox Code Playgroud)
我在某些组件中这样使用它:
我的组件.js
import React from 'react';
...
...
import {useCompanyData} from '../stores/CompanyStore';
const MyComponent = () => {
const classes = useStyles();
const companyData = useCompanyData();
const { summary: headline, description …Run Code Online (Sandbox Code Playgroud) 如何使用 RecoilJS 构建深层嵌套状态树?我应该将每个分支作为单独的原子还是其他什么?
我可以将 Recoil 原子的默认值设置为对象吗?
例如:
export const currentUserState = atom({
key: 'currentUserState',
default: { name: '', email: '', userId: null },
});
Run Code Online (Sandbox Code Playgroud)
然后设置它:
import { currentUserState } from '../atoms/atoms';
const setUserState = useSetRecoilState(currentUserState);
setUserState(name: 'John', email: 'foo@bar.com', userId: getRand());
Run Code Online (Sandbox Code Playgroud) 我是后坐力的新手,我正在使用所有类组件。这是我的后坐力状态
export const tokenState = atom({
key: "tokenState",
default: "",
});
Run Code Online (Sandbox Code Playgroud)
如何在类组件中使用后坐力并设置令牌?我RecoilRoot在应用程序中使用过
<RecoilRoot>
<Header />
<Main />
</RecoilRoot>
Run Code Online (Sandbox Code Playgroud)
在 中login.js,我想将令牌设置为反冲,但它login.js是一个类组件。
const res = await APIS.login(apiRoute,requestObject);
Run Code Online (Sandbox Code Playgroud)
在res.data.token我得到 jwt 令牌。
先感谢您!
我有一些 React 后坐力状态,但是每当手动刷新页面时,后坐力状态都会重置。
这是正常行为吗,因为我知道其他状态管理库喜欢flux并且react-redux会这样做。
最好的做法是将其保存localStorage到实际保存在浏览器中(因为 localStorage 也是一个同步 api,所以这肯定也会导致一些问题。)
即使它是一个相当新的库,是否有某种方法即使在手动页面刷新时也能保持状态?
我有以下代码。
const [verificationValues, setValues] = useRecoilState(verificationFormValues);
setValues({
...verificationValues!,
nidOrPassport,
addressProof,
recentPhoto,
bankAccountStateMents,
businessProof,
salarySlip,
employeeIdCard,
});
Run Code Online (Sandbox Code Playgroud)
提交表单后,我将调用 setValues 函数。当我在控制台记录此验证值时,它没有更新验证值。但是,如果我在提交处理程序之后控制台记录值,那么它就会工作并显示更新的值。另外,我刚刚注意到它在我再次按下提交按钮后才起作用。此外,setValues 函数不是异步的,需要一些时间才能完成。那么为什么会发生这种情况呢?我现在很困惑。提前致谢。
那些nidOrPassport、addressProof、recentPhoto等都是对象
我做了第一个反冲实验,建立了一个可编辑的表格。每个单元格都有一个原子,用于存储其行、列和文本值。我构建这个的方式是
useRecoilState作为 prop 传递的键访问主字典来使用并找到其特定的 Atom。现在,在我看来,这个用例(创建数千个具有相同形状的相关原子)是为了atomFamily变得更容易,但我不明白如何以这种方式使用它,在这种方式中,你用一个初始化每个原子具体值。
除此之外,我不明白使用atomFamily 相对于存储原子集合有什么优势。我知道涉及到记忆,但我不明白记忆的是什么,除了,如果我阅读正确的话,能够通过使用相同的 id 再次调用该函数来调用特定的原子,这将使您几乎获得我用字典得到同样的行为。
recoiljs ×10
reactjs ×9
javascript ×4
forms ×1
next.js ×1
node.js ×1
performance ×1
typescript ×1
use-ref ×1
zustand ×1