学习React第0章-起点

前言

光有后端的开发经验是不够的。作为程序员，想让我们的产品在世人面前光鲜亮丽，就必须要学习使用各种前端框架高效、快速地开发UI。挑选厨具之后，我选择在The Ultimate React Course上学习React。

前端框架的由来

早期的Web开发，多以“多页应用”为主。羽窝就是一个多页应用。用户会向服务器请求一个页面，服务器的后端就向用户返回多页中的其中一页。这时，服务器上的后端程序真正控制着Web应用的一切。

随着时间的推移，多种因素促使这一现状发生改变：

智能终端兴起，市面上有越来越多不同规格的浏览器终端。前后端需要分离以高效开发不同规格的页面；
人们对网页丝滑效果的要求越来越高，网页开始使用越来越多的JavaScript；
前端职责扩宽到处理页面路由、逻辑交互等；

在2013年，随着React框架发布，“单页应用”兴起了。

alt text

与“多页应用”不同的是，“单页应用”使用一套引擎在前端就完成了多个页面的渲染与交互。此时，后端服务器基本上只负责提供数据相关的API供前端调用。

React与JavaScript

JavaScript是一种前端开发语言。在React出现之前，人们可以使用JavaScript来处理网页渲染中复杂的逻辑。

对一个单页应用程序来说，页面中的大量数据都需要随时保持同步。使用传统的JavaScript和浏览器的DOM进行交互会十分繁琐。

因此，我们需要像React这样的框架辅助我们快速地构建前端程序。

JavaScript基础

React使用JSX语法，意味着你需要一些前置的JavaScript技能。

模板字面量

1
2
const title = "Title";
const summary = `a book titled ${title}`;

箭头函数

一种类似Lambda的函数体。()内表示接受的参数。

1
2
3
4
5
6
function_with_callback(
    (e)=>{
    for(int i = e; i > 0; i--){
        console.log(i);
    }
})

短路逻辑运算符

1
console.log(flag && "somestring");

当flag为true时，就会返回&&后的真值，否则返回flag。

可选链

1
console.log(book.reviews.librarything?.reviewCount);

若librarything属性不存在，会返回undefined。

数组方法

1
2
3
4
5
6
const x = [1,2,3,4,5].map((el)=>el*2;);
//x = [2,4,6,8,10]
const y = [1,2,3,4,5].filter((el)=>el>3);
//y = [4,5]
const z = [2,3,1,5,4].sort((a,b)=>a-b);
//z = [1,2,3,4,5]

这些方法都会返回一个新的数组，因此在React中十分常用。