前端開發的基本認識

187 阅读3分钟

本週週二至週四基本都在網上搜索前端相關的基本概念以及前端框架比對的信息,總結如下:

Node.js

Node.js是壹個運行js代碼的平臺

React

React是Facebook開發的壹個js庫

React Native

React Native也是Facebook開發的用於生成原生APP的React框架

Vue.js

Vue.js是尤雨溪開發的用於搭建用戶界面的js框架,也是基於組件式的,Vue強調它是漸進式的, 但是它的優點是什麼並不了解,需要深入學習才行,目前重點在於小程序的開發,故不再對其做深入研究。

Weex

Weex是用於開發原生應用的框架,支持Vue,大概與React Native功能相當,具體沒有深入研究。

PWA

PWA應用是web應用,並同時具有webAPP和原生APP的優點,除了webAPP具有的免安裝優點外還可以發送推送通知,用戶體驗也比普通的webAPP更好。

快應用

快應用是無需下載安裝,即點即用,且能享受原生應用的性能體驗的壹種應用

確立跨平臺開發的框架

目前據網上所說,較全面的跨平臺開發的框架有uni-app和Taro,uni-app基於Vue開發,Taro是基於React開發,據目前官網介紹,Taro比uni-app多壹個快應用的支持。

前端領域框架和技術繁多,無法每壹項技術都進行深入研究得出哪個框架是最優的選擇,網上所說這兩個框架的優劣不管基於核心優勢(都是基於組件式)還是生態環境都是難分高下,且分析水平都遠遠高於自己目前的前端水平,故以目前水平難以在兩者中做出明確的選擇,由於React由Facebook團隊原生開發和維護,相對可能更穩定一些,從未來的更長遠的使用該框架的方面考慮,決定選擇基於React開發的Taro作為該項目所使用的框架。

其他前端基本概念

  • npm

    安裝或打包上傳第三方包的工具

  • Flow、TypeScript、PropsType

    進行代碼檢查和推斷的工具(通過npm安裝)

  • JSX

    一種可以HTML和JS混寫的語法格式

  • Babel

    JS代碼轉換器,可以把ES6代碼轉換成ES5代碼

  • React相關

    1.React允許自定義組件類,每個組件類必須要有render方法,render方法定義該組件的HTML結構。
    2.props是properties的簡寫,就是屬性的意思,React通過props為組件傳遞數據。

    3.React組件的生命週期的三個狀態:

    • Mounting:已插入真实 DOM

    • Updating:正在被重新渲染

    • Unmounting:已移出真实 DOM

      三個狀態對應的五個處理函數

    • componentWillMount()

    • componentDidMount()

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

    • componentWillUnmount()

      另外還有兩個特殊的處理函數:

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

  • Flux

    Flux是一種用於管理應用程序中數據流的模式。