如何处理功能组件中的派生状态？

如何解决如何处理功能组件中的派生状态？

我经常使用类组件，其中我们有 getderivedstatefromprops 方法，但是如何处理功能组件中的派生状态，所以有人指导我如何处理即将到来的派生状态？

解决方法

有多种方法可以做到这一点，但最好的方法是视情况而定。

选项 1：只需使用 const

当该值不受事件影响时效果最佳，不是繁重的计算，并且不需要作为可比较的参考传递给进一步的组件/钩子。

const Example = ({price,quantity}) => {
    const totalPrice = price * quantity;

    return (
        <div>
            {totalPrice}
        </div>
    );
}

此方法将导致每次组件重新渲染时重新计算值，但不包括比较依赖项和存储 useMemo 附带的值的开销。

如果正在计算一个非原始类型，例如一个对象，那么每次重新计算该对象时，它都会收到一个新的引用，导致 React 的浅比较失败。根据您对派生值的处理方式，这可能意味着这可能是问题，也可能不是问题。

选项 2：使用 useMemo

当值不受事件影响并且计算量很大或需要作为可比较的引用传递给进一步向下的组件/钩子时，这种方法效果最好。

const Example = ({price,quantity}) => {
    const totalPrice = useMemo(() => {
        return price * quantity;
    },[price,quantity]

    return (
        <div>
            {totalPrice}
        </div>
    );
}

每当依赖数组中的值（示例中的[price,quantity]）发生变化（引用比较）时，该方法都会导致重新计算该值，这确实包括比较依赖数组并确定是否重新计算的计算开销需要以及存储重新渲染之间的值的内存开销。

可以进行性能测试以检查对于每种情况，仅使用 const 还是使用 useMemo 会更有效。

选项 3：使用 useState 和 useEffect

这最适合受事件影响的值，当值需要作为可比较的引用传递或进行大量计算时，它也很有用。

const Example = ({price,quantity}) => {
    const [totalPrice] = useState(price * quantity);
    
    useEffect(() => {
        setTotalPrice(price * quantity);
    },quantity]

    return (
        <div>
            {totalPrice}
            <div onClick={() => setTotalPrice(current => current * 2)}>
                Double Total Price
            </div>
        </div>
    );
}

每当调用 setState 函数（示例中为 setTotalPrice）时，此方法都会导致存储一个新值。为了实现基于 props 更改的更新，可以将 useEffect 与依赖项数组（在示例中为 [price,quantity]）一起使用，该数组将在相关属性更改时运行（参考比较）。

该方法还允许值受到能够调用 setState 函数的其他事件的影响（参见示例中的 onClick）。

结论

这不是一个全面的列表，但它涵盖了基本选项。

可以选择使用 React 外部代码或使用 React 的上下文进行更复杂的状态管理。

,

使用useEffect钩子，可以阅读更多here