我现在正在学习Redux,并浏览了教程信息.他们在Reading State from the Store with useSelector区有一张纸条,上面写着:

UseSelector使用STRICT=引用比较其结果 比较,因此组件将在 Select 器的任何时候重新呈现 结果是一个新的参考!这意味着如果您创建一个新的 在 Select 器中引用并返回它,则组件可以 在每次调度操作时重新呈现,即使数据 真的没什么不同.

它继续给出这个函数作为一个坏例子,说明你可能会传递给你的useSelector()

// Bad: always returning a new reference
const selectTodoDescriptions = state => {
  // This creates a new array reference!
  return state.todos.map(todo => todo.text)
}

在后面的Selecting Data in List Items by ID节中,他们用这一点作为他们对这个主题的解释的一部分:

const selectTodoIds = state => state.todos.map(todo => todo.id)
const todoIds = useSelector(selectTodoIds)

这与第一个"坏"代码示例有什么不同?写这篇文章的正确方式是什么?该警告是否建议您不要在useSelector()挂钩中使用任何数组?我真的不理解它是什么意思,当它说一个操作可以被调度,不改变数据,但以某种方式影响 Select 器.

Edit: 正如有人在 comments 中指出的,如果你继续阅读它,你会解释他们为什么这样做/为什么不做这样的事情,但是,有人能解释一下我写的最后一个小问题/语句吗?What does it mean exactly when it says an action could be dispatched that doesn't change the data but still changes the reference, causing re-renders?我得到了map()函数可以返回一个包含相同数据的新数组,从而成为一个新的引用,但我想不出有哪种情况会被调度,而不会改变任何数据,但仍然以某种方式触及 Select 器的状态.如果该操作不影响 Select 器的特定状态,那么为什么要重新呈现呢?我需要一个不同于教程中的示例,因为它不适合我.

推荐答案

您的问题1:

这与第一个"坏"代码示例有什么不同?

正如你已经说过的:这并没有什么不同.这仍然是糟糕的代码.再往下,他们解释如何处理这一点,例如分别比较每个数组项(shallowEqual).

你的问题2:

当它说可以调度一个不更改数据但仍然更改引用的操作,从而导致重新呈现时,它到底是什么意思?

你可能指的是这句话:

...您的组件可能会在每次调度操作时重新呈现...

你误解了这一点:

这句话并没有说调度操作会更改引用.

他们想说的是,调度一个操作将使 Select 器再次运行.例如,更改某些内容会使Reaction重新呈现,重新呈现会使 Select 器再次运行,而该操作会更改某些内容.如果分派操作不会导致任何更改(例如,Reducer会发现不需要更新任何内容),则不会再次调用 Select 器.

然后,通过.map()函数在 Select 器内创建新引用.

因此,调度的操作不会更改任何内容,但如果您查询状态,则会创建一个新array.例如:

const arrayState = [ 1, 2, 3 ];
const selectedArrayWithMap = arrayState.map( item => item );
const selectedArrayNoMap = arrayState;

console.log( selectedArrayWithMap === arrayState ); // <-- false
console.log( selectedArrayNoMap === arrayState );   // <-- true

Reactjs相关问答推荐

我想将状态设置为true,直到每一张卡片都生成并在多姆中呈现

为什么安装FLOBIT后,所有的输入FIELD现在都有一个蓝色的轮廓?

捕获表单数据时的Reactjs问题

GoLang有条件地为.js.gz提供服务(如果它存在),否则为.js

如何使用Reaction Testing Library+Vitest正确更新单元测试中的输入?

在transformResponse中使用来自其他查询的缓存

在构建或部署Reaction应用程序时出错

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

React - 函数组件 - 点击两次问题处理

ReactJS中使用setState方法时,Context内部的State未进行更新

无法在react 中向表中添加行

使用 nextjs App Router 在动态客户端进行服务器端渲染

React - 使用 React 显示错误和积极alert

使用 React.lazy 调试 webpack 代码拆分

刷新页面时状态改变问题

使用 useRef(uuid()) 的目的是什么?

无法重用我的组件,它只显示 1 次

在react 钩子中将数组添加到数组状态给出一个数字

无法有条件地更新useEffect中的setState

调用函数以获取数据并在数据到达时导航到链接