关于React.js的状态同步问题-CSDN论坛

关于React.js的状态同步问题

.NET技术 > ASP.NET

收藏回复

[问题点数：40分]

⋅两道看似简单的面试题，通过率为0 ⋅关于React.js的状态同步问题 ⋅有人说我用orm编程是新手菜鸟 更多帖子 关注私信空间博客 lr5420511 等级 本版专家分：174 结帖率 75%:     最近没有做.net，因为项目组要使用React.js前端框架，但是现在的人手里面又没有一个了解的。所以就安排我学习这个前端框架，大致看了一下中文文档。因为React.js被FB号称为现在最好的前端MVVM框架，我从开始就带着崇敬的心态去学习，但是看到如何处理模型和视图之间数据同步的问题时，我开始了自己的担忧，并做了几个实验印证了我的这些担忧其实并不是空穴来风。

   如图：




    注意图2的描述，对于ViewModel状态改变后，框架内部会调用组件的render方法，意味着每一次的状态变化都会在内存中构建一次组件的虚拟Dom结构，通过实验我发现，当新的组件Dom结构和以前的结构不一致时，框架会把该组件完全刷掉。当一致时，会对比每一个状态点的值是否改变，以此作为同步的基础。但无论如何，状态改变后，为了同步到视图都会生成一次虚拟组件Dom结构和使用两次的组件对比更新状态点。  那如果我们的模型只有一个属性的状态改变了（他可能还有其他的属性），有没有必要大动肝火的去又在内存中重新生成一次该组件的虚拟Dom结构，然后逐一对比两次的组件的状态点的不一致，然后进行同步。这个过程中做了多少吃力不讨好的工作？其实完全可以做到哪个属性的状态改变了，我们就只去刷新对应的那个点就好了，就像微软长期以来做的那样。

   以上我的一些粗浅的认识，有一些东西还没有深入研究，如果有错误还请各位网友海涵，希望大家一起交流共同进步。

2017-02-19 12:08:01

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅pc端怎么获取支付宝账号给用户提现 ⋅webservice项目的权限 ⋅找他呢？ 更多帖子 关注私信空间博客 li905663280 等级 本版专家分：64: this.setState 让状态发生变化，可以在特殊方法中让用户自己决定是否重新render，这样就让用户可以自行减少render的次数，达到优化的效果

2017-02-19 12:16:32

点赞只看TA 引用举报 #1得分 0

⋅两道看似简单的面试题，通过率为0 ⋅关于React.js的状态同步问题 ⋅有人说我用orm编程是新手菜鸟 更多帖子 关注私信空间博客 lr5420511 等级 本版专家分：174: 引用 1 楼 li905663280 的回复:
this.setState 让状态发生变化，可以在特殊方法中让用户自己决定是否重新render，这样就让用户可以自行减少render的次数，达到优化的效果

谢谢您的回复，那如果ViewModel状态改变了，我们又不去render，是否有其他的方法可以实现状态的同步？

2017-02-19 12:20:55

点赞只看TA 引用举报 #2得分 0

⋅两道看似简单的面试题，通过率为0 ⋅关于React.js的状态同步问题 ⋅有人说我用orm编程是新手菜鸟 更多帖子 关注私信空间博客 lr5420511 等级 本版专家分：174: 引用 1 楼 li905663280 的回复:
this.setState 让状态发生变化，可以在特殊方法中让用户自己决定是否重新render，这样就让用户可以自行减少render的次数，达到优化的效果

是使用shouldComponentUpdate返回false来让框架不调用render吗？感觉这样子处理并没有从根本上解决问题

2017-02-19 12:39:47

点赞只看TA 引用举报 #3得分 0

⋅有关 word 内容改动和比较方法 ⋅一个意想不到的问题 ⋅你们的 gmail 还容易上去吗？ 更多帖子 关注私信空间博客 以专业开发人员为伍 等级 本版专家分：476454 勋章 进士 2018年总版新获得的技术专家分排名前十 2017年总版技术专家分年内排行榜第十 2013年总版技术专家分年内排行榜第八 银牌 2021年1月总版技术专家分月排行榜第二 铜牌 2018年12月总版技术专家分月排行榜第三 2018年11月总版技术专家分月排行榜第三 2017年2月总版技术专家分月排行榜第三 红花 2021年2月 .NET技术大版内专家分月排行榜第一 2021年1月 .NET技术大版内专家分月排行榜第一 2019年1月 .NET技术大版内专家分月排行榜第一 2018年12月 .NET技术大版内专家分月排行榜第一 2018年11月 .NET技术大版内专家分月排行榜第一 2018年10月 .NET技术大版内专家分月排行榜第一 2018年9月 .NET技术大版内专家分月排行榜第一 2018年7月 .NET技术大版内专家分月排行榜第一 2018年6月 .NET技术大版内专家分月排行榜第一 2018年1月 .NET技术大版内专家分月排行榜第一 2017年5月 .NET技术大版内专家分月排行榜第一 2017年4月 .NET技术大版内专家分月排行榜第一 2017年3月 .NET技术大版内专家分月排行榜第一 2017年2月 .NET技术大版内专家分月排行榜第一 2016年10月 .NET技术大版内专家分月排行榜第一 2016年8月 .NET技术大版内专家分月排行榜第一 2016年7月 .NET技术大版内专家分月排行榜第一: 我在2015年底、2016年前几个月接触 React，最终确定它是个伪 mvvm。它不过是 mvc 框架，说它是 mvvm 框架是言过其实了，它离 mvvm 差的是十万八千里。

当然我接触它，那个时候是因为它号称直接操作 mongodb 数据库并且自动获得数据改变通知，我打算就好像是 winform 初学者刚学 c/s 程序那样可以让一些程序员用最最低级的入门手段就能写前端应用。后来发现这个也是大坑，不能这样来开发，还是要回到真正的 c/s（有自己的服务器端框架）的方向上来。

不过就你的问题来说，在前端弄一个 mvc 刷新模式并非不可以。因为毕竟是在内存中——没有跨网线，而且有许多优化判断措施，速度还是差别不大。问题是这种模式太简单了，不能满足基本的 mvvm 需求。

比如说你用 ko 框架写一个 pureComputed 计算属性，或者哪怕是一个简单的 function，当你计算中用到了某些 observable 对象时，你根本不用关心何时需要 render 的问题。当有其中一个你在计算中引用的对象改变了，那么这个 pureComputed 或者 function 所绑定的 DOM 就会自动改变绑定的多种特性（而不是重建！），你根本不用指定说某个数据需要绑定某个组件，你也根本不可能指定何时 render。而且当这个 pureComputed 或者 function 根本没有绑定 DOM 的时候，它又智能地不去冗余进行计算。

React 是个有些粗制滥造的庞大的框架，根本不是像 ko 那样精巧而又高效的框架。编程工作量上，是5:1 的工作量。当然关键还是看什么人来推广。曾经我知道有些教师每月领4、5万块钱，跑到各大互联网公司去求人家某个项目组的人试用一下 React。然后就会发现铺天盖地地广告，说国内某某互联网巨头的产品是用React 来开发的，这种宣传伎俩。

2017-02-19 13:10:01

点赞只看TA 引用举报 #4得分 0

⋅两道看似简单的面试题，通过率为0 ⋅关于React.js的状态同步问题 ⋅有人说我用orm编程是新手菜鸟 更多帖子 关注私信空间博客 lr5420511 等级 本版专家分：174: 引用 4 楼 sp1234 的回复:
我在2015年底、2016年前几个月接触 React，最终确定它是个伪 mvvm。它不过是 mvc 框架，说它是 mvvm 框架是言过其实了，它离 mvvm 差的是十万八千里。

当然我接触它，那个时候是因为它号称直接操作 mongodb 数据库并且自动获得数据改变通知，我打算就好像是 winform 初学者刚学 c/s 程序那样可以让一些程序员用最最低级的入门手段就能写前端应用。后来发现这个也是大坑，不能这样来开发，还是要回到真正的 c/s（有自己的服务器端框架）的方向上来。

不过就你的问题来说，在前端弄一个 mvc 刷新模式并非不可以。因为毕竟是在内存中——没有跨网线，而且有许多优化判断措施，速度还是差别不大。问题是这种模式太简单了，不能满足基本的 mvvm 需求。

比如说你用 ko 框架写一个 pureComputed 计算属性，或者哪怕是一个简单的 function，当你计算中用到了某些 observable 对象时，你根本不用关心何时需要 render 的问题。当有其中一个你在计算中引用的对象改变了，那么这个 pureComputed 或者 function 所绑定的 DOM 就会自动改变绑定的多种特性（而不是重建！），你根本不用指定说某个数据需要绑定某个组件，你也根本不可能指定何时 render。而且当这个 pureComputed 或者 function 根本没有绑定 DOM 的时候，它又智能地不去冗余进行计算。

React 是个有些粗制滥造的庞大的框架，根本不是像 ko 那样精巧而又高效的框架。编程工作量上，是5:1 的工作量。当然关键还是看什么人来推广。曾经我知道有些教师每月领4、5万块钱，跑到各大互联网公司去求人家某个项目组的人试用一下 React。然后就会发现铺天盖地地广告，说国内某某互联网巨头的产品是用React 来开发的，这种宣传伎俩。

        谢谢您的回复，其实之前我也已经初步实现出了同步代码，所有的代码加起来也没有100行。就如您所说，当没有绑定Dom时也不会去做多余的运算。每一次状态变化都只去刷新绑定规则列表中的有的规则，按照这个规则的描述来进行状态同步。
        如图中这个就是他的调用过程

        每一次的状态变化，都会根据绑定规则列表中的规则来做指定的同步操作。由于内部实现实在太简单，被项目组否定掉了，没办法又重新学习其他的框架。

2017-02-19 14:30:08

点赞只看TA 引用举报 #5得分 0

⋅pc端怎么获取支付宝账号给用户提现 ⋅webservice项目的权限 ⋅找他呢？ 更多帖子 关注私信空间博客 li905663280 等级 本版专家分：64: 引用 3 楼 lr5420511 的回复:
Quote: 引用 1 楼 li905663280 的回复:

this.setState 让状态发生变化，可以在特殊方法中让用户自己决定是否重新render，这样就让用户可以自行减少render的次数，达到优化的效果

是使用shouldComponentUpdate返回false来让框架不调用render吗？感觉这样子处理并没有从根本上解决问题

正常的处理是这样的。

2017-02-20 09:22:16

点赞只看TA 引用举报 #6得分 0

收起

收藏回复

lr5420511

等级：

关注私信 TA的帖子

react同步方法_深入 React 的 setState 机制: 本文在我的 Github博客 https://github.com/Jacky-Summer/personal-blog 同步更新前言本篇写的 setState(涉及源码部分)是针对 React15 版本，即是没有 Fiber 介入的；为了方便看和写，所以选择旧版本，Fiber 写起来...

react中setState的同步、异步更新: react在setState的时候，大致需要经过以下几点：更新state->创建新的VNode->diff算法对比差异->渲染以上过程会触发四个钩子函数： shouldComponentUpdate、componentWillUpdate、render、...

Vue.js，React.js和Angular.js三者的比较: 了解前端框架之前先了解一下他们框架的模式，前端框架模式可以归结为三类分别为MVC，MVP，MVVM 1.MVC：Model(模型)+View(视图)+controller(控制器)，主要是基于分层的目的，让彼此的职责分开。...

使用react的好处_react.js的作用: 冉冉说我的理解很浅薄，尝试回答题主的问题。在这些现代前端框架没出现之前(react、vue、angular)，我们做一个点击后更新列表的功能需要这样。$('#btn').click(function(e){$.ajax({url:'some/url',data:{$(e.target...

React.js和Vue.js的语法并列比较: React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，...

写一本关于 React.js 的小书: React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huziketang.com/books/react/ ...

React.js——Redux同步操作: 前言 ...Redux的React绑定库是基于容器组件和展示组件相分离的开发思想。展示组件作用：描述如何展现骨架、样式直接使用Redux：否数据来源：props 数据修改：从props调用回调函数调用...

React.js之React Hooks使用: 仅供个人学习使用，源码请见文件末尾 1.React Hooks简介 React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式...useState是react自带的一个hook函数，它的作用是用来声明状态变量。 const [ c

React.js 小书: 本文作者：胡子大哈 ...因为工作中一直在使用 React.js，也一直以来想总结一下自己关于 React.js 的一些知识、经验。于是把一些想法慢慢整理书写下来，做成一本开源、免费、专业、简单的入门级别的小书，提供给社区

React.js 初级入门学习, 你学废了吗?: 文章目录React.js 初级入门教程, 你学废了吗？React 简介React学习路线React与Vue的对比组件化方面开发团队方面更多对比为什么要用ReactReact 特点React中的核心概念虚拟DOM (Virtual DOM)什么是DOM?什么是...

React.js 小书阅读笔记: 仅供个人学习！本文作者：胡子大哈本文原文：...React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。 ...

React.js 开发参见问题: 文章中我整理了 React.js 开发过程中一些参见问题的解答汇总，供大家参考。 1. 一些课程资源课程完整的思维导图请查考文章：React.js 入门与实战课程思维导图，我使用的思维导图软件是 Mac 下的 iThoughtsx...

react.js和react.php,vue.js和react的对比：react好还是vue.js好: vue.js和react都是javascript的库，也就是框架，那么vue.js和react这两个框架哪个好呢？本篇文章就来通过对比vue.js框架和react框架来给大家说说react好还是vue.js好，有感兴趣的朋友可以看一看。首先我们来简单看...

Vue.js与React的全面对比: Vue.js与React.js从某些反面来说很相似，通过两个框架的学习，有时候对一些用法会有一点思考，为加深学习的思索，特翻阅了两个文档，从以下各方面进行了对比，加深了对这两个框架的认知。 1.数据绑定 1.1 Vue中有关...

React.js - 第2天: React.js - 第2天 0. 安装 React Developer Tools 调试工具 React Developer Tools - Chrome 扩展下载安装地址主要内容学习创建组件的第二种方式美化React组件的样式小Demo穿起来之前学习的知识点 ...

React.js（函数式组件）: 一般，在一个文件中，我们应该只写一个类组件，其他子组件最好是函数式组件，但是用 javascript 实现的函数式组件不能访问 this.ref 和 this.state ，而且也没有生命周期钩子函数，所以在 typescript 中官方还...

二十二、React.Component用法: 二十二、React.Component用法组件(Components)允许您将UI拆分为独立的可重用的部分，并单独的考虑每个部分。总览 React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以...

前端迷思与React.js: 前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区。开始吧: 目前， Web 开发技术框架选型为两种的占 80% 。这种戏剧性的变化持续了近 6 年...

react.js解决 render 比 componentWillMount 先执行完毕问题: react.js解决 render 比 componentWillMount 先执行完毕问题componentWillMount异步调用导致函数未执行完毕，render（）已渲染完毕，出现undefined参数 componentWillMount异步调用导致函数未执行完毕，render（）已...

vue.js 对比 angularJS、react 前端框架: React React 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 ...

react.js取消滚动条_Three.js和React中的滚动，折射和着色器效果: react.js取消滚动条View demo 查看演示Download Source 下载源In this tutorial I will show you how to take a couple of established techniques (like tying things to the scroll-offset), ...

js return 后运行另_一篇文章教你并列比较React.js和Vue.js的语法【实践】: 作者：杜尼卜转发链接：https://segmentfault.com/a/1190000022531144前言React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建...

【重点】React.Component用法: 组件(Components)允许您...这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类，并且至少定义一个render()方法即可使用。你可以使用ES6中class定义一个React组件： class Greeting extends Rea

react.js: React React学习内容 React学习版本： 16.x React老版本项目： 15.x react官网说 17.x 会使用的一些技术 React应用级脚手架 CRA dva umi create-react-app 【 CRA 】 React官网提供的脚手架脚手架：作用： ...

React.js解决setState的异步问题: 由于react中把setState设置为异步操作函数，这有时候会给我们带来以一些问题，下面介绍一下怎么解决这个问题。 1. 在setState完成的回调里执行需要的操作 setState函数的第二个参数允许传入回调函数，在状态更新...

React.js 开发参见问题 Q&A: 文章中我整理了 React.js 开发过程中一些参见问题的解答汇总，供大家参考。 1. 一些课程资源课程源码 GitHub 地址：https://github.com/ParryQiu/IMOOC-React 1.1 2018-03-26 更新针对源码文件夹 react-router-4_...

react中dispatch_深入解析React《setState 做了什么》: 引言setState 是 React 框架最常用的命令，它是用来更新状态的，这也是 React 框架划时代的功能。但是 setState 函数是 react 包导出的，他们又是如何与 react-dom react-native react-art 这些包结合的呢？概述...

React + Dva.js 使用: Dva简介：Dva是基于redux和redux-saga的数据流方法，并且内置了react-router和Fetch, 说白了就是融合了redux+redux-saga+react-router dva = React-Router + Redux + Redux-saga Dva详细介绍请看官方Api：...

初学者的快速入门来学习React.js: 快速入门reactDownload demo - 679.4 KB 下载演示-679.4 KB 什么是React.js？...React.js is an open source JavaScript based library for building frontend (user interface) of a web or mobile applicat...

数学建模30种算法大全: 数学建模最常用的30种算法！全国大学生数学建模竞赛创办于1992年，每年一届，已成为全国高校规模最大的基础性学科竞赛，也是世界上规模最大的数学建模竞赛。2018年，来自全国34个省/市/区(包括香港、澳门和台湾)及美国和新加坡的1449所院校/校区、42128个队（本科38573队、专科3555队）、超过12万名大学生报名参加本项竞赛。

相关热词 c# 负数补码 c# 读取json c# 画图超出画布判断 c#在注册表下创建个文件 c#中的数组添加元素 c#逆向 c#输出xml文件中元素 c#获取系统盘符 c# 微信发送图片消息 c# 对时间