React Native 使用setNativeProps局部刷新组件

最新推荐文章于 2024-06-18 21:25:36 发布
最新推荐文章于 2024-06-18 21:25:36 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： android开发 React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ReturnNull0/article/details/93716427
版权
本文介绍了在React Native中如何使用setNativeProps方法进行组件的局部刷新，以解决复杂页面性能问题。通过设置组件的ref，然后在事件处理函数中调用setNativeProps，可以改变组件的特定属性，如示例中的backgroundColor。
摘要由CSDN通过智能技术生成

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

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

</View>

最低0.47元/天 解锁文章
大漠-孤烟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
native react 更新机制_从源码全面剖析 React 组件更新机制
weixin_39669629的博客
12-20 112
React 把组件看作状态机(有限状态机), 使用state来控制本地状态, 使用props来传递状态. 前面我们探讨了 React 如何映射状态到 UI 上(初始渲染), 那么接下来我们谈谈 React 时如何同步状态到 UI 上的, 也就是:React 是如何更新组件的?React 是如何对比出页面变化最小的部分?这篇文章会为你解答这些问题.在这之前你已经了解了React (15-stabl...
react native 组件间通信 局部刷新
吴蕴强的博客
09-21 9440
组件化是react-native的最大优点之一，因为组件化我们可以做到局部刷新，提高性能。 如图所示 父组件包含连个子组件 添加可以动态增加子组件 log输出： add关键代码： _onPress() { if(show){/*显示删除时 不能添加*/ return ; } let arr = t
reactnative之setNativeProps（局部刷新）
zengyonglan的博客
06-05 5267
D5有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。使用
React Native ref高级用法&&setNativeProps使用
热门推荐
Que_Li的博客
10-20 1万+
ref属性不只是string ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。 render() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount() { this._input.focus
ReactNative进阶（十七）：RefreshControl 组件实现刷新效果
最新发布
2401_84617356的博客
06-18 144
/刷新文案的颜色。//标题显示在刷新指示器下方。//是否启用拉动刷新功能。//用于绘制刷新指示器的颜色（至少一种）。//刷新指示器的背景色。//刷新指示器的大小，请参见RefreshControl.SIZE。//进度视图顶部偏移。
react native 实现ListView的局部更新
君无意的博客
06-12 4466
在ReactNative中UI的刷新大多数情况依赖于state的变更，通过调用组件的setState方法来更新state以达到通知组件重新渲染UI的目的。当然这种做法是官方提供的标准解决方案，在进行简单UI设计时足以满足大多数需求。 但是当遇到结构复杂并存在数据交互的界面设计时，手动管理state这种做法则会把代码逻辑变得非常混乱，组件内不但要负责UI的渲染，还要兼顾state的变更以及不同组件
ReactNative控制只刷新页面的一部分
前人挖坑，后人种（pen）
02-27 1134
shouldComponentUpdate(nextProps, nextState) 该方法控制页面是否需要刷新，true表示刷新false表示不刷新。 解决办法就是：如页面包含多个控件，把控件都封装起来，在封装的控件的shouldComponentUpdate里面判断props是否和之前一致，一致就不刷新。...
React Native 让组件做到局部刷新
anqi0114的博客
10-24 757
利用RN的状态机机制，我们可以通过this.setState({optional:...})来控制界面的刷新，但是一定会触发render方法，那如何保证不调用render方法从而做到界面的局部刷新呢？ 那就是通过setNativeProps，不使用state和props，直接修改RN自带的组件，比如：View，Image，Text...,并且可以做到不触发RN组...
react native 原生js解决局部数据渲染
愿你走过半生，归来任是少年。
06-03 968
总体把控三点 封装 多态 继承 面向对象oop是一种编程思想，最大的好处就是让程序更容易维护增加了代码的重复利用效率。 所谓的手写对象 var per = { name:'laoyeye', age:'90', say:function(){ alert(this.name) } } 数据属性提供的高级功能没必要利用，但理...
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 { ...
使用 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中的RefreshContorl下拉刷新使用
08-29
在React Native中，`RefreshControl`组件是一个非常实用的功能，用于实现下拉刷新的效果，常见于列表视图如`ScrollView`或`FlatList`中。本文将详细介绍如何使用`RefreshControl`进行下拉刷新操作。 首先，我们需要...
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
ReactNative Image组件使用详解
08-29
ReactNative Image 组件使用详解 ReactNative Image 组件是用于显示图片的组件，在 ReactNative 中与开发 Android 时的 ImageView 控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地...
react native 界面实时更新
路漫漫的博客
06-03 2091
界面的实时更新是根据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 2015
在React-Native里面，如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈，不得不放弃通过触发render的方式来改样式，而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果。如下图： header渐变效果 上图中的header渐变和搜索框出现都是直通过setNativeProps来实现的。
react native 数据局部刷新 switch渲染模版
愿你走过半生，归来任是少年。
04-21 400
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 556
2019独角兽企业重金招聘Python工程师标准>>> ...
React Native ScrollView实现下拉刷新组件与加载逻辑
`ScrollView`组件在`react-native`中主要用于展示可滚动的内容，其`refreshControl`属性允许我们在用户试图下拉时显示一个刷新控件，通常用于提示数据即将更新。 首先，我们需要注意的是，`refreshControl`属性只...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值