博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用react的一点提醒17/10/26
阅读量:5987 次
发布时间:2019-06-20

本文共 818 字,大约阅读时间需要 2 分钟。

1.不直接操作dom

    今天在和同学讨论的时候,发现了一些以前没注意的问题。

    这段时间自己学习时一直都是用原生js写代码,但是以前在公司经常使用jq,也不知不觉间让我习惯了操作dom的倾向。

    使用vue也好react也好,在做一些页面操作时,难免总会使用getElementXXX的api。今天同学说了一句“你这种方式和jq有什么区别?”让我意识到自己的解题思路还没完全转变过来。

    既然我们使用react,就应该专注在数据层面上的操作,一般而言真的无需去直接操作dom。我当即对页面代码进行调整,将页面特效相关的部分全部用state来操作,结果证明确实没必要直接操作dom。

    当然,有时候直接操作dom可能更方便直接,甚至代码量更少。但是Dom操作和js计算的性能消耗完全不在一个层级上,当然还是选择js计算...

    要熟悉数据流思想,通过改变数据去改变dom

2.react的事件绑定,不使用匿名函数

  首先,react封装的event对象不需要在标签的事件特性中传递给方法。

  在类中写事件回调方法时,比较好的还是文档推荐的前两种方式:

1 handle=(e)=>{}
1 //...2 constructor(props){3 super(props)4 this.handler=this.handler.bind(this);5 }6 handler(){}7 //...

主要是今天debug的时候,我在调试过程中使用了onTouchStart={(e)=>{this.handler}}这种方法测试,然后想起这种方式好像是不推荐的,去官网一查,果然,因为会产生多余的闭包。事实上前两种方式都可以,只是看个人习惯罢了。

3.自定义特性使用data-xx,在回调中用e.target.dataset获取就好了,解构赋值真的蛮好用

 

转载于:https://www.cnblogs.com/alan2kat/p/7736495.html

你可能感兴趣的文章
Windows去除快捷箭头
查看>>
关于分页的解决方案收集
查看>>
angularjs指令参数transclude
查看>>
GPT(保护分区)解决办法
查看>>
图像美颜篇(磨皮、锐化、美白)
查看>>
Observer模式
查看>>
写的比较规范的网站
查看>>
使用eclipse生成文档(javadoc)主要有三种方法:
查看>>
ajax提交json数据,后台解析问题
查看>>
【转】iOS开发里的Bundle是个啥玩意?!
查看>>
2016第43周四
查看>>
解读Raft(四 成员变更)
查看>>
mysql case when 判断null
查看>>
Convert enumeraltor to Dictionary object
查看>>
ios中封装网络和tableview的综合运用
查看>>
基于nodejs编写小爬虫
查看>>
你想知道的vue实例
查看>>
Laravel思维导图之Laravel HTTP路由、中间件、控制器
查看>>
巧用 db.system.js 提升20% 开发效率
查看>>
JavaScript 对象所有API解析
查看>>