记录学习React

一.前言

因为自己一直是用Vue,前端界一直都有流传React要比Vue要难很多的言论,包括很多大厂也都是在用React,所以自己也从来是敬而远之,因为自己现在只有一年工作经验,觉得自己各方面还有所欠缺,达不到学习React的门槛,但又觉得趁年轻应该多学一点技术。还是开始打开了React的文档,开启搬砖之路。
学习一门新技术 干学干看文档肯定是不行的,也要进行自己学完之后的总结。
先说一下自己的学习方法,先是把文档大概都看一遍,刚开始看的时候肯定也会有很多问题,然后再回头来从第一章慢慢细究问题,记录下来,以便加深自己的印象。

二.对于React的理解

菜鸟教程是这么解释的:在这里插入图片描述
React的特点:

1.声明式:

在JQuery出来之前 大多编程语言都是命令式的,这里就要说命令式和声明式的区别了,命令式注重的是过程,声明式注重的是结果,就像SQL语句,告诉你我要查什么什么数据,电脑通过这行代码,去自动计算,并给你返回数据。
命令式相反,命令式编程就像它的名字一样,它由开发者我们一步一步的告述计算机,执行一系列的操作,然后得到想要的结果,起主要作用的是开发者,计算机只是帮助开发者执行计算而已。

2.高效:

和Vue一样,有Vue基础的肯定对这个虚拟Dom不陌生,因为俩种框架都是用的虚拟Dom,基本原理呢就是:
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,

以往,我们改变更新页面,只能通过首先查找dom对象,再进行修改dom的方式来达到目的。 但这种方式相当消耗计算资源, 因为每次查询 dom ,都需要遍历整颗 dom 树。

现在,我们用对象的方式来描述真实的 dom,并且通过对象与真实dom建立了一一对应的关系,那么每次 dom 的更改,我通过找到相应对象,也就找到了相应的dom节点,再对其进行更新。这样的话,就能节省性能,因为js 对象的查询,比对整个dom 树的查询,所消耗的性能要少。

3.灵活:

在我认为看来 应该是可以引用各种市面流行的插件,这些插件都对React进行了很好的支持,比如UI框架:Antd;TS语言

4.JSX:

JSX呢相对于我们传统的H5不太一样,但又基本相似,结构都是一样的,只不过JSX是通过JS的方式进行UI结构的编写,最后编译的时候 通过Babel解析成一个个HTML语言。

5.组件:

我对于组件的理解就是 把可复用的一些UI结构及逻辑,提取单独放到一个文件里,就比如弹框,只需要改里面标题和内容,那我们只需要引用这个组件,把标题和内容传进去就好了,这种方式就如官方所说,提升开发效率,减少代码重复,利于维护

6.单向响应数据流:

单项数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立。单向数据流指只能从一个方向来修改状态。
就是可以怎么说呢?比如老师和学生,老师给学生判了分数,并且下发给学生,通知给学生,学生只能去读取这个分数,而不能去修改分数,最后修改权在老师手里,这就是单向数据流。

三.入门React——安装

官网介绍了几种使用React的途径,比如<script></script>标签中引用CDN中的React的js,但是我用的是npm进行安装的React
安装方法:

//全局安装React脚手架
$ npm install -g create-react-app
//创建
$ create-react-app demo-app
//启动React项目
$ cd demo-app/
$ npm start

最后就成功创建出来并且启动了一个React项目
在这里插入图片描述
以上就是安装React的一些步骤 及自己对React的一些理解。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值