与React.memo一起使用useSelector与连接

Question

从链接中引用。 https://react-redux.js.org/next/api/hooks#performance

我了解useSelector钩子的好处是避免包装者地狱。由于使用了connect HOC ，发生了包装器地狱。如果由于性能原因我们必须将React.memo的 HOC 与useSelector一起使用，那么仅使用connect HOC 会是更好的方法吗？代替？因为无论如何我们都必须在包装器中。如果地狱不是connect，则React.memo。

任何人都请解释React.memo比connect的好处。

Answer 1

一段时间以来，我一直在努力寻找答案，但我所获得的答案尚不清楚。尽管Redux文档中的理论并不复杂：useSelector使用严格的相等性===，而connect使用浅浅的相等性来确定。因此，在两种情况下，如果您从Redux状态（数字，字符串，布尔值）中“拉”原始值，您将获得相同的结果。如果值未更改，则不会重新渲染任何组件。如果您要“拉”非原语（数组或对象）并且两种情况下的值都没有改变（useSelector，connect），则使用useSelector的组件当然仍会重新渲染{{1} }始终为false，因为它们引用不同的数组，因为[] === [] ed组件将不会重新呈现。现在，为了使connect的行为类似并且不重新呈现，您可以执行以下操作： useSelector您可以从const object = useSelector(state => state.object, shallowEqual)导入shallowEqual。或者通过使用react-redux库使用该状态的记忆版本：

reselect

并将其添加到您的选择器中，例如：const makeGetObject = () => createSelector(state => state.object, object => object) 当我试图找到它的底部时，我已经创建了这个codeandbox（检查const object = useSelector(state => state.object, makeGetObject);组件的注释）：{{3 }}

Answer 2

首先，很有趣，尽管React.memo是HOC，但它没有创建与connect相同的嵌套。我创建了一个测试代码：

        static void Main(string[] args)
        {
            CloudStorageAccount storageAccount = new CloudStorageAccount(new StorageCredentials("account_name", "account_key"), true);
            CloudFileClient fileClient = storageAccount.CreateCloudFileClient();
            CloudFileShare fileShare = fileClient.GetShareReference("test");
            CloudFileDirectory rootDir = fileShare.GetRootDirectoryReference();
            CloudFile myfile = rootDir.GetFileReference("mytest.txt");

            //the full file path on local
            myfile.UploadFromFile(@"C:\Test\Test.txt");
}

这是呈现的结构：

我们可以看到用于连接的内容更深。

第二，文档说：

  

默认情况下，useSelector（）将在分派动作后运行选择器函数时对所选值进行引用相等性比较，并且仅当所选值更改时才会导致组件重新呈现。但是，与connect（）不同，useSelector（）不会由于其父级重新呈现而阻止该组件重新呈现，即使该组件的属性没有变化。

表示当商店的不相关部分发生更改时，不会重新渲染useSelector的组件。这是优化中最重要的部分。是否使用React.memo进行优化现在完全取决于您的决定，在大多数情况下，根本不需要这样做。我们仅在组件渲染成本很高的情况下使用React.memo。

总而言之，需要连接包装器才能连接到商店。使用useSelector，我们不再需要包装。在极少数情况下，当我们需要优化一些笨重的组件时，我们仍然需要使用React.memo包装。 React.memo的工作也由connect完成，但在大多数情况下，这是过早的优化。