React作为目前世界上最火的前端框架,不学那是不称职滴,今天整理了一下我初学React过程中遇到的几个小坑,因为React是我最晚学习的一门框架,所以中间还会穿插一下与NG和Vue的对比,开始吧。
目录
数据流双向绑定的问题
如果你学过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的解决方案,着实厉害。