"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 (https://xhs-rookies.com/) 进行学习,及时获取最新文章。
我们从React 官网可以看到官方对于 React
的定义 React
是一个用于构建用户界面的 JavaScript
库。从本质而言,React
就是一个 JavaScript
的代码库,其功能是为程序员提供了一种子组件不能直接影响外层组件("data flows down
")的模型,数据改变时对 HTML
文档的有效更新,和现代单页应用中组件之间干净的分离。
在前端界面中,不可避免的需要使用到三个技术:
HTML
:构建页面结构CSS
:定义页面样式JavaScript
:动态地处理事件和数据我们当然可以直接使用这三个技术构建前端页面,使用也不会出现太大的问题,但是在开发过程中可能会出现很多问题:
DOM
对象,在情况复杂的时候可能会出现一些奇奇怪怪的难以查找的问题针对以上的问题,前端开发人员一直在寻找一种好的解决方案来帮助自己更好的开发页面。
在过去,JQuery
被大量使用来处理上面的问题,但随着时间的发展,人们发现有更为便捷的框架来解决 DOM
操作的问题,这就是现在前端使用最多的三大框架——Angular
、React
、Vue
。
它们拥有着统一的理念——声明式编程和组件化开发,以下以 React
举例
JSX
来描述 UI
的样子,以 state
来存储组件内的状态setState
来修改状态,状态发生变化时,UI
会自动发生更新发现了吗,我们将不再需要手动操作 DOM
对象了,这将我们从数据处理和 UI
处理的耦合中脱离了出来,从此以后我们只需要专心处理好数据,UI
会根据数据自动发生更新!
除此之外,React
还拥有这一个更令人兴奋的特性——多平台适配
React
只在 Web
端使用FaceBook
推出了 React Native
,使用 React Native
程序员可以使用 React
的代码开发出移动端的程序。uni-app
、Taro
进行更多元的开发,你可以只编写一次的 React
代码,在 Web
、移动端、小程序等多端使用,实现真正的跨端开发。让我们来看两张图。
<center style={{marginBottom:'20px'}}>(图为2020最具知名度的框架,可以看到React的知名度排在的第二位)</center>
<center style={{marginBottom:'20px'}}>(图为2020年程序员最想学习的框架,React位列榜首)</center>
作为前端工程师,我们可以很明显的看出未来选择的趋势,在国内前端领域 React
已经成为了当之无愧的第一框架(因为 Angular
对 TypeScript
有一定要求,国内使用 Angular
的公司较少)
React 官方中文文档是 React
学习最详尽的路线,但是对于初学者而言大家可能会不知道如何在官方文档中查询到自己需要的知识,所以我们基于 React
官方文档,结合 React
学习路线整理出以下一份 React
教程,旨在用平实的语言和简单的代码来引导初学者进行 React
的学习。加油吧!骚年,让我们开启对 React
的学习吧!
你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很...
text-transform:uppercase //把文字变成全大写 text-transform:lowercase //把文...
Dreamweaver中想要插入验证标签,该怎么操作呢?下面我们就来看看详细的教程。 ...
先看看最简单的效果图: 代码如下: JavaScript Code 复制内容到剪贴板 var canv...
MOngoDB 删除语句 delete()删除 删除一个集合 db.collection.deleteOne() 删除多...
这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误...
之前老板让做一个登陆后 可以显示一个打钩的效果 百度死活搜不到 今天在B站看到...
TOP云 (west.cn)8月17日消息,昨天包括181.xyz、hut.xyz在内的几个保留 域名 ...
一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有...
1. 父级容器设置成表格,子级设为行内元素。 适合子级内容为文本展示。 !-- css ...