最近對在前端的開發中,接觸到了 前端優化 這個議題 當下想說前端的優化不外乎就是把 能 壓縮 的檔案,包含 HTML、CSS、JavaScript 還有一些 圖檔 能壓縮的就壓縮就好了嗎? 雖然上面的說法並沒有錯,不過其實 壓縮 的這件事情,只佔了 前端優化 的 一小部分 而已 另外對於網站來說,效能好壞的 基準點 又是什麼? 深入研究後才發覺 前端優化 是個很有趣的議題,也是 前端工程師
在前一篇文章 [React Js] JSX 與 Babel 簡介 中我們有提到關於 JSX 的作用,與使用 Babel 來編譯 JSX 的語法 這篇文章將對 JSX 的語法進行紀錄和說明: 建議在閱讀此篇文章之前,要先有些 React 的觀念,並有初步對 JSX 有認識 首先先讓我們再複習一次,什麼是 JSX,JSX 就只是簡化 React 的一種寫法而已,在文章中我會使用
JSX 主要使用於 簡化 React 的 React.createElement() 的方法,實際範例如下: React.createElement() 寫法: React.createComponent('h1',null,'我是標題'); JSX 寫法: <h1>我是標題</h1> 但是在每個 主流 瀏覽器中,是 不支援 JSX 的寫法的,
組件(component) 的 狀態(state),為 React 組件(component) 中可以自己自訂的一個物件。 當 state 這個物件有變化時,React 就會自動 重新 渲染,當前的 React Element 簡單來說當 React 偵測 到 state 的這個物件的資料有變化時,就會自動在前端上,重新 繪製 當前的物件,達到 更新 畫面的效果
通常在 React 的組件 (Component) 中,有三個重要的操作: 建立組件 更新組件 刪除組件 而這些操作各自的流程,就是 React 的 生命週期,下面會根據不同操作來個別紀錄: 建立組件: constructor() : 執行建立組件的 建構式(constructor) componentWillMount() : 正要把 React Element 放到畫面上,組件 在渲染 之前 render() : 將 React Element 渲染到畫面上,