React hooks：可激活状态模式

Question

我正在尝试创建一个可以 activate/disable 某些功能的组件，具体取决于道具。所有这些功能都需要一个必须管理的状态。

我正在尝试考虑一种可能的模式，允许我们在连接的功能未激活的情况下不创建状态。我想到了 2 种可能的方法：

方式一

function useFunctionality(initState, enable) {
    if (!enable) {
        return null;
    }

    const [funct, updateFunct] = useState(init);
    return funct;
}

function Component({ enableFunct }) {
    const funct = useFunctionality('test', enableFunct);
    return (...);
}

方法#2

function useFunctionality(initState, enable) {
    const [funct, updateFunct] = useState(init);
    return enable ? funct : null;
}

function Component({ enableFunct }) {
    const funct = useFunctionality('test', enableFunct);
    return (...);
}

在这两种方式中，钩子都可以继续工作。问题是：你觉得哪种方式更正确？有更好的方法吗？

Answer 1

如果您希望基于 props 禁用特定功能的使用，更好的方法是不执行该功能，而不是执行整个逻辑并返回 null 或 undefined，因为我们不需要响应。所以第一种方法更好

function useFunctionality(initState, enable) {
    if (!enable) {
        return null;
    }

    const [funct, updateFunct] = useState(init);
    return funct;
}

function Component({ enableFunct }) {
    const funct = useFunctionality('test', enableFunct);
    return (...);
}

当自定义挂钩中的计算成本很高时，这可能尤为重要。

Answer 2

两个食谱都有问题。

方式 1 可能允许在组件渲染时有条件地调用挂钩，这可能会导致错误答案是 discouraged:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

如中所述，只要保证条件在渲染之间不会发生变化，就可以放弃此规则。

保证这一点的一种方法是记住条件：

function useFunctionality(initState, enable) {
    const condition = useMemo(() => enable, []);

    if (!condition)
        return null;

    const [funct, updateFunct] = useState(initState);
    return funct;
}

方法 2 更可取，因为它更干净并且 useState 调用并不昂贵。

这两种方式都有同样的问题，他们使用的是永不改变的状态。如果这是意图，那就是 ref 的用例。因为它永远不会改变，所以可以放置一个条件作为初始值：

function useFunctionality(initState, enable) {
    return useRef(enable ? initState: null).current;
}

React hooks：可激活状态模式

React hooks: activable states patterns

design-patterns

reactjs

react-hooks