React系列---React（一）初識React

React系列---React（一）初識React
React系列---React（二）組件的prop和state
React系列---React（三）組件的生命週期

React是Facebook推出的一個JavaScript庫，它的口號就是「用來建立用戶界面的JavaScript庫」，因此它只是和用戶界面打交道，能夠把它當作MVC中的V（視圖）層。

React三大特性

組件

React的一切基於組件。使用React，惟一要關心的就是構建組件。各個組件有各自的狀態，狀態變動時，會自動從新渲染組件。組件特性也是Web前端發展的趨勢。

一個Profile組件的例子：

// Profile.jsx
import React from 'react';
export default Class Profile extends React.Component {
    render() {
        return (
          <div  className="profile-component">
            <h2>Hi, I am {this.props.name}</h2>
          </div>
        )
    }
}

其餘組件中，能夠像HTML標籤同樣引用它：

import Profile from './profile';

export default function(props) {
    return (
      <Profile />
    )
}

JSX

上面的render方法中，有一種直接把HTML嵌套在JS中的寫法，被稱做JSX。這種語法結合了JavaScript和HTML的優勢，便可以像日常同樣使用HTML，也能夠在裏面嵌套JavaScript語法，運行時，Babel等工具會將JSX編譯成JavaScript語法。

用HTML這種語義化的方式代替寫JavaScript，總讓人愜意許多。

Virtual DOM

React的設計中，開發者基本上無需操縱實際的DOM節點，每一個React組件都是用Virtual DOM渲染的，能夠當作是一種用JavaScript實現的內存DOM抽象。React在Virtual DOM上實現了一個Diff算法，渲染組件時，會高效的找出變動的節點，刷新到實際DOM上。

理解React特性

理解Virtual DOM

Web頁面是由一個個HTML元素嵌套組合而成的。當使用JavaScript來描述這些元素時，這些元素能夠簡單地被表示成純粹的JSON對象的。
好比如今須要描述一個按鈕（button），咱們都知道，HTML語法以下：

<button class="btn btn-blue">
    <em>Confirm</em>
</button>

其中包括了元素的類型和屬性。咱們能夠用這樣一個JSON對象去表達這個按鈕：

{
  type: 'button',
  props: {
    className: 'btn btn-blue',
    children: {
      type: 'em',
      props: {
        children: 'Confirm'
      }
    }
  }
}

這便是Virtual DOM的思想：將實際DOM節點抽象爲內存中的JavaScript對象。

理解組件

固然，咱們能夠很方便地封裝上述button元素，獲得一種構建按鈕的公共方法：

const Button => ({ color, text }) {
    return {
      type: 'button',
      props: {
        className: `btn btn-${color}`,
        children: {
          type: 'em',
          props: {
            children: text,
          },
        },
      },
    };
}

當咱們要生成DOM元素中具體按鈕時，就能夠調用Button({color:'blue', text:'Confirm'})來建立。
仔細思考這個過程能夠發現，Button方法其實也能夠做爲元素存在（上面的Profile組件，就是這一回事），方法名對應了DOM元素類型，參數對應了DOM元素屬性，這樣構建的元素就是React的組件元素。JSON結構描述這個組件的話，大概是這樣：

{
    type: Button,
    props: {
      color: 'blue',
      children: 'Confirm'
    }
}

這也是React的核心思想之一。由於有公共的表達方法，咱們就可讓元素們彼此嵌套混合。這些層層封裝的React組件元素，最終遞歸渲染出完整的DOM樹。

---

React系列---React（一）初識React
React系列---React（二）組件的prop和state
React系列---React（三）組件的生命週期