react 对象渲染_[React]对于一些不需要渲染到组件上展示的数据对象，可不可以做为组件类的成员变量的存在？...

最新推荐文章于 2021-12-09 18:09:39 发布
最新推荐文章于 2021-12-09 18:09:39 发布
阅读量236 收藏
点赞数
文章标签： react 对象渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39648469/article/details/112031024
版权

用 react 整合一些现有的插件，如 imagecropper 图像裁剪插件的使用，需要 new 一个对象出来，再在这个对象上进行一些图像操作。

因为这个对象是提供功能而非提供组件数据渲染的，因此把他通过 this.setState 的话，会不可避免的导致 react 进行 state 数据对比然后重新渲染组件。考虑过在 shouldcomponentupdate 里做判断来决定是否更新组件来避免 react对象比较和重新渲染(虽然这个对比过程很快)。

而这个判断的逻辑可能会导致一些不必要的问题，对象比较中存在人为的逻辑漏洞(深浅对象对比等)，则可能导致组件渲染的异常。

因此既要有一个可以存放对象的地方，又可以避免不必要组件重渲染，那我是否可以把这个对象当成 react 组件对象的一个成员对象存在呢？其实这个方法是可行的，我只是想了解一下，这样做是否是 react 实践的一种反模式或者从长远来看是否会产生一些弊端？

目前自己的项目是用 react 全家桶(react\react-redux-react-router-redux)， redux state 存全局的数据，组件自身的 state 来存放组件自身的一些局部状态(开关、表单数据)，貌似上边的 imagecropper 不管是放 redux state 还是组件自身 state ， imagecropper 对象的改变都会导致组件重新渲染，总不至于放全局变量吧。。。想来想去还是放在组件成员变量里好啊

react 类组件避免无意义渲染提高组件性能
weixin_43294560的博客
07-01 408
当组件重新渲染时,会浅比较(如比较引用)props和state,如果发生改变就重新渲染组件,当不改变就不渲染组件 当使用Component时,只要改变了props/state,不管内容是否变化,都会渲染组件 方案一: 在组件中添加shouldComponentUpdate生命周期函数,对数据进行把控后再决定是否渲染 方案二: 将Component替换成PureComponent PureComponent内置了shouldComponentUpdate,组件中不能再写shouldCompone
React性能探索 --- 避免不必要渲染
weixin_33709364的博客
08-08 344
背景 上一篇文章的结尾http://imweb.io/topic/5985cc4...我们说到，也许，不是所有的节点都需要重新渲染，对于那些不需要渲染的节点，我们如何找到它们并做优化呢？ 本篇文章来具体解答这个问题。 应用分析 首先，先看这个应用：页面的两部分分别渲染5000个节点，从1-5000。当点击按钮之后，第二部分的节点会更新，重...
React中useState值为对象时改变值不渲染
qq_52685664的博客
09-03 1618
原因：React中默认浅监听，当State值为对象时，栈中存的是对象的引用（地址），setState改变的是堆中的数据 所以此时setArr(arr)后，栈中的地址还是原地址，React浅监听到地址没变，故会认为State并未改变，故没有重渲染页面 思路：将栈中原arr所指向的地址改变即可 const ceshi = [ { name: '测试数据1', icon: 'jigou', count: 2, color: '#FF9B74' }, { name: '测试数据2', count:..
React组件复用传递数据+列表渲染
weixin_45974291的博客
11-28 235
效果: 总思路：在app.jsx组件中使用MyNav.jsx组件，然后将app.jsx组件挂载到index.js中 MyNav.jsx: import React, { Component } from 'react'; class MyNav extends Component { render() { console.log(this.props.nav); return ( <div> .
React入门 Part6
qq_40462579的博客
02-24 93
设计合适的State 组件state必须能够代表一个组件UI呈现的完整状态集，即组件的任何UI改变都可以从state的变化中反映出来； 同时，state还必须代表一个组件UI呈现的最小状态集，即state中的所有状态都用于反映组件UI的变化，没有任何多余的状态，也不应该存在通过其他状态计算而来的中间状态。 state所代表的一个组件UI呈现的完整状态集又可以分为两类数据： 用作渲染组件时用到的数据的来源； 用于组件UI展现形式的判断依据； 示例代码： import React from 'react';
ReactNative中组件变量方法的导入导出共1页.pd
11-22
- **状态（State）**：React组件的状态是可变的，并且可以驱动组件重新渲染。`this.state`是一个对象，用于存储组件的内部数据。当你需要更新UI时，可以通过`this.setState()`方法来改变状态。 - **属性（Props）*...
react 中父组件与子组件双向绑定问题
10-16
React推崇的是通过props将数据从父组件传递到子组件，子组件通过props接收数据，并且当数据变化时，通过调用回调函数通知父组件进行更新。但是，在某些场景下，我们仍然需要实现类似双向绑定的效果，尤其是当子组件...
功能丰富且可自定义的数据网格React组件_TypeScript_JavaScript_下载.zip
最新发布
04-21
1. 数据绑定：组件能够绑定到各种数据源，如JSON对象数组、API接口等，自动将数据渲染成表格形式。 2. 自定义列：用户可以自由配置列的显示内容、宽度、排序、过滤等属性，以适应不同的数据展示需求。 3. 编辑功能...
详解React 条件渲染
10-15
例如，不能在条件渲染中使用组件的生命周期方法或者副作用钩子，因为这些方法和钩子的调用需要有组件的实例上下文。 此外，使用条件渲染时还需注意渲染性能的优化。尽管React有其内部机制来优化DOM操作，避免不必要...
React子组件内部变量不更新有缓存
tcllxxl的博客
04-08 1133
1：在组件外所在的div添加key 2：使用state，清除组件元素 this.botom_element = ""; this.setState({ _render: !this.state._render }, ()=>{ this.botom_element = <Radio data={ newData } /> }) 清除组件所在元素，渲染，再次传入新数据...
17.React 如何定义对象及常见操作方法
热门推荐
Tiger的专栏
05-08 1万+
目录 1.对象概述 2.对象和属性 3.枚举一个对象的所有属性 4.创建新对象 4.1使用对象初始化器 4.2使用构造函数 4.3使用 Object.create 方法 4.4继承 4.5对象属性引用 4.5.1为对象类型定义属性 JavaScript的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合，一个属性包含一个名和一个值。一个属性的值可以是...
react组件中全局变量如何设置
weixin_45538554的博客
06-24 6063
import React from 'react' //此变量写在声明组件之前，不为组件内部的变量，即使组件销毁，该变量依然存在！ //类似java中的static修饰的静态变量 let num = 0 export default class A extends React.PureComponent { componentDidMount() { console.log(temp) } render() { return ( <div>A</d
react 对象渲染_React动态渲染组件（对象分配与函数返回）
weixin_29026387的博客
12-29 707
我在这里碰到了一堵砖墙，这意味着我无法完全弄清楚为什么接下来的两个版本的代码行为如此不同。React动态渲染组件(对象分配与函数返回)在第一个版本，当我初始化一个this.childComponent = ()，其道具似乎并不当我改变了Parent的状态(通过setState())来更新。即使实际调用了setState()，并且Parent的状态已更新，也会发生这种情况。在第二个版本中，当我实际初...
react 隐藏组件 阻止渲染
gwdgwd123的博客
08-23 2557
在下面的例子中，&lt;WarningBanner /&gt; 根据属性 warn 的值条件渲染。如果 warn 的值是 false，则组件不会渲染： function WarningBanner(props) { if (!props.warn) { return null; } return ( &lt;div className="warning"&gt; ...
React Hook如何保证每次渲染state不会丢失，Dva Model在state中存储数据的底层原理
比起未来可期，我更喜欢如约而至
09-05 2271
问题描述 1、 我们知道JavaScript中想要实现类似于Java静态变量的话，可以用闭包和localStorage实现。 闭包：有权访问另一个函数作用域变量的函数叫做闭包。 满足三个条件 1. 定义了局部变量 2. 函数返回一个匿名函数 3. 返回的匿名函数中需要使用第一步定义的局部变量 局部变量被另一个函数使用，即变量被引用，所以就不会被回收了，因此可以利用这一个特性来封装一个私有变量。 本地存储是一个window的属性，包括localStorage和sessionStorage，前者一直
react创建组件的2种方式以及如何赋值
weixin_43090018的博客
01-13 3312
1、使用function构造函数进行创建 function Tem (props){ // 接收传来的值，用props console.log(props) return <h1>这是Tem组件</h1> } const person = { name: 'aa', age: 13, text: '这是人' } ReactDOM.render(<div> 123 {/* 为组件传值 */} <Tem name={pers.
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
qq_42753705的博客
12-09 5514
（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题
React 条件渲染最佳实践(7 种方法)
大灰狼的小绵羊哥哥的博客
09-28 1020
在 React 中，条件渲染可以通过多种方式，不同的使用方式场景取决于不同的上下文。 在本文中，我们将讨论所有可用于为 React 中的条件渲染编写更好的代码的方法。 ~~ 条件渲染在每种编程语言（包括 javascript）中都是的常见功能。 在 javascript 中，我们通常使用if else语句，switch case语句和三元运算符编写条件渲染。 以上所有这些方法都适用于 React。 但是问题是，我们如何才能有效地使用它们？ 像你知道的那样，React 具有JSX标记，通常我们需...
【React】哪些数据应该放到state中？
weixin_30924087的博客
10-31 983
1.识别出最小的（但是完整的）代表UI的state： 为了正确构建应用，首先需要考虑应用需要的最小的可变 state 数据模型集合。此处关键点在于精简：不要存储重复的数据。构造出绝对最小的满足应用需要的最小 state 是有必要的，并且计算出其它强烈需要的东西。 在判断哪一个是 state 时，简单地对每一项数据提出三个问题： 1.是否是从父级通过 props 传入的？如果是，可能不是 ...
React组件开发与数据渲染实战教程
在React中，开发者可以使用map()函数来遍历数组，并返回一个JSX元素数组，这样就可以动态地将数组数据渲染到页面上。这对于制作如商品列表、用户信息展示等组件尤其重要。 此外，本教学资料还将介绍前端开发者必须...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值