React 入門指南

李十一發表於2017-04-27
React

Hello,World!

React是現在比較主流的前端框架，我們這次入門指南，旨在讓大家瞭解和認識什麼是React，我們的重點不是精通React，重點是“從0到1”這樣一個過程。

React的設計思想十分獨特，是革命性的創新，他的效能十分出眾，程式碼邏輯十分簡單和清晰，這使得越來越多的人加入React這個大框架中來。

這也是我們實際工作中需要做的－－給使用者帶來價值。

現在我們進行由階段的練習，先從“Hello，World！”開始。

React 容易上手，並且需要的基本都是基礎知識，這對前端初學者來說是十分親切的，下面我們通過進行每一個Demo來逐步的揭開React的神祕面紗。

安裝和使用

React 的安裝包，你可以快速的在其官網上下載到，不過在我的github上自帶了React的原始碼，不用另外安裝，只需要把這個庫拷到你的硬碟上就行！ https://github.com/AleenL/React.git

做到了上面的步驟，我們就可以做我們的第一個例子了。

React 的 HTML 模版

使用React的網頁原始碼，結構大致如下;

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <script src="../build/react.js"></script>  
    <script src="../build/react-dom.js"></script>  
    <script src="../build/browser.min.js"></script>  
</head>  
<body>  
    <div id="index"></div>  
    <script type="text/babel">  
        /* There is your code*/  
    </script>  
</body>  
</html>

上面的程式碼有兩個地方需要注意，最後一個script標籤裡的type屬性為text/babel這是React所特有的JSX語法，是和JavaScript 不相容的，凡事使用 JSX 的地方， 都要加上 type="text/babel"。

程式碼分別有三個庫， React.js、react-dom.js和Browser.js，他們必須首先載入，所以要放在head標籤中，其中react.js是React的核心哭，react-dom.js是提供與DOM相關的功能，browser.js的作用是將JSX 語法莊轉為 avaSctipr 語法，這一步十分浪費時間，所以上線的時候，應該將他放在伺服器中完成。

第一個Demo

ReactDOM.render 是 React 的基本方法，用於將模版轉為 HTML 語言，並插入指定的 DOM 節點。

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

這段程式碼插入最後一個Script標籤中，意思是將一個 h1 標題插入了 index節點中，執行結果如下。

img

快速啟動一個React頁面!

macOS 或者 Linux 當中用create-react-app可以快速啟動一個React頁面：

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

然後開啟src/App.js編輯頁面內容即可，頁面服務在 http://localhost:3000/

JSX

React支援的的JSX語法能夠讓HTML的語言直接解除安裝啊JavaScript語言之中，不需要加任何引號，它允許HTMl和JavaScript混寫。

var speeds = [23,45,56];
    ReactDOM.render(
    <div>
        {
            speeds.map(function(speed){
                return <div>This Car speed is {speed} km/h!</div>
            })
        }
    </div>,
     document.getElementById('index')
)

上述的程式碼體現了JSX的基本規則，就是遇到HTML標籤就用HTML的會澤解析；遇到JavaScript，就用JavaScript規則解析。

JSX允許直接在模版內插入JavaScript的變數，如果這個變數時一個陣列就會遍歷這個陣列。

var arr = [
   <li>this is one</li>,
   <li>this is two</li>,
   <li>this is three</li>,
   ];
   ReactDOM.render(
   <ul>{arr}</ul>,
   document.getElementById('index')
   );

模組化

React 允許將程式碼封裝成元件，然後像插入HTML的標籤一樣，在網頁中插入這個元件。使用React.createrClass方法進行生成元件。 JSX中使用’{}’符號來定義變數。

我們可以使用ES6類來定義元件：

class HelloMessage extends React.Component {
render() {
    return <h1>Hello,{this.props.name}</h1>
}
ReactDOM.render(
    <HelloMessage name = "World" />,
    document.getElementById('index')

} 我們也可以正常的使用JSX進行定義元件，兩個效果時相同的：

var HelloMessage = React.createClass({
    render :function(){
        return <h1>Hello {this.props.name}</h1>;
    }
});
ReactDOM.render(
    <HelloMessage name = "World" />,
    document.getElementById('index')
)

上述程式碼中，HelloMessage 就是一個元件類。模版插入時會自動生成一個HelloMessage的例項，所有的元件類都有自己的render用於輸出元件。

在對元件進行命名的時候，首字母必須要大寫，不然瀏覽器會報錯，另外，元件類職能包含一個HTML的頂層標籤，其他標籤必須包裹在頂層標籤內，不然瀏覽器也會報錯。

元件的用法和HTML的標籤完全一致，可以任意加入該元件的屬性這個表示了該元件加入了一個 speed 值，他的值為32，元件的屬性可以在元件類的this.props物件中獲取，比如speed屬性就可以通過this.props.speed讀取。

當然，變數也可以表示使用者定義的元件：

var HelloMessage = React.createClass({
    render :function(){
        return <h1>Hello {this.props.name}</h1>;
    }
});
const element = <HelloMessage name = "World" />;
ReactDOM.render(
    element,
    document.getElementById('index')
)

有些元件屬性在命名上要注意，比如class,for屬性需要寫成className,htmlFor。因為這個事JavaScript的保留字。

PropTypes

元件的屬性可以接受任何值，字串，物件，函式等，又是我們想要驗證元件的屬性是否符合要求的時候，這個時候就要用到PropsType的屬性。

元件類的PropTypes屬性，是用來驗證元件例項的屬性是否符合要求：

var data ="123";
var MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired,
    },
    render: function() {
        return <h1>{this.props.title}</h1>
    }
});
ReactDOM.render(
    <MyTitle title={data} />,
    document.body
);

MyTitle元件新增了title屬性，PropTypes告訴React，這個title的屬性的值必須為字串，如果上述的data變數不是字串的話，瀏覽器就會報錯。

此外getDefaultProps方法可以用來設定元件屬性的預設值：

var MyTitle = React.createClass({
    getDefaultProps : function(){
        return {
            title : 'this is title!!'
        };
    },
    render: function() {
        return <h1>{this.props.title}</h1>;
    }
});
ReactDOM.render(
    <MyTitle />,
    document.body
);

生命週期

人類的生命週期是：生 -> 老 -> 病 -> 死。

其實每個元件都有自己的“生命週期”，一個元件都經歷了，執行和完成，那麼React元件的生命週期是什麼呢？

React 的生命週期包括三個階段：mount（掛載）、update（更新）和 unmount（移除）

mount(掛載)

mount就是第一次讓元件出現在頁面周的過程。這個過程的關鍵就是render方法。React 會將 render 的返回值（一般是虛擬DOM，也可以事DOM或者null）插入到頁面中。

這個期間，會有幾個hook方便你往裡面加程式碼：

  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount() 生命週期

update(更新)

mount 之後，如果資料有任何變動，就會來到update過程，這個過程會出現五個hook：

1.componentWillReceiveProps(nextProps) -讀取props 2.shouldComponentUpdate(nextProps, nextState) -是否需要更新元件 3.render() -進行更新 4.componentDidUpdate() -更新完畢

unmount(解除安裝)

當一個元件將要從頁面移除的時候，會進入unmount過程，這個過程就只有一個hook： 1.componentWillUnmount() -移除元件前你可以進行的活動

相關文章