状态管理-编程知识

状态管理

news/2024/11/8 9:37:05/文章来源:https://www.cnblogs.com/duixue/p/18534471

在组件间共享状态

有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。这被称为“状态提升”，这是编写 React 代码时常做的事。

对 state 进行保留和重置

当你重新渲染一个组件时， React 需要决定组件树中的哪些部分要保留和更新，以及丢弃或重新创建。

如弹出表单填写之后关闭，再次打开，会有上一次的值。

迁移状态逻辑至 Reducer 中

对于那些需要更新多个状态的组件来说，过于分散的事件处理程序可能会令人不知所措。对于这种情况，你可以在组件外部将所有状态更新逻辑合并到一个称为 “reducer” 的函数中。这样，事件处理程序就会变得简洁，因为它们只需要指定用户的 “actions”。在文件的底部，reducer 函数指定状态应该如何更新以响应每个 action！

使用 Context 深层传递参数

通常，你会通过 props 将信息从父组件传递给子组件。但是，如果要在组件树中深入传递一些 prop，或者树里的许多组件需要使用相同的 prop，那么传递 prop 可能会变得很麻烦。Context 允许父组件将一些信息提供给它下层的任何组件，不管该组件多深层也无需通过 props 逐层透传。

LevelContext.js

import { createContext } from 'react';export const LevelContext = createContext(0);

Heading.js

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';export default function Heading({ children }) {const level = useContext(LevelContext);switch (level) {case 0:throw Error('标题必须在 Section 内！');case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h6>{children}</h6>;default:throw Error('未知级别：' + level);}
}

Section.js

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';export default function Section({ children }) {const level = useContext(LevelContext);return (<section className="section"><LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider></section>);
}

App.js

import Heading from './Heading.js';
import Section from './Section.js';export default function Page() {return (<Section><Heading>大标题</Heading><Section><Heading>一级标题</Heading><Heading>一级标题</Heading><Heading>一级标题</Heading><Section><Heading>二级标题</Heading><Heading>二级标题</Heading><Heading>二级标题</Heading><Section><Heading>三级标题</Heading><Heading>三级标题</Heading><Heading>三级标题</Heading></Section></Section></Section></Section>);
}