React從入門到放棄(2)：React簡介

本系列將盡量使用ES6（ES2015）語法。因此均在上節webpack的基礎上作開發。

React是Facebook開發的一款JS庫，由於基於Virtual DOM，因此響應速度快，以及支持跨平臺。
（實際上，Virtual DOM在某些狀況都會損耗一些性能在diff上，但相比其餘MVVM框架比起來性能影響不多，同時大幅提高開發效率也是目前推薦的方式）

安裝

安裝React： npm i -S react react-dom

安裝Babel：npm i babel-loader babel-preset-react babel-plugin-import -S

HelloWorld

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

JSX

JavaScript 的一種擴展語法。咱們推薦在 React 中使用這種語法來描述 UI 信息。

1. JSX支持嵌入表達式：花括號 把任意的 JavaScript 表達式 嵌入到 JSX 中
2. JSX是Javascript：比起 HTML, JSX 更接近於 JavaScript, React DOM 使用駝峯(camelCase)屬性命名約定。(html爲全小寫)
3. JSX防注入攻擊：在渲染以前, React DOM 會格式化(escapes) JSX中的全部值。防止 XSS(跨站腳本) 攻擊。
4. JSX編譯後爲： React.createElement()。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

// 注意: 如下示例是簡化過的（不表明在 React 源碼中是這樣）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

組件

React框架的一大特點就是它經過組件化的方式來構建和渲染前端頁面。
定義組件有不少方式，最主流的爲：函數 和 類(類容許咱們在其中添加本地狀態(state)和生命週期鉤子。)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props

1. 屬性是隻讀的：不管你用函數或類的方法來聲明組件, 它都沒法修改其自身 props。
2. 屬性是外部控制的：屬性是由外部設置，組件內部是不肯定屬性從哪設置的。
3. 穩定性：對於一樣的輸入,始終能夠獲得相同的結果。

State

1. state是內部控制的：state是私有的，而且由組件自己徹底控制。
2. 使用setState修改：
   1. 內部調用render
   2. 支持異步
   3. 支持更新合併state

生命週期事件

React組件的生命週期事件不少，經常使用的有：

• componentDidMount：在組件第一次初始化render方法後調用，此時組件（DOM及誒點）已建立完成。一般在此方法中ajax、使用第三方js框架。
• shouldComponentUpdate：在組件接收到新的state或props後被調用。（第一次初始化和forceUpdate時不被調用。 ）默認返回true，返回false的時候則不調用render方法。
• componentWillUnmount：在組件從DOM中移除的時候被調用。一般用來移除組件相關事件。

生命週期事件又分爲3條流程：

1. 組件初始化（Mounting）：getDefaultProps、getInitialState、componentWillMount、render、componentDidMount（getInitialState在ES6 class的構造函數中可直接對state初始化）
2. 組件props更新（Updating）：componentWillReceiveProps(nextProps)、shouldComponentUpdate、componentWillUpdate、render componentDidUpdate
3. 組件卸載（Unmounting）：componentWillUnmount

表單

受控組件

React負責渲染表單的組件仍然控制用戶後續輸入時所發生的變化。相應的，其值由React控制的輸入表單元素稱爲「受控組件」。

class ShowInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val: 'hello'
        }
    }

    onChange(e) {
        this.setState({
            val: e.target.value
        })
    }

    render() {
        return (
            <div>
                <input type="text" onChange={e => this.onChange(e)} />
                <div>{this.state.val}</div>
            </div>
        )
    }
}

DivInput組件中的input元素就是受控組件。value 和 onChnage都會由React控制。

非受控組件

render() {
        return (
            <div>
                <input type="text" ref={e => this.input = e} />
                <button onClick={() => console.log(this.input.value)}>Click</button>
            </div>
        );
    }

掛到組件（這裏組件指的是有狀態組件）上的ref表示對組件實例的引用，而掛載到dom元素上時表示具體的dom元素節點。(stateless構造的組件是不會實例化，因此ref引用的爲null)

ref屬性能夠設置爲一個回調函數，這也是官方強烈推薦的用法；這個函數執行的時機爲：

1. 組件被掛載後：回調函數被當即執行，回調函數的參數爲該組件的具體實例。
2. 組件被卸載或者原有的ref屬性自己發生變化時：回調也會被當即執行，此時回調函數參數爲null，以確保內存泄露。

ReactDOM.findDOMNode(ref)來獲取組件掛載後真正的dom節點。

組件通訊

組件之間通訊的解決方案一般有2種：

1. 狀態提高：將state提高到互相通訊組件的最近的一個父組件上
2. Redux：下節將介紹