1.概念

用於構建使用者介面的 JavaScript 庫。

2.特點

1、宣告式：React 可以非常輕鬆地建立使用者互動介面。為你應用的每一個狀態設計簡潔的檢視，在資料改變時 React 也可以高效地更新渲染介面。以宣告式編寫UI，可以讓你的程式碼更加可靠，且方便除錯。

2、元件化：建立好擁有各自狀態的元件，再由元件構成更加複雜的介面。無需再用模版程式碼，通過使用JavaScript編寫的元件你可以更好地傳遞資料，將應用狀態和DOM拆分開來。

3、可用性：無論你現在正在使用什麼技術棧，你都可以隨時引入 React 開發新特性。React 也可以用作開發原生應用的框架React Native。

3.特性

1、元件：React 元件使用一個名為 render() 的方法， 接收資料作為輸入，輸出頁面中對應展示的內容。 下面這個示例中類似XML的寫法被稱為JSX. 輸入的資料通過 this.props（外部傳入） 傳入 render() 方法。

class HelloMessage extends React.Component {    //定義元件HelloMessage 
  render() {                                    //render函式返回需掛載DOM，JSX寫法
    return (
      <div>
        Hello {this.props.name}                 //props為父級傳遞到子級的值，不可反向
      </div>
    );
  }
}

ReactDOM.render(                        //使用元件定義的DOM，初始化
  <HelloMessage name="yjs" />,        
  document.getElementById("app")        //元件DOM掛載的位置，一般使用ID
);
———————————————————————————————————————————————————————————————————————————————————————————
輸出：
<div id="app">    
    <div>Hellow yjs</div>
</div>
 

2、狀態：除了使用外部傳入的資料以外 (this.props), 元件還可以擁有其內部的狀態資料 (this.state)。 當元件的狀態資料改變時， 元件會呼叫 render() 方法重新渲染。

class StateChange extends React.Component {
  constructor(props) {             //定義構造器，在此定義繼承props；初始state；事件函式繫結
    super(props);                  //繼承props
    this.state = { seconds: 0 };   //初始化state（可以理解成一個物件變數）
  }
  tick() {                                 //函式定義
    this.setState(prevState => ({          //setState()來改變state的值，然後重新渲染
      seconds: prevState.seconds + 1       //定時器中state的變化
    }));
  }
  componentDidMount() {                    //生命週期函式-第一次渲染掛載成功後呼叫(客戶端)
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {                 //生命週期函式-元件從 DOM 中移除之前立刻被呼叫
    clearInterval(this.interval);
  }
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}      //this.state.seconds在state變更時會隨之變化
      </div>
    );
  }
}

ReactDOM.render(
    <StateChange />, 
    document.getElementById("app")
);
———————————————————————————————————————————————————————————————————————————————————————————
輸出：
<div id="app">
    Seconds:0    //在這顯示完以後，就會走生命週期的定時器，1000ms加一次
</div>
 

3、應用：使用 props 和 state, 我們可以建立一個簡易的應用。 下面這個示例中，我們使用 state來儲存；使用內聯的方法添加了事件處理函式，它們將通過事件代理被收集和呼叫。

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);    //繫結函式到構造器，方便呼叫
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />        //元件：ul-li列表，將列表集合item傳遞
        <form onSubmit={this.handleSubmit}>          //form表單提交，觸發handleSubmit函式
          <input                        
            onChange={this.handleChange}             //input輸入框，輸入改變改變state的text
            value={this.state.text}
          />
          <button>
            新增第 {this.state.items.length + 1} 條   //使用儲存在state的所有新增項
          </button>
        </form>
      </div>
    );
  }
  handleChange(e) {
    this.setState({ text: e.target.value });
  }
  handleSubmit(e) {
    e.preventDefault();                        //取消提交的預設事件
    if (!this.state.text.length) {             //輸入框未輸入，什麼都不幹
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),   //state-item新增新的項
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (          //map()方法，遍歷父級的props渲染<li>
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

4、第三方框架||庫：React 的使用非常靈活，並且提供了可以呼叫其他第三方框架或庫的介面，以下為我接觸的元件庫。

1、bootstrap元件庫-react-bootstrap
    下載：npm install react-bootstrap --save
    index引用：import 'bootstrap/dist/css/bootstrap.min.css';
    引入：import { Navbar, Button } from 'react-bootstrap';

2、螞蟻金服元件庫-AlipayUI 
    下載：npm install antd-mobile --save
    引入：import { Button } from 'antd-mobile';
    使用：ReactDOM.render(<Button>按鈕</Button>, mountNode);