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