1氮采、什么是React殷绍？

React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。

React主要用于構(gòu)建UI鹊漠，很多人認(rèn)為 React 是 MVC 中的 V（視圖）篡帕。

React 起源于 Facebook 的內(nèi)部項(xiàng)目，用來(lái)架設(shè) Instagram 的網(wǎng)站贸呢，并于 2013 年 5 月開源。

React 擁有較高的性能拢军，代碼邏輯非常簡(jiǎn)單楞陷，越來(lái)越多的人已開始關(guān)注和使用它。

2茉唉、React有哪些關(guān)鍵知識(shí)點(diǎn)固蛾？

網(wǎng)上有不少好教材，這里就不在做原理性的講解度陆，重點(diǎn)講一下任何動(dòng)手艾凯，“知道”沒有意義，“做到”才有產(chǎn)生價(jià)值懂傀。

2.1趾诗、熟悉JSX語(yǔ)法

http://www.runoob.com/react/react-jsx.html

2.2、了解React組件的生命周期

http://www.runoob.com/react/react-component-life-cycle.html

2.3蹬蚁、了解React的數(shù)據(jù)組織方式

http://www.runoob.com/react/react-state.html

http://www.runoob.com/react/react-props.html

2恃泪、學(xué)習(xí)React的最好方法

動(dòng)手

3、動(dòng)手的最快方式

直接使用antd pro犀斋，環(huán)境搭建參考文章：http://www.reibang.com/p/9a9acc4411ba?from=groupmessage&isappinstalled=0

4贝乎、教學(xué)示例

4.1、創(chuàng)建一個(gè)React組件ShopMgr

在src/pages目錄下面新建文件ShopMgr.js叽粹，內(nèi)容如下

import React, { PureComponent } from 'react';
export default class ShopMgr extends PureComponent {
  render() {
    return (
      <div>你好览效，我是一個(gè)React組件</div>
    );
  }
}

4.2、將ShopMgr掛載到頁(yè)面上

修改config/router.config.js虫几，查找/dashboard/analysis锤灿，找到下面的代碼段

{
  path: '/dashboard/analysis',
  name: 'analysis',
  component: './Dashboard/Analysis',
}

將其修改為：

{
  path: '/dashboard/analysis',
  name: 'analysis',
  component: './ShopMgr',
}

4.2、啟動(dòng)項(xiàng)目

$ npm start

在瀏覽器上輸入http://127.0.0.1:8000/dashboard/analysis持钉，你將會(huì)看到下面的頁(yè)面：

React組件

4.3衡招、練習(xí)對(duì)內(nèi)部數(shù)據(jù)state的操作

• 初始化容器：

  state = { count: 0 };
  

• 獲取中的數(shù)據(jù)：

  let { count } = this.state;
  

• 修改容器中的數(shù)據(jù)：

  this.setState({ count });
  

我們做一個(gè)計(jì)數(shù)器，作為練習(xí)工具：修改ShopMgr每强，為其增加一個(gè)顯示器始腾，兩個(gè)按鈕州刽，分別進(jìn)行加一減一操作

React組件2

import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';

export default class ShopMgr extends Component {
  /**
   *  初始化內(nèi)部數(shù)據(jù)容器，里面放上一個(gè)計(jì)數(shù)器count浪箭，初始值為0
   * @type {{count: number}}
   */
  state = { count: 0 };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行加一
   */
  add = () => {
    // 從內(nèi)部容器中穗椅，獲取計(jì)數(shù)器的值，count
    let { count } = this.state;
    // 計(jì)數(shù)器加一后奶栖，再將其放回容器匹表，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化，會(huì)自動(dòng)刷新界面
    count += 1;
    this.setState({ count });
  };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行減一
   */
  sub = () => {
    // 從內(nèi)部容器中宣鄙，獲取計(jì)數(shù)器的值袍镀，count
    let { count } = this.state;
    // 計(jì)數(shù)器減一后，再將其放回容器冻晤，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化苇羡，會(huì)自動(dòng)刷新界面
    count -= 1;
    this.setState({ count });
  };

  render() {
    // 從內(nèi)部容器中，獲取計(jì)數(shù)器的值鼻弧，count
    const { count } = this.state;
    return (
      <div>
        {/* 顯示計(jì)數(shù)器的值 */}
        <Alert message={count} type="success" style={{ marginBottom: 20 }}/>
        {/* 將上面定義的add和sub函數(shù)设江，設(shè)置到相關(guān)的按鈕點(diǎn)擊事件上 */}
        <div>
          <Button type="primary" onClick={this.add}>+1</Button>
          <Divider type="vertical"/>
          <Button type="primary" onClick={this.sub}>-1</Button>
        </div>
      </div>
    );
  }
}

4.4、練習(xí)對(duì)外部數(shù)據(jù)的操作

我們修改上面的例子攘轩，增加一個(gè)奇數(shù)判斷器叉存，作為計(jì)數(shù)器的子組件，計(jì)數(shù)器的內(nèi)部count作為奇數(shù)判斷器的外部數(shù)據(jù)度帮。

• 獲取外部數(shù)據(jù)

  const { count } = this.props;
  

React組件3

import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';

class IsOddNum extends Component {
  render() {
    const { count } = this.props;
    let tips = `${count}是奇數(shù)`;
    if (count % 2 === 0) {
      tips = `${count}是偶數(shù)`;
    }
    return (
      <Alert message={tips} type="info" style={{ marginBottom: 20 }}/>
    );
  }
}

export default class ShopMgr extends PureComponent {
  /**
   *  初始化內(nèi)部數(shù)據(jù)容器歼捏，里面放上一個(gè)計(jì)數(shù)器count，初始值為0
   * @type {{count: number}}
   */
  state = { count: 0 };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行加一
   */
  add = () => {
    // 從內(nèi)部容器中笨篷，獲取計(jì)數(shù)器的值甫菠，count
    let { count } = this.state;
    // 計(jì)數(shù)器加一后，再將其放回容器冕屯，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化寂诱，會(huì)自動(dòng)刷新界面
    count += 1;
    this.setState({ count });
  };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行減一
   */
  sub = () => {
    // 從內(nèi)部容器中，獲取計(jì)數(shù)器的值安聘，count
    let { count } = this.state;
    // 計(jì)數(shù)器減一后痰洒，再將其放回容器，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化浴韭，會(huì)自動(dòng)刷新界面
    count -= 1;
    this.setState({ count });
  };

  render() {
    // 從內(nèi)部容器中丘喻，獲取計(jì)數(shù)器的值，count
    const { count } = this.state;
    return (
      <div>
        {/* 顯示計(jì)數(shù)器的值 */}
        <Alert message={count} type="success" style={{ marginBottom: 20 }}/>
        {/* 將上面定義的add和sub函數(shù)念颈，設(shè)置到相關(guān)的按鈕點(diǎn)擊事件上 */}
        <div style={{ marginBottom: 20 }}>
          <Button type="primary" onClick={this.add}>+1</Button>
          <Divider type="vertical"/>
          <Button type="primary" onClick={this.sub}>-1</Button>
        </div>

        {/* 掛載子組件泉粉，將count傳入其中 */}
        <IsOddNum count={count}/>
      </div>
    );
  }
}

4.4、跟蹤組件的生命周期

觀察IsOddNum的打印即可

import React, { Component } from 'react';
import { Alert, Button, Divider } from 'antd';

class IsOddNum extends Component {
  componentWillMount() {
    console.log('IsOddNum::componentWillMount');
  }

  componentDidMount() {
    console.log('componentDidMount ');
  }

  componentWillReceiveProps(nextPropx) {
    console.log('IsOddNum::componentWillReceiveProps ');
  }

  shouldComponentUpdate() {
    console.log('IsOddNum::shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('IsOddNum::componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('IsOddNum::componentWillUnmount');
  }

  render() {
    const { count } = this.props;
    let tips = `${count}是奇數(shù)`;
    if (count % 2 === 0) {
      tips = `${count}是偶數(shù)`;
    }
    return (
      <Alert message={tips} type="info" style={{ marginBottom: 20 }}/>
    );
  }
}

export default class ShopMgr extends Component {
  /**
   *  初始化內(nèi)部數(shù)據(jù)容器，里面放上一個(gè)計(jì)數(shù)器count嗡靡，初始值為0
   * @type {{count: number}}
   */
  state = { count: 0 };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行加一
   */
  add = () => {
    // 從內(nèi)部容器中跺撼，獲取計(jì)數(shù)器的值，count
    let { count } = this.state;
    // 計(jì)數(shù)器加一后讨彼，再將其放回容器歉井，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化，會(huì)自動(dòng)刷新界面
    count += 1;
    this.setState({ count });
  };

  /**
   * 對(duì)計(jì)數(shù)器進(jìn)行減一
   */
  sub = () => {
    // 從內(nèi)部容器中哈误，獲取計(jì)數(shù)器的值哩至，count
    let { count } = this.state;
    // 計(jì)數(shù)器減一后，再將其放回容器蜜自，此時(shí)React會(huì)檢測(cè)到容器中數(shù)據(jù)的變化菩貌，會(huì)自動(dòng)刷新界面
    count -= 1;
    this.setState({ count });
  };

  render() {
    // 從內(nèi)部容器中，獲取計(jì)數(shù)器的值重荠，count
    const { count } = this.state;
    return (
      <div>
        {/* 顯示計(jì)數(shù)器的值 */}
        <Alert message={count} type="success" style={{ marginBottom: 20 }}/>
        {/* 將上面定義的add和sub函數(shù)菜谣，設(shè)置到相關(guān)的按鈕點(diǎn)擊事件上 */}
        <div style={{ marginBottom: 20 }}>
          <Button type="primary" onClick={this.add}>+1</Button>
          <Divider type="vertical"/>
          <Button type="primary" onClick={this.sub}>-1</Button>
        </div>

        {/* 掛載子組件，將count傳入其中 */}
        <IsOddNum count={count}/>
      </div>
    );
  }
}