初学React遇到的几个小坑分析

React作为目前世界上最火的前端框架，不学那是不称职滴，今天整理了一下我初学React过程中遇到的几个小坑，因为React是我最晚学习的一门框架，所以中间还会穿插一下与NG和Vue的对比，开始吧。

目录

数据流双向绑定的问题

JSX代码注释

className

父子组件传值

setState

ReactHooks

---

数据流双向绑定的问题

如果你学过NG和Vue的话，你会发现在他们里面实现数据流的双向绑定是一件很简单的事，如Vue使用了v-model这个语法糖来实现表单的双向绑定，NG则使用[()]来处理双向绑定。

但是React原生是不支持双向绑定这个东西的，在React中，我们是不建议直接操作DOM元素的，而是通过数据驱动改变界面的显示效果。但对于数据流React和Vue一样都是单向的。

典型的是在父组件中传向子组件的数据是不能被修改的，并不是说单向双向哪个更好，可能感觉各有所长吧，在这里个人感觉还是更严谨一些的。

JSX代码注释

其实这个问题没啥好讲的，在IDE下使用＂ctrl+/＂即可：

        {/* hi */}

这种写法是最推荐的，意思就是遇到"{}"时，就会使用JS的解析，同时注意这样也是出错的：

        {// hi }

但是换行之后也是可以的：

{
  // hi 
}

className

在React中，很多命名都是驼峰式的，写的时候要注意，注入onClick，className。

注意这里使用class的时候，由于这个class会与因为名字相似于定义类时候的lcass，因此React使用了className来更好的却别样式与类的区别。

父子组件传值

总体来看，react中的父子组件的通讯是这三个框架中我觉得最清晰的一个，以至于写到最后我都以为是自己看错了。

拿下面这段代码举例，这段代码描述的是子组件如何像父组件通讯，由于不能直接传值这里采用事件绑定，这些东西和vue都是一样的，不一样的是这个绑定的方式，首先说父组件向子组件传递方法"deleteItem"，和传递属性没有什么区别，然后子组件接受这个方法，使用的和接受属性也没有多大区别。

相比于Vue的$emit，我还是更喜欢这个。

  handleClick() {
    this.props.deleteItem(this.props.index)
  }

setState

对于state中的数据，我们是不可以直接进行操作的，但是我们可以通过setState进行操作，这一点大家可能都知道，但是还要注意的一点是setState是异步操作的，所以React16为setState方法提供了一个回调函数，以方便我们进行一系列的异步操作，这一点还是很重要的。

ReactHooks

上面介绍的大部分是React的基础内容，去年年底推出的raecthooks可以说大大改变了react的一些写法，也是以后React程序的主流了，React官方貌似是更喜欢函数式编程的方法，竭力把class移除门外，这篇文章并不是讲述reacthooks的，只是觉得这种非面向对象或者面向切面的编程让人眼前一亮。个人对于react还处于初学阶段，但毫无疑问他之所以能够成为世界上最流行的框架也是有原因的。

最后，很惊讶react居然还有VR的解决方案，着实厉害。