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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_43870742/article/details/102577756

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的解决方案,着实厉害。

猜你喜欢

转载自blog.csdn.net/weixin_43870742/article/details/102577756
今日推荐