引入高阶组件toJS.js后TodoList依然重新渲染

来源：5-8 常用库集成：Immutable.js（2）

爱笑的小熊猫

2021-01-16

在按着老师视频实现了toJS.js并且成功应用后输入text input时候TodoList依然会重新渲染
图片描述

我的代码：
https://github.com/cutePanda123/to-do-list-ui/blob/master/src/HOCs/toJS.js
https://github.com/cutePanda123/to-do-list-ui/blob/master/src/containers/TodoListContainer.js

我觉着老师视频中最开始关于为何mapStateToProps中getVisibleTodo(state).toJS()会导致重新渲染的部分的讲解同学们没能理解清楚
我的理解是即使不使用toJS(), getVisibleTodo依然返回的是一个新的Object数组，所以重新渲染是无法避免的经过我的实际尝试也验证了这个

items: getVisibleTodo(state).toJs()修改为items: getVisibleTodo(state)然后在TodoList.js中加入todos.toJS()也是依然会重新渲染

这个问题其他同学在之前的提问中也已经问到老师还没有回复能否请老师帮助具体讲解下

图片描述

写回答

1回答

艾特老干部

2021-01-24

你好。课程中的getVisibleTodos实现如下：

//img.mukewang.com/szimg/600cf1f0093166fb12260536.jpg

当筛选项处于"completed" 或“active”时，每次都会返回一个新的data数组对象，这时候即使用了toJS这个高阶函数，也无法避免因input输入导致的TodoList组件的重新渲染。

课程中，实际是以筛选项处于“all”的条件下进行讲解的，这时候使用toJS可以保证 input 输入不会导致TodoList组件的重新渲染。

如果你的代码运行效果不一致，可以先直接运行课程提供的源码看下效果，然后比对下两者代码间的差异，找下问题出在哪里。

React16+Redux实战企业级大众点评Web App

从架构设计到部署上线,带你学习React技术栈与核心思想

1071 学习 · 306 问题

查看课程

相似问题

老师，这里的toJS高阶组件是什么形式的高阶组件？

回答 1

老师，children这种渲染方式（不管path是否匹配都会把组件渲染出来）==》我真有点想不出应用场景。

回答 1

<WrappedComponent {...propsJS} /> immutable本来为了高效，但是这里也不完全克隆了？效率一样了？

回答 3

toJs这个高阶函数

回答 1

老师，您好。请问为什么text的改变会导致调用getVisibleTodos这个函数呢？

回答 1

打开慕课网App查看更多内容