React入門教程(二)

前言

距離上次我寫 React 入門教程已經快2個月了，年頭年尾老是比較忙哈，在React 入門教程(一)我大概介紹了 React 的使用和一些注意事項，此次讓咱們來繼續學習 React

1、 React 解決了什麼？

前端有不少框架和庫，可是他們不少都是解決相似的問題，而咱們去學習一個框架或者庫，就應該對學習的庫或者框架解決的問題深刻了解和去思考，這樣對新的庫和框架也不會太過於迷茫，由於你們解決的都是相似的問題。

而 React 解決的就是View層的問題，他幫助咱們把界面分紅各個獨立的塊，這個塊就是組件，而組件之間能夠相互組合、嵌套，像拼積木同樣拼成咱們的界面

React 的核心是使用組件定義界面的表現，它突出的就是開發組件化。組件之間很好的遵照了組件化開發的幾個原則，開發出的組件都如同同一我的寫的，大大下降了溝通成本和維護成本，以及提高了開發效率。

2、React 的基本環境安裝

在React 入門教程(一)中我是在HTML中了引入 React 相關的庫來教學和演示代碼，可是實際開發中通常不會這麼去寫，使用 React 須要不少工具和庫來輔助，編譯階段咱們須要 Babel ，組織代碼須要 Redux 等第三方的狀態管理工具，若是咱們寫單頁面應用咱們還須要 React-router 等等

廢話很少說，咱們直接使用 React 官網所推薦使用的工具—— create-react-app 。它能夠幫助咱們一鍵生成所須要的工程目錄，並幫咱們作好各類配置和依賴，也幫咱們隱藏了這些配置的細節

在安裝以前請確保你的機器安裝了 node 環境，若是沒有安裝的同窗能夠到node 官網下載對應的安裝包

而後只須要按官網的指引安裝便可，這種使用命令行的插件都是全局安裝方便使用

$ npm install -g create-react-app

安裝好之後就能夠直接使用它來構建一個 react 工程：

$ create-react-app helloreact

完了之後咱們就能夠啓動了，進入目錄而後經過 npm 啓動：

$ cd helloreact
$ npm start

而後終端就會提示成功,會自動打開瀏覽器，就能看到咱們最熟悉的 React 的 Logo 了

咱們把 src/App.js 文件中的 h1 標籤的內容修改成 Hello React試試看，而後你就會發現瀏覽器自動刷新，而且咱們的修改也生效了

3、在 React 工程如何建立\使用組件

在 src/App.js 中，咱們經過 import 引入 React 以及 css 和 logo ，而且寫好組件後使用 export 導出去，若是有同窗對es6這些語法還不熟悉能夠看阮一峯大佬的書 ECMAScript 6 入門 ,而後在咱們的入口文件 index.js 裏經過 import 引入並渲染到根元素 root 中

咱們React裏組件都是這樣使用的，咱們的 index.js 還有一個 registerServiceWorker 方法，主要是用於在生產環境中爲用戶在本地建立一個 service worker 來緩存資源到本地，提高應用的訪問速度

4、ref 和 React 中的 DOM 操做

在大多數狀況下，咱們是不須要經過操做 DOM 的方式去更新 UI ，應該使用 setState 來從新渲染，甚至避免進行 DOM 操做，可是 React 不能知足全部的 DOM 操做的需求，有時候咱們仍是 DOM 操做，好比你想訪問 DOM 結構來作某些事情，等等

React 提供了 ref屬性來幫助咱們獲取掛載後的元素實例，你能夠給某個
元素加上 ref 屬性，例如：

class Input extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

咱們能夠給任意表明 HTML 元素標籤加上 ref 從而獲取到它 DOM 元素而後調用 DOM API。可是能不用 ref 就不用。特別是要避免用 ref 來作 React 本能夠幫你作到的，在組件裏咱們也能夠加上 ref 標籤，能夠獲取組件初始化的實例，可是也不建議這麼作

5、 Prop 參數驗證

以前我說起過 Prop 有參數驗證，可是卻沒有爲你們演示，由於

React.PropTypes 自 React v15.5 起已棄用。請使用 prop-types 庫代替。
不少人以爲對於參數驗證都不覺得然，以爲用不用都對程序功能也沒什麼影響，可是在構建多人，大型的應用程序是很重要的，不可忽視，這可讓咱們在編譯階段就規避掉不少問題，而不是在運行的時候才發現，因此咱們可以發現 TypeScript 和 Flow 有不少人推崇，React 也是爲了構建大型應用程序的，固然 TypeScript 和 Flow 不是咱們如今討論的，之後有時間咱們再另做討論

咱們須要單獨安裝一個 prop-types 的模塊來幫助咱們進行驗證
在 helloreact 下使用命令

$ npm install prop-types --save

咱們把APP改爲下面的例子

import React, { Component } from 'react';
import './App.css';
import PropTypes from "prop-types";
class App extends Component {

  render() {
    return (
      <div className="App">
          <h1 className="App-title">Hello {this.props.age}</h1>
      </div>
    );
  }
}
App.propTypes = {
  age: PropTypes.number
};
export default App;

而後在index中在App組件中加入age屬性並傳入字符串

ReactDOM.render(<App age={'1'}/>, document.getElementById('root'));

咱們看看瀏覽器，雖然頁面仍是刷新了也正常顯示，可是咱們打開控制檯就會發現一個報錯信息：

能夠看到錯誤提示咱們age應該是 number 類型的而不是 string 類型

咱們經過 PropTypes 給組件的參數作類型限制，能夠迅速定位錯誤，也能夠給組件加上 propTypes，讓組件的開發、使用更加規範清晰。

6、 再談React 的 生命週期

上一篇我爲了方便你們瞭解 React 的生命週期，寫了一個流轉的例子，而什麼是生命週期？每個生物都有他本身的生命週期，從出生、少年、成年再到死亡，放到 React 組件裏就是掛載組件到卸載組件的過程， React 爲咱們提供生命週期的鉤子，咱們就能夠爲其作不少事情，好比在掛載完成後請求數據，或者在卸載前清除一些事件

我重複說了一遍React的生命週期，只是但願你們能夠重視並清楚生命週期的重要性

下面是一個React的生命週期的圖片能夠結合我上篇的例子來觀看，理清楚React的建立時，state在流動的狀況以及render函數的時機：

總結

React的理念就是組件化界面，使用各個獨立的組件來組合出界面，並利用props&state，以及生命週期來構造各類複雜的應用

雖然咱們有可能一開始會比以前寫更多的代碼，可是代碼是須要維護的，組件化可以可以讓咱們有更清晰的思路去閱讀代碼，當你擁有不少組件的時候，組件複用會讓你寫更少的代碼