前端学习的心路历程

2021-10-29 09:43:08

可以说学习前端都是从

这个标签开始学习起来的，认识的第一个css属性一般都是width。什么事情都有

第一步。

.box{

width: 100px;

height: 200px;

}

Hello World!

在这里我想吐槽一下为什么我不论是学习前端还是后端第一次打印出来都是习惯性的写Hello World！

HTML的全称为超文本标记语言，和他的搭档CSS层叠样式表，可以说是每个前端学习人员的第一步，当然HTML的标签没什么好介绍的，这里主要介绍CSS。CSS可以说只要你想要的样子他都能满足你，height、width、color、font...各种各样的样式。[W3school](https://www.w3school.com.cn/css/index.asp) 是学习css的手册你也可以翻阅文章书籍不断的强化自己的前端基础知识。只有基础好了才能胜任任何任务，Html、Css可以说是勾引我入门的原因。当然前端学习不止有这些搭建样式的语言，还有被我和小伙伴戏称的农夫三拳之一的JavaScript。

JavaScript

JavaScript有七种数据类型（到ES6）：number、string、Boolean、undefined、null、symbol、object。前六种为基本类型、object为引用类型。

var、let、const

虽然都是用来定义一个属性但是，既然有三个可定会有不同的，要不创造出来干嘛。

var定义的变量，没有块的概念，可以跨块访问，不能跨函数访问

let定义的变量只能在块作用域里访问，不能跨块访问，也不能跨函数访问

const用来定义常量，使用时必须初始化，只能在块作用域访问，不能修改

<script type="text/javascript">
    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错
</script>
```


<script>
        console.log(a)//打印出undefined
        var a=3
        console.log(b)//报错
        let b=3



        //实际上var可以理解为
        var a
        console.log(a)
        a=3
      
    </script>
var与其他相比存在变量提升，在同一个代码块中，在let后声明之前引用了变量，则会报错。let则会打印出来undefined

const定义的值是不可变的吗？当然不是，大家可以试一试用const定义一个对象，改变对象里面的属性值看看是否会报错。

JavaScript的语法太多了，可以说他作为农夫三拳之中可以是最疼的一拳直接给你打拉了。在这里我不知道具体介绍什么，因为都很重要，之后的文章我会挑一个问题系统的讲解。

react

对于很多萌新来说js的框架不知道学习那个好，前端三大框架React、Vue、Angular，

Angular

AngularJS是一个客户端的JavaScript MVC开源框架，特别为使用MVC架构模式的单页面web应用而设计，可用于开发动态Web应用程序。它不是一个完整的堆栈，而是一个处理web页面的前端框架。

AngularJS完全基于HTML和JavaScript，因此无需学习其他语法或语言。

AngularJS将静态HTML更改为动态HTML。它通过添加内置属性和组件扩展了HTML的功能，还提供了使用简单JavaScript创建自定义属性的功能。

AngularJS最为核心的是：MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。Angular通过指令扩展了HTML，以一个 JavaScript文件形式发布，通过script标签添加到网页中。Angular的优势在于：零配置、深度整合设计模式、约定才是框架的本质。

React

React是一个开源的JavaScript库，由Facebook和一个大型开发者社区共同维护。此库(也可转换为web开发框架)广泛用于开发web应用程序的用户界面。这个特殊的框架是为了构建大型应用程序而设计的，这些应用程序的数据会随着时间的推移不断变化。

React的主要功能是对DOM操作，声明式设计，更快的开发出Web应用系统。借助React，你可以非常轻松地创建用户交互界面，为你应用的每一个状态设计简洁的视图。在数据改变时，React也可以高效地更新渲染界面。

Vue

Vue是一个开源JavaScript框架，能够开发单页面应用程序。它还可以用作Web应用程序框架，目的在于简化Web开发。它的流行有很多原因，其中一个关键原因是它能够在没有任何动作的情况下重新渲染，它允许构建可重用，是一个小巧但功能强大的组件而且允许我们在需要时随时添加组件。

Vue提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲，Vue集中在MVVM模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器，相比其它的MVVM框架，Vue更容易上手。

```

前端三大框架并没有什么太多先学习和后学习的分别，因为学习哪一个都是基于你JavaScript的功底。作者学过Vue和React并且都写过项目，对于给我的感觉，Vue更好上手，所以我推荐React。别问为什么，就是喜欢React。

state 状态

```js

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

render() {

return (

Hello, world!

现在是 {this.state.date.toLocaleTimeString()}.

);

}

ReactDOM.render(

document.getElementById('example')

);

```

props

```

state 和 props 主要的区别在于props是不可变的，而 state 可以根据与用户交互来改变。这就

是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。

function HelloMessage(props) {

return

Hello {props.name}!

;

}

const element = ;

ReactDOM.render(

element,

document.getElementById('example')

);

```

生命周期

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载

- Mounting：已插入真实 DOM

- Updating：正在被重新渲染

- Unmounting：已移出真实 DOM

因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。

- **componentWillMount** 在渲染前调用,在客户端也在服务端。

- **componentDidMount** : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

- **componentWillReceiveProps** 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

- **shouldComponentUpdate** 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。\

可以在你确认不需要更新组件时使用。

- **componentWillUpdate**在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

- **componentDidUpdate** 在组件完成更新后立即调用。在初始化时不会被调用。

- **componentWillUnmount**在组件从 DOM 中移除之前立刻被调用。

学习前端已经过去了一年，我也渐渐慢慢适应了各种工作，但还要学习的还有很多，就让我在这里一边学习一边和大家分享吧。

码农公寓