react-native之SectionList 中state更新，render不重新渲染问题

最新推荐文章于 2021-05-28 12:16:01 发布
原创 最新推荐文章于 2021-05-28 12:16:01 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文档详细介绍了React Native中SectionList组件的两个常见问题及其解决办法。一是state更新后组件未重新渲染的问题，解决方法是在SectionList中添加extraData属性；二是renderSectionHeader中绑定函数无法传参的问题，解决方法是在构造函数中使用bind方法绑定this。这些解决方案将帮助开发者更有效地使用SectionList组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题一：react-native之SectionList 中state更新，render不重新渲染问题

 

解决方法：在SectionList 里面加上 extraData={this.state} 就可以了

 

问题二：SectionList 中 renderSectionHeader 里面绑定函数不能传参问题

 

解决方法：在constructor里面加上下面这句话，完美解决this

this.renderSectionHeader = this.renderSectionHeader.bind(this);

 

 

只作为本人笔记，有问题的同学欢迎下方留言。。。，共同商讨进步

 

Component

工作中最实用的React-Native性能优化总结
qq_29896351的博客
01-03 2231
，如果不使用 getItemLayout，那么所有的 Cell 的高度，都要调用 View 的 onLayout 动态计算高度，这个运算是需要消耗时间的；React Native 因为它的特殊性，做一些性能分析和调试时，需要用到 RN/iOS/Android 三端的工具，下面我就列举一下我平常用到的工具，具体的使用方法不是本文的重点，如有需要可根据关键词自行搜索。在实际开发中，经过一些数据对比，因绑定事件方式的不同引起的性能消耗基本上是可以忽略不计的，re-render 次数过多才是性能杀手。
react-native渲染富文本的几种方案
郊眠寺
08-12 3131
在日常开发中，经常需要用到富文本编辑器来编辑业务内容，例如新闻、论坛等，然后在用到的地方进行渲染，一般在web端可以直接在html中载入编辑好的内容（一般是一段html），不过在的app中不能直接把html渲染进去，接下来我介绍几种渲染html的方案。...
react native 踩坑之 SectionList state更新 不执行render重新渲染页面
aie3296的博客
08-23 384
官方文档中指出 SectionList 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的O...
React Native 的SectionList的页面数据太多显示不全
LoveEate的博客
01-24 2202
            在做项目的时候碰到，使用SectionList当页面数据太多的时候，页面的数据显示不全的情况，然后去排查了下发现是自己渲染列表的时候没有给其的尾部加个高度，代码如下： <SectionList   ListFooterComponent={<View style={{height:50}}/>}  />...
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02 5万+
1. 在redux中修改state页面未更新 解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state 原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
react-native之sectionList 中state更新，render不重新渲染
weixin_41815063的博客
05-28 360
问题一：react-native之SectionList 中state更新，render不重新渲染问题 解决方法：在SectionList 里面加上extraData={this.state}就可以了 ​ 问题二：SectionList 中 renderSectionHeader 里面绑定函数不能传参问题 解决方法：在constructor里面加上下面这句话，完美解决this this.rende...
RN----SectionList实现下拉刷新
RN_David的博客
07-03 704
RN----SectionList实现下拉刷新 首先初始化refreshing为false 然后设置SectionLists里refreshing属性，设置onRedreshing属性 在state中刷新状态为true，在数据拉取成功后将state中refreshing的值设置为false 写的比较潦草：参考链接（大家可以看看这个） 不足之处请大神指点！ ...
react-native中react-native-render-html的使用（不崩溃）
Napchencw的博客
06-04 4042
1、react-native-render-html和react-native-htmlview的比较 App项目中需要用到解析HTML的组件，在github上面找到比较合适的两款，react-native-render-html（RNRH）和react-native-htmlview（RNH）。子啊实际的使用过程中，两个各自有不同的问题。 首先RNRH容易红屏，这个使用过的人肯定有体会，而RNH则在图片方面比较不好处理，最终我选择了RNRH。 2、使用 安装什么的就不说了 import HTM
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
react-native-render-html 库 从 ul 或 ol 标签渲染流程分析 ol 标签左边有 20单位的空白区域无法移除的问题
满地星辰的博客
11-04 1466
react-native-render-html 仓库地址 （下面源码指的 4.1.2 版） https://github.com/archriss/react-native-render-html HTMLRenderers.js 里面定义了 ul 函数，作用是渲染 ul 标签 ul 函数定义如下： export function ul (htmlAttribs, children, ...
验证码点击不刷新，render和renderPartial的区别
songtaiwu的博客
03-05 239
后台登陆调用验证码，点击验证码不刷新，没有反应（所有验证码配置，参数都是正确的）。找错的时候发现可以刷新验证码的页面比不可以刷新验证码的页面多了一段js代码，用来处理点击验证码刷新的事件。为什么会少了一段代码？原来就是因为控制器分别调用了renderPartial和render. 下面就说说它们的区别。在进行页面输出渲染的时候，render输出父模板的内容，将渲染的内容，嵌入父模板。renderP...
ReactNative SectionList state更新,视图不更新的问题
学习笔记666
08-25 870
<SectionList renderSectionHeader={this._sectionComp} renderItem={this._renderListRow} sections={this.state.dataBlobSort} e...
React当中，为什么明明调用了setState()，state也发生了变化，就是没有重新渲染，更新界面？
qq_35175413的博客
06-10 2万+
以前没用过react，改别人的代码，发生了这个问题。原来是原代码中有shouldComponentUpdate(nextProps, nextState)这个方法。这个方法会判断发生什么样的state改变才进行重新渲染。return true的时候重新渲染，false则不变。详情可自行搜索。...
React-Native SetState后页面未触发刷新解决方案
李洋洋的博客
11-14 9479
React-Native SetState后页面未触发刷新解决方案常规设置setState写法未刷新解决方式 常规设置setState写法 this.setState({ 改变的属性 }) 当使用antd组件，改变state中已有数组内部的数据，如增加，删除，会出现数据set正常，但页面并未刷新。 未刷新解决方式 this.setState(Object.assign({}, this...
react setState后render没有更新
sinat_34629014的博客
10-19 7902
react setState后render没有更新 #遇到问题后解决的方法 React.Component 把PureComponent 改成Component 备注：React.PureComponent 通过prop和state的浅对比来实现 如果使用了PureComponent 请确保子组件也是PureComponent ...
React Native 搭配 MobX 使用心得
风雨无阻，执着追求!!!
03-04 1640
MobX 是一款十分优秀的状态管理库，不但书写简洁还非常高效。当然这是我在使用之后才体会到的，当初试水上车的主要原因是响应式，考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处。在使用过程中走了不少弯路，一部分是因为当时扫两眼文档就动手，对 MobX 机制理解得不够；其它原因是 MobX 终究只是一个库，会受限于 React 机制，以及与其它非 MobX 管理...
react-native项目使用flatList后state值改变，不重新渲染页面的问题
weixin_43795169的博客
03-27 2638
react-native项目使用flatList后state值改变，不重新渲染页面的问题 给FlatList指定extraData={this.state}属性，保证state变化时，能够正确触发FlatList的更新。 <FlatList extraData={this.state} data={this.state.taskList} renderItem={this._renderIt...
React 子组件state内数组修改页面不刷新问题
weixin_30764883的博客
03-22 2579
1.在子组件内对数组进行删减后打印数据有变化但是页面没重新渲染 原始写法 deleteBtnClick(index){ let tempList = this.state.attachList; tempList.splice(index,1) this.setState({ attachList:...
React 避免重渲染
sysuzhyupeng的博客
03-14 2万+
组件的重新渲染我们可以在 React 组件中的 props 和 state 存放任何类型的数据，通过改变 props 和 state，去控制整个组件的状态。当 props 和 state 发生变化时，React 会重新渲染整个组件，组件重新渲染的过程可简化如下图：译者之前对diff的理解是，对于一个改变 props 的组件，diff能自动计算出组件内部DOM树的不同，然后经过对比，找出真正变化的DO
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值