vue、react 对比学习 - Go语言中文社区

vue、react 对比学习

一、前提

我用的比较多的是vue，虽然react是和vue差不多时间开始学的，但是使用频率较少，所以，最近想把react全家桶温习一次。我觉得 对比学习 是一种非常有效的学习方法，能从已知知识延伸到新知识，重点突出异同。这里我只列举了一些vue中我常用的语法，然后用react来实现。更多具体的东西还是参考 官方文档 比较好。

二、vue 、react 对比           

                   

  1. 文件结构

    • 在vue单文件组件中，划分为3部分：template、script、style 。template放模板，script放 js 代码，style放css
    • 在react中 js 文件和 css 文件是分开存放的

  2. 更新组件状态

    1. vue中  直接 this.XXX = AAA 即可
    2. react中需要 this.setState({ XXX: AAA }) ，否则无法更新状态

  3. {{ }} <----> {  }

    1. vue中想在html里插入 内容需要用 {{ }} 双大括号                                            
    2. 在react 中则用 { } 一个大括号                                                           

  4. v-bind(:) <----> {  }

    1. 在vue中，要绑定属性、绑定prop的话需要用 v-bind (缩写是 ： 一个冒号)     
    2. 在react中 还是使用 {  }                                                         

  5. v-on(@) <----> onChange...

    1. 在vue中，要绑定事件要用 v-bind （缩写 @）。例如点击事件
    2. react里则使用类似dom里的事件名，但为驼峰写法。例如 onChange 

  6. v-model <----> onChange 和 value  

    1. v-model 直接实现了双向绑定                                                         
    2.  react因为是单向数据流，所以需要自己实现双向绑定 

  7. v-for  <----> map

  1. v-for 实现循环

        

  2. react 可以用 map实现

       

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_39798049/article/details/86645686
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2021-06-12 18:00:07
  • 阅读 ( 1165 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！