使用react的一点提醒17/10/26

1.不直接操作dom

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

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

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

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

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

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

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

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

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

 handle=(e)=>{}

 //...

 constructor(props){

 super(props)

 this.handler=this.handler.bind(this);

 }

 handler(){}

 //...

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

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

巴特西