jQuery和MVVM类框架的编程区别点

Posted 2020-10-06

本文说的mvvm框架以react为列，其他应该也是类似的；

react实际上仅仅是帮助我们再View层简化，让我们仅仅需要专注数据，只要数据改变，所有的视图就会自己跟随着改变，

本人自己做react项目目前大概一个多月，然而，好几次都仍然想着使用jQuery的方式，经过同事的指点，发现了此jQuery之所有被我们所弃用，并不是盲目的想要摒弃以前的东西，而是真的使用它远没用不用他效率高！，

以今天自己写的项目的一个小点来说：

handleSave(e) {

let textareaEles = document.querySelectorAll("textarea[data-id]");
      let textareaDataArr = [];
      for (let i = 0; i < textareaEles.length; i++) {
         debugger;
         let textareaEle = textareaEles[i];
         textareaEle.dataId;
         textareaDataArr.push({ id: textareaEle["data-id"], remark: textareaEle.innerhtml })
      }
      let json = JSON.stringify(textareaDataArr);//这个是获取的JSON
｝

上面这个是仍然使用jQuery的编程模式，　　1、先把获取到的数据，动态生成给元素并让它添加  data-id 属性，然后再一个一个循环获取！最后我再提交数据，十分低效

 

而使用react这类框架，思路其实更加简单，　1、先把获取到的数据，然后把textArea的value绑定为state.data;当textArea触发onChange的时候，直接改变state.data的值，textArea就会实时改变，而且最后要提交给后台的数据，也仍然是data。

整个过程就是通过state.data来实现数据的双向绑定！！！十分简单