React Native 使用setNativeProps局部刷新组件

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

本文介绍了在React Native中如何使用setNativeProps方法进行组件的局部刷新，以解决复杂页面性能问题。通过设置组件的ref，然后在事件处理函数中调用setNativeProps，可以改变组件的特定属性，如示例中的backgroundColor。

在React Native中可以通过setState实现刷新组件，setState会触发render()方法重新渲染，页面布局复杂的时候会遇到性能问题，React Native提供局部刷新组件的方法setNativeProps，使用如下

<View
    ref={(c) => this.refView = c}>

</View>

最低0.47元/天 解锁文章
react native 组件间通信 局部刷新
吴蕴强的博客
09-21 9523
组件化是react-native的最大优点之一，因为组件化我们可以做到局部刷新，提高性能。 如图所示 父组件包含连个子组件 添加可以动态增加子组件 log输出： add关键代码： _onPress() { if(show){/*显示删除时 不能添加*/ return ; } let arr = t
【JavaScript源代码】react native之ScrollView下拉刷新效果.docx
12-29
在本文中，我们将探讨如何在React Native中使用`ScrollView`的`refreshControl`属性实现下拉刷新效果。 首先，我们需要创建一个自定义的刷新组件。在这个例子中，我们创建了一个名为`CKRefresh`的组件。这个组件...
reactnative之setNativeProps（局部刷新）
zengyonglan的博客
06-05 5409
D5有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。使用
react native 实现ListView的局部更新
君无意的博客
06-12 4585
在ReactNative中UI的刷新大多数情况依赖于state的变更，通过调用组件的setState方法来更新state以达到通知组件重新渲染UI的目的。当然这种做法是官方提供的标准解决方案，在进行简单UI设计时足以满足大多数需求。 但是当遇到结构复杂并存在数据交互的界面设计时，手动管理state这种做法则会把代码逻辑变得非常混乱，组件内不但要负责UI的渲染，还要兼顾state的变更以及不同组件
ReactNative控制只刷新页面的一部分
前人挖坑，后人种（pen）
02-27 1242
shouldComponentUpdate(nextProps, nextState) 该方法控制页面是否需要刷新，true表示刷新false表示不刷新。 解决办法就是：如页面包含多个控件，把控件都封装起来，在封装的控件的shouldComponentUpdate里面判断props是否和之前一致，一致就不刷新。...
native react 更新机制_从源码全面剖析 React 组件更新机制
weixin_39669629的博客
12-20 198
React 把组件看作状态机(有限状态机), 使用state来控制本地状态, 使用props来传递状态. 前面我们探讨了 React 如何映射状态到 UI 上(初始渲染), 那么接下来我们谈谈 React 时如何同步状态到 UI 上的, 也就是:React 是如何更新组件的?React 是如何对比出页面变化最小的部分?这篇文章会为你解答这些问题.在这之前你已经了解了React (15-stabl...
精选资源
React Native 计算器和计算器输入组件
06-08
安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import React from 'react' import { View } from 'react-native' import { ...
精选资源
react-native-verify-slider:用于React Native的动画Verification Slider组件
05-17
通过使用此组件，开发者可以轻松地在他们的React Native应用中集成这种常见的UI元素，提升用户体验。 React Native是Facebook推出的一个开源框架，它允许开发者使用JavaScript和React来构建原生的iOS和Android应用...
使用 ReactART 的 React Native 评分组件。
06-08
使用前：Link ART in Xcode 在你的项目中直接使用这个组件可能会遇到以下错误： No component found for view with name "ARTSurfaceView" 首先从 your-project/node_modules/react-native/Libraies/ART/ 中找到 ART...
React Native 让组件做到局部刷新
anqi0114的博客
10-24 865
利用RN的状态机机制，我们可以通过this.setState({optional:...})来控制界面的刷新，但是一定会触发render方法，那如何保证不调用render方法从而做到界面的局部刷新呢？ 那就是通过setNativeProps，不使用state和props，直接修改RN自带的组件，比如：View，Image，Text...,并且可以做到不触发RN组...
react native 原生js解决局部数据渲染
愿你走过半生，归来任是少年。
06-03 1038
总体把控三点 封装 多态 继承 面向对象oop是一种编程思想，最大的好处就是让程序更容易维护增加了代码的重复利用效率。 所谓的手写对象 var per = { name:'laoyeye', age:'90', say:function(){ alert(this.name) } } 数据属性提供的高级功能没必要利用，但理...
react native 界面实时更新
路漫漫的博客
06-03 2220
界面的实时更新是根据state和props的变化来实现的 let newList = state.list; newList[0].name == '123' return Object.assign({}, state, { ...state, list: newList }); newList中元素的值确实变化了，但是界面却不刷新，因为list和newList是数组对象，他们的...
react-native setNativeProps进阶
ABang的博客
06-26 2123
在React-Native里面，如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈，不得不放弃通过触发render的方式来改样式，而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果。如下图： header渐变效果 上图中的header渐变和搜索框出现都是直通过setNativeProps来实现的。
react native 数据局部刷新 switch渲染模版
愿你走过半生，归来任是少年。
04-21 457
React Native 版本执行0.57的规则 第一版优惠券中心，是删除已领取的状态，后来又改为全部展示，分为已领取、去使用、已使用、已过期几种状态。 import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, Image, ImageBackground, Touchable...
react中列表渲染的局部刷新
热门推荐
ConanZzz_的博客
05-11 1万+
最近在写demo的时候遇到一个更新列表中某个的对象的某个值，最期待的结果肯定是局部刷新，但是我们往往在改变值之后会遇到全局都刷新的问题，以下为个人实验出来的一个小技巧。 首先我有以下数据需要通过react的列表方法渲染： let list=[ { id:1, show:false }, { id:2, s...
ReactNative遇到的坑总结(持续更新)
weixin_34413357的博客
09-15 618
2019独角兽企业重金招聘Python工程师标准>>> ...
RN之 ref和setNativeProps使用
ABang的博客
06-26 2483
1 ref属性不只是string  ref属性不仅接受string类型的参数，而且它还接受一个function作为 callback。这一特性让开发者对ref的使用更加灵活。 render() { return (c) => this._input = c} />; }, componentDidMount() { this._input.focus(); },re
react 指定组件进行渲染.，防止多余渲染的三个方法
weixin_44745920的博客
03-18 1533
方法一：使用生命周期函数shouldComponentUpdate() import React, { Component } from 'react' class Foo extends Component { shouldComponentUpdate(nextProps, nextState) { //两个参数nextProps和nextState，表示下一次props和一次state的值 //生命周期函数shouldComponentUpdate()默认返回ture，返回fa
【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解
weixin_33860722的博客
05-13 3008
本站文章均为 李华明Himi 原创,转载务必在明显处注明： 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2242.html开发过游戏的都应该很清楚，“刷屏”是多么的重要。其实开发应用也如此，当组件的数据被修改后，如何及时更新组件呈现出最新的数据与效果一样至关重要。那么这里Himi大概讲三种常用的方式：this.setSta...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值