React環境搭建

React是當下前端生態圈流行的框架之一，與Vue和Angular並稱前端三架馬車。今天，咱們就一塊兒來學習下React，今天的主要內容有。

• 利用React腳手架create-react-app搭建項目
• 編寫一個React計數組件

利用React腳手架create-react-app搭建項目

這裏筆者例舉兩種利用create-react-app搭建項目的方式

全局安裝

npm i -g create-react-app
create-react-app my-app
cd my-app && npm start

npx安裝

npx create-react-app my-app
cd my-app && npm start

這兩種方案各有各的好處，咱們先說全局安裝吧。npm i -g create-react-app只須要執行一次，後面你在任意目錄執行create-react-app project就能夠建立一個react項目的腳手架，這免去了開發者不少配置的工做。npx安裝須要的npm版本在5.2.0以上，它的原理大體是先去全局的node_modules下找找看有沒有這個包，沒有的話再去本地項目找找有沒有這個包，仍是沒有就去遠程拉一個最新的下來。

這兩種筆者更傾向於使用第二種npx安裝的方式。這裏我給出兩個理由，第一個，當下前端發展太快了，各類包庫更新迭代的太快，若是你全局安裝的話，用接地氣的話感受就是有點跟不上時代（PS： 除非是去那種網絡不通的公司）。第二個，它有可能跟其餘的全局包產生一個衝突，就以create-react-app爲例，若是你本地安裝了yarn的全局包，你將有機會看到yarnpkg add --exact react react-dom react-scripts --cwd has failed的錯誤，大體應該是沒有用npm install而是用yarn致使的，這裏刪掉全局的yarn包能夠解決這個問題。

編寫一個React計數組件

咱們要實現這樣一個組件，點擊加號按鈕數字加1，點擊減號按鈕數字減1。

咱們先定義一個文件ClickCounter.js, 這裏的命名規範講一下，相似於JAVA的導包com.ataola.utils這種，用戶的這個行爲是點擊，點擊是爲了計數。固然啦用戶點擊它還能夠搞些別的事情，好比說報名啊，回到頂部等等等等，因此把Click放在前面，Counter放在後面。

JSX語法

即Javascript的語法擴展。擴展了之後，你能夠把一坨HTML代碼丟到Javascript裏面來寫。形如樓下這樣。

render() {
    return (
      <div>
        <button onClick={ this.Add }>Add</button>
        <button onClick={ this.Reduce }>Reduce</button>
        <div>Count: { this.state.count }</div>
      </div>
    )
  }

在Render函數中，咱們返回一段html代碼，寫着一個加一個減按鈕，而後顯示相應的包。

引入相應的組件包

import React, { Component } from 'react';

編寫相關類

class ClickCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.Add = this.Add.bind(this);
    this.Reduce = this.Reduce.bind(this);
  }

  Add() {
    this.setState({ count: this.state.count + 1 });
  }

  Reduce() {
    this.setState({ count: this.state.count - 1 })
  }

  render() {
    return (
      <div>
        <button onClick={ this.Add }>Add</button>
        <button onClick={ this.Reduce }>Reduce</button>
        <div>Count: { this.state.count }</div>
      </div>
    )
  }
}

暴露相應的類

export default ClickCounter;

在index.js中引入咱們建立的類，並加入到渲染函數中

import ClickCounter from './ClickCounter';

ReactDOM.render(
  <React.StrictMode>
    <ClickCounter/>
  </React.StrictMode>,
  document.getElementById('root')
);

至此咱們已經學會了搭建React項目，並可以設計簡單的React組件。

問題思考

this.setState({ count: this.state.count + 1 });這句我能不能修改爲this.state.count++?

這句話的意思翻譯過來就是，我能不能直接手動擋操做state裏面的變量？答案確定是能寫成那種形式，你能訪問到那個對象，你給它加加有問題嗎？可是從React設計理念上，這是很是暴力魯棒的作法，你就想嘛，難道這個setState是放着讓你看噠，很顯然不是的。由於React在設計state時候是異步的，當你調用setState的時候，它會被放入異步隊列中，因此它也不是立刻去改變state裏面的數據。而你這個加加的寫法是同步的立刻去修改，假如說哈，你的加法是用加加這種寫法，而後你的減法是用setState()這種，當你點擊加的時候React，它心態崩了呀，它也不知道你想幹嗎，它想幹的是異步的事情，而你要乾的是同步的事情，它瘋了。。。。。

好在，如今的編譯器啊、或者配合ESLint智能，它會巧妙地提示你Do not mutate state directly. Use setState() react/no-direct-mutation-stateDo not mutate state directly. Use setState() react/no-direct-mutation-state,讓你巧妙地避開這種違背框架設計理念的寫法。

思考一下，Vue裏面可不能夠，固然是能夠的啦。

具體的參考下樓下地址：

React demo1: https://github.com/ataola/react-Inkjet/tree/master/code/demo-1

Vue demo1: https://github.com/ataola/vue-Graffiti/tree/master/code/demo1

參考文獻

《深刻淺出React和Redux》 機械工業出版社 程墨 編著

本做品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。