如何强制更新 React.memo 子组件？答案

【问题标题】：How can I force update React.memo child component?如何强制更新 React.memo 子组件？
【发布时间】：2021-02-26 05:59:09
【问题描述】：

我的主要功能组件在子组件上执行大量的 useQueries 和 useMutations，因此我将其设置为 React.memo，以免在每次更新时重新渲染。基本上选择新产品的时候，我还是会因为备忘录的缘故看到旧产品。

mainFunction.js

const [active, setActive] = useState(false);
const handleToggle = () => setActive(false);

const handleSelection = (resources) => {
        const idsFromResources = resources.selection.map((product) => product.variants.map(variant => variant.id));
        store.set('bulk-ids', idsFromResources); //loal storage js-store library
        handleToggle
    };
    
const emptyState = !store.get('bulk-ids'); // Checks local storage using js-store library
    
return (
    <Page>
        <TitleBar
            title="Products"
            primaryAction={{
                content: 'Select products',
                onAction: () => {
                    setActive(!active)
                }
            }}
        />
        <ResourcePicker
            resourceType="Product"
            showVariants={true}
            open={active}
            onSelection={(resources) => handleSelection(resources)}
            onCancel={handleToggle}
        />
        <Button >Add Discount to Products</Button> //Apollo useMutation

        {emptyState ? (
            <Layout>
                Select products to continue
            </Layout>
        ) : (
                <ChildComponent />
            )}
    </Page>
    );

ChildComponent.js

class ChildComponent extends React {
    return(
        store.get(bulk-ids).map((product)=>{
            <Query query={GET_VARIANTS} variables={{ id: variant }}>
                {({ data, extensions, loading, error }) => {
                    <Layout>
                        // Query result UI
                    <Layout>
                }}
            </Query>
        })
    )
}
export deafult React.memo(ChildComponent);

【问题讨论】：

如果设置了新产品还是要渲染，这跟React.memo有什么关系？你有一个可重复的例子吗？ How to create a Minimal, Reproducible Example
新产品被选中时会发生什么还不清楚。考虑提供更多细节，例如子组件的实现和备忘录功能的调用。
我已经更新了代码
React.memo 冻结您的组件。您必须从父组件传递bulk-ids。在选择新产品之前，bulk-ids 是否始终相同？

标签： reactjs apollo-client react-memo

【解决方案1】：

React.memo() 在您的组件始终以相同方式呈现而没有更改时很有用。在您的情况下，您需要在每次 bulk-id 更改时重新渲染 <ChildComponent>。所以你应该使用useMemo()钩子。

function parentComponent() {
 
    ... rest of code

    const bulkIds = store.get('bulk-ids');
    const childComponentMemo = useMemo(() => <ChildComponent ids={bulkIds}/>, [bulkIds]); 

    return <Page>
        
        ... rest of render
        
        {bulkIds ? 
            childComponentMemo
        :(
            <Layout>
                Select products to continue
            </Layout>
        )}        
    </Page>
    
}

useMemo() 返回相同的值，直到 buldIds 没有改变。有关useMemo() 的更多详细信息，您可以找到here。

【讨论】：