如何使用权，在反应还原应用中重新选择

Question

我有一个应用程序，用户可以根据自己的输入搜索数据。在我的应用程序中，我尝试使用重新选择。

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchPersonAction } from "./store";
const Search = () => {
const dispatch = useDispatch();
const selector = useSelector((s) => s);
const search = (e) => {
const txt = e.target.value;
dispatch(searchPersonAction(txt));
};
return (
<div>
<input onChange={search} placeholder="search" />
<ul>
{selector.name.map((p) => (
<li key={p.name}>{p.name}</li>
))}
</ul>
</div>
);
};
export default Search;

在我的store中，我有一系列这样的人：

export const persons = [
{
name:"jack",
age: 2
},
{
name:"Jim",
age: 14
},
{
name:"July",
age: 92
},
{
name:"Bill",
age: 1
},
{
name:"Carl",
age: 72
},
]

现在，当用户搜索某个内容时，列表中会根据用户搜索的名称显示结果
问题：在我的情况下，重新选择是否有用(防止多次重新渲染(？或者使用useSelector，在上述情况下是否足够

Answer 1

我认为没有必要重新选择这里。您可以使用useMemo来获得相同的结果。

import React, { useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { searchPersonAction } from "./store";
const Search = () => {
const dispatch = useDispatch();
const persons = useSelector((s) => s.persons);
const [query, updateQuery] = useState('');
const searchedPersons = useMemo(() => persons.filter(p => p.name.includes(query)), [query]);
const search = (e) => {
updateQuery(e.target.value);
};
return (
<div>
<input onChange={search} placeholder="search" />
<ul>
{searchedPersons.map((p) => (
<li key={p.name}>{p.name}</li>
))}
</ul>
</div>
);
};
export default Search;

Answer 2

reselect在从store获取array或object时非常有用，例如：

存储

state = {
persons: [
{
name:"Jack",
age: 2
},
{
name:"Jane",
age: 14
},
]
}

如果您使用react-redux中的selector，并且如果您在搜索字段中键入'J'并使用searchPersonAction操作，则它将更改store中persons的数组，但数组保持不变。

state = {
persons: [
{
name:"Jack",
age: 2
},
{
name:"Jane",
age: 14
},
]
}

然后，无论数组中的数据是否已更改，都会收到重新发送程序。

但是，如果您使用reselect，并且当您在搜索字段中键入'Ja'时，它将是相同的数组，那么您将不会得到重复渲染，因为reselect将存储数据