React入門以及JSX語法理解

本週主要利用React以及JSX語法外加antd UI組件實現一個增加刪除數據的頁面，一開始上手這個東西挺難的，因爲之前沒有接觸過React框架這些東西，一開始覺得有點無從下手。不過經過一週的努力和適應，差不多完成了整個需求，下來做一個總結。

React框架

React有一點與Vue是相似的，都是通過數據來渲染頁面的，也就是說改變數據就可以改變頁面的呈現。但不同的是，Vue直接改變數據，而 React則是通過改變狀態來觸發重新渲染的。
比如下面一個例子：

<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, Hellen</h1>,
        document.getElementById('example')
    )
</script>

注意，在這之前，要引入react的CDN庫，可以自行在網上找。

另一種方法，就是利用react-create-app快速構建React開發環境，可以參考React 教程
來看一個簡單的例子：

//在最前面先把需要的模塊import進來後面才能用。
import React, { Component } from 'react';
import './App.css';

class App extends Component {
//上面屬於ES6的語法，即繼承於React 組件Component的一個類App,可以認爲它也是一個組件。最後export暴露出接口之後，外面可以通過<App />這種結構來使用。
  //每個類默認有一個constructor構造器
  //這裏還需要注意，React是通過改變狀態來驅動數據變化，從而觸發render函數重新渲染的。因此，一開始可以定義一個狀態
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }
  //當點擊事件觸發後，通過this.setState({})具體改變狀態的某個值，從而使得整個狀態改變，觸發render函數重新渲染。
  clickFunc = () => {
    let count = this.state.count;
    count = count + 1;
    this.setState({
      count : count
    });
    //但是，打印出當前狀態時，卻發現狀態中的count總會滯後一個數。
    //原因其實是因爲this.setState()函數是異步的，他不會立即執行,所以此時獲取的count還是原來狀態中的count。
    console.log(this.state.count);
  }

  render() {
    const data = this.state.count;
    return (
    //JSX 語法，通俗點講，就是在JS代碼中嵌入了HTML代碼，並且是有效的。需要注意的是，變量都需要用{}來擴起來；
    //另一方面，要添加樣式時，類名需要寫成classname。
      <div className="box" onClick={this.clickFunc}>
      {data}
    </div>
    )

  }
}

export default App;

JSX語法

JSX語法其實就相當於是HTML和JS的混合，JS裏面可以融入HTML代碼，在HTML代碼裏也可以融入JS代碼，但是要用{ }括起來。
爲什麼JSX語法可以起作用呢？你需要先裝Babel工具，他會把JSX代碼轉換成JS語法。
上面的例子中

return (
//JSX 語法，通俗點講，就是在HTML代碼中嵌入了JS代碼，並且是有效的。需要注意的是，變量都需要用{}來擴起來；
//另一方面，要添加樣式時，類名需要寫成className。
    <div className="box" onClick={this.clickFunc}>
        {data}
    </div>
)

上面部分就是JSX語法，注意，JSX語法必須寫在script標籤裏面，並且type要設置爲text/babel。

JSX 語法主要的好處就是用起來非常簡潔方便，而且性能也要好一些，因爲JSX實際上是要轉成原生JS的，一般是有工具的，比如Babel等等，轉的過程中會對JS進行一些優化。