01-邂逅React开发
前言
特别喜欢coderwhy老师的讲课风格,每接触一个新技术第一节课教学的时候都喜欢用”邂逅“这个词,一开始看它Vue视频的时候还觉得没什么,但是在看它的React视频的时候,发现也是用的邂逅,感慨良多,希望自己能够保持学习的热情,爱上前端工程师这份工作。
React是什么
- 官网描述:用于构建用户界面的JavaScript库
- 原生HTML、CSS、JS存在的问题
- 操作DOM兼容性问题
- 过多兼容性代码的冗余问题
- 代码组织和规范的问题
- 所以在很长时间以来用的都是jQuery这个库
- 直到angular、react、vue这些框架的出现
- 这里拓展一下这些框架和jQuery库的区别
- 个人感觉之所以将angular、react、vue叫做框架,将jQuery称为库,一定程度上两者还是有较大的不同,库更倾向于是一种扩展,实在原有的基础上的一种扩展,所以数据和视图是没有分离的,杂糅在一起的
- 另外数据和视图的杂糅就容易造成代码后期维护不便利,逐渐的就慢慢衍生出将数据与视图相分离的方式,但是相较原生而言,已经是有了较大的不同,所以把它们叫做框架,让数据去驱动视图的变化
React的起源
-
react是2013年由Facebook开源的JavaScript框架
-
它来源于这样一个需求(图片摘自coderwhy公众号)
-
当红色的三个数字在发生变化的时候,过多的操作很容易产生bug
- 传统开发模式中,过多的去操作界面的细节,并且需要掌握大量DOM操作的API,当然我们可以使用jQuery来简化和适配一些API来使用
- 另外关于数据(状态)往往会分散到各个地方,不方便管理和维护
-
于是就有了以下解决方案
- 以组件的方式去划分一个个功能模块
- 组件内以jsx来描述UI的样式,以state来存储组件内的状态
- 当应用的状态发生改变的时候,通过setState来修改状态,状态发生变化时,UI会自动变化
React的特点
-
声明式编程(Vue、React、Flutter、SwiftUI)
- 它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面
-
组件化开发
-
多平台适配
- 2013年 React发布之初开发Web界面
- 2015年 Facebook推出ReactNative,用于开发移动端跨平台(Flutter)
- 2017年 Facebook推出ReactVR,用于开发虚拟现实Web应用程序
-
总之 react的各种特点不管是在现在还是在将来,对各大框架都是由借鉴意义的,比如Vue3的很多新特性,也是借鉴的react,Flutter的很多灵感也是来自React
Hello React案例
-
需求
- 在界面上显示一个文本:Hello world
- 点击下方的一个按钮,点击后文本改变为Hello react
-
原生实现
<body> <h2 class="title"></h2> <button class="btn">点击切换</button> <script> // 命令式编程:每做一个操作,都是给计算机(浏览器)一步步命令 // 声明式编程:React // document.getElementsByClassName 返回的是一个数组哦! // 1. 定义数据 let message = "Hello World" // 2. 将数据显示在 h2 元素中 const titleEl = document.getElementsByClassName("title")[0]; titleEl.innerHTML = message; // 3. 点击按钮,界面的数据发生改变 const btnEl = document.getElementsByClassName('btn')[0]; btnEl.addEventListener('click', e => { message =