标签: react-state-management

我一直在研究Zustand和Recoil——两个相对较新的状态管理库。

Recoil 被大力宣传为具有深度嵌套结构的 React 应用程序“非常高性能”。然而，我不知道它如何（或究竟如何）在性能方面优于 Zustand（除了并发模式）。

我可能会弄错，但这是我从文章和演讲中理解的：“为什么”Recoil 具有高性能的主要原因是您所做的任何更新只会触发相关组件重新渲染，而不会影响任何其他组件。Recoil 在设计上允许它并且开箱即用，而基于上下文的库必须通过整个树传递每个更改，对这些更改进行比较/协调，然后可能只重新渲染必须更改的内容。

现在，Zustand 根本不使用 Context API。因此，我假设（除了并发模式），它具有与 Recoil 相当的性能优势，其中 Zustand 只会“接触”相关组件，而不会通过整个组件树传递更改。

如果我的理解有误，请告诉我。这两个库在性能上是否具有可比性（没有并发模式）？或者，Recoil 的原子范式是否存在其他一些固有属性，使其在理论上具有优越的性能？

请注意：我希望答案不要过多地受到模式和实践的影响。我理解，有时范式的最大好处可能在于“它强制执行的健全模式”，但我感兴趣的不是它们强制执行的内容，而是它们允许通过类似的努力来做什么。例如，我知道平坦的标准化状态将允许 Zustand 获得更好的性能，并且 Zustand 不一定“强迫您以适当/可扩展的方式进行操作”。但我不希望正确模式的“可选性”成为一个缺点。

我有一个提交按钮的表单.该表单调用onclick函数,将某些事件的状态设置为false为true.然后我想将此状态传递回父级,以便如果它为true则呈现componentA但如果为false则呈现componentB.

我怎么做才能做出反应？我知道我需要使用状态或道具,但不知道该怎么做.这也是单向流反应原理的矛盾吗？

ComponentA代码:

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

父组件控制它显示的内容:

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )

我继承了前任所有者广泛使用 React.Context 的代码库。这导致了可能被描述为“上下文地狱”的情况

<AppContextProvider>
  <AnotherProvider>
    <AgainAnotherProvider configProp={false}>
      <TestProvider>
        <FooProvider>
          <BarProvider configHereAlso={someEnvronmentVar}>
            <BazProvider>
              <BatProvider>
                <App />
              </BatProvider>
            </BazProvider>
          </BarProvider>
        </FooProvider>
      </TestProvider>
    </AgainAnotherProvider>
  </AnotherProvider>
</AppContextProvider>;

这感觉像是一种反模式，并且在理解整个应用程序的工作方式方面造成了相当大的认知开销。

我该如何解决？是否可以只使用一个提供程序来处理所有事情？我之前使用 redux-toolkit 和 redux 来管理 React 中的状态。上下文有没有类似的东西？

我想重构我的 Next.js webapp，让不同的页面处理不同的屏幕。目前，我让这个组件拥有多个状态，以了解我在哪个屏幕中。在 jsx 部分，我正在使用{value && ... }来呈现正确的组件。

但是我觉得这不是一个好的设计，并且随着添加越来越多的屏幕将无法维护。

我也想避免使用 Redux，因为它对我的项目来说太过分了。

我正在考虑将数据保存在 cookie 中，以便在渲染新页面时可以在每个组件中使用 getInitialProps 检索它们，但是有没有更优雅的方法？

我已经阅读了关于调整的内容，_app.js但我不确定这样做的后果，以及它如何帮助我..

有什么建议吗？

假设我有以下代码：（太冗长了）

function usePolicyFormRequirements(policy) {
  const [addresses, setAddresses] = React.useState([]);
  const [pools, setPools] = React.useState([]);
  const [schedules, setSchedules] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [tunnels, setTunnels] = React.useState([]);
  const [zones, setZones] = React.useState([]);
  const [groups, setGroups] = React.useState([]);
  const [advancedServices, setAdvancedServices] = React.useState([]);
  const [profiles, setProfiles] = React.useState([]);

  React.useEffect(() => {
    policiesService
      .getPolicyFormRequirements(policy)
      .then(
        ({
          addresses,
          pools,
          schedules,
          services,
          tunnels,
          zones,
          groups,
          advancedServices,
          profiles,
        }) => {
          setAddresses(addresses);
          setPools(pools);
          setSchedules(schedules);
          setServices(services);
          setTunnels(tunnels);
          setZones(zones);
          setGroups(groups);
          setAdvancedServices(advancedServices);
          setProfiles(profiles);
        }
      );
  }, …

我正在一个站点上工作，该站点使用zustand将全局状态存储在文件中。我需要能够在类组件中设置该状态。我可以使用钩子在功能组件中设置状态，但我想知道是否有办法将 zustand 与类组件一起使用。

如果有帮助，我已经为此问题创建了一个沙箱：https : //codesandbox.io/s/crazy-darkness-0ttzd

在这里，我在功能组件中设置状态：

function MyFunction() {
  const { setPink } = useStore();

  return (
    <div>
      <button onClick={setPink}>Set State Function</button>
    </div>
  );
}

我的状态存储在这里：

export const useStore = create((set) => ({
  isPink: false,
  setPink: () => set((state) => ({ isPink: !state.isPink }))
}));

如何在类组件中设置状态？：

class MyClass extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <button
          onClick={
            {
              /* setPink */
            }
          }
        >
          Set State Class
        </button> …

我最近使用 hooks 编写了一个 table 组件，每次页面加载时都会对后端进行 API 调用，因此同时会显示一个加载 Spinner，直到 API 响应。我使用 redux 作为状态管理，所以当有来自 API 的响应时，会调度一个动作并更新状态。所以这里的问题是，通常在类组件中我们可以使用比较 prevProps 和 nextProps

componentDidUpdate(prevProps){
  if(this.props.someState !== prevProps.someState){
      // do something
    }
}

但我不确定如何使用 Hooks 实现相同的目标。我还提到了这个 stackoverflow 问题 How to compare oldValues and newValues on React Hooks useEffect？

但是这个解决方案在我的情况下似乎不起作用。我确实尝试过创建自定义钩子usePrevious并创建一个ref 来比较当前值，但这并没有解决我的问题。

这是我的部分代码。

let loading = true;

let tableData = useSelector((state) => {
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === true
    ) {
      loading = false;
      return state.common.tableDetails.data;
    }
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === false …

我正在构建一个多面搜索组件。我无法弄清楚如何以及在哪里处理状态。

解决方案#1

父组件管理状态- 使用减速器来管理所有组件并将状态向下传递

缺点：子组件有很多复杂性（自动完成、焦点状态），并且更新父级的状态会导致子组件重新渲染。这意味着子组件的焦点状态和建议无法正常工作。

优点：设计更简洁，状态在一个减速器中处理

解决方案#2

子组件管理自己的状态（如不受控制的组件）。父组件仅管理创建、删除新的复杂组件。一旦孩子们知道他们完成了（失去焦点），他们就会更新对父母的引用。

缺点：管理两个状态和重复的关键错误

优点：子组件按预期工作

帮助和建议

这两种解决方案都很难实现，但到目前为止，我对解决方案 #2 的运气更好。

有没有这方面的好例子？似乎可编辑的待办事项列表也会有类似的问题。

我喜欢解决方案#1 的想法，但我认为我需要一种方法来推迟更新状态。