React-tutorial例子全解析

Talk is cheap,Show me the code

近些時間一直在關(guān)注React，關(guān)于 如何學習React可以參照鏈接的文章自行制定計劃。千里之行，始于足下。本文是React官方的教程上的一個例子，通過詳細地學習，從中收獲不少，特此做了筆記，與大家共享交流進步。

起步

1. 下載 例子，然后進行解壓

2. 由于采用的node環(huán)境，因此下載解壓之后，只需在所在目錄運行

   npm installnode server.js

3. 采用默認端口設置，只需打開瀏覽器，訪問 http://localhost:3000/

目錄結(jié)構(gòu)說明

react-tutorial

--node_modules    --body-parser：express中間件，用于接收和解析json數(shù)據(jù)    --express：express框架--public    --css        --base.css：基本樣式文件    --scripts        -- example.js：React應用js文件    index.html：基本的HTML結(jié)構(gòu)--.editorconfig：用于在不同的編輯器中統(tǒng)一編輯風格（文件編碼）的配置文件--.gitignore：git相關(guān)配置文件--app.json：web app的相關(guān)信息--comments.json：上傳的評論數(shù)據(jù)--LICENSE：項目代碼使用協(xié)議--package.json：項目所依賴的包，npm install的安裝包的配置文件--README.md：項目說明書，里面有使用說明--requirements.txt：不清楚--server.js：服務器端的js代碼

App功能

此項目構(gòu)建了一個簡單的應用，如圖所示

服務器端

服務器端的功能還是相對簡單的，通過代碼注釋的形式來分析

1. 導入了依賴的模塊

   var fs = require('fs');  //讀寫文件var path = require('path'); //路徑var express = require('express'); //express框架var bodyParser = require('body-parser'); //中間件

2. 生成app，并且進行配置

   //獲取comments.json文件的路徑var COMMENTS_FILE = path.join(__dirname, 'comments.json');//設置端口app.set('port', (process.env.PORT || 3000));//設置靜態(tài)文件的文件目錄路徑app.use('/', express.static(path.join(__dirname, 'public')));//啟用bodyParser中間件接收請求，并且接收并解析json數(shù)據(jù)app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: true}));

3. 設置響應頭部信息

   app.use(function(req, res, next) {    //允許跨域 CORS    res.setHeader('Access-Control-Allow-Origin', '*');    //緩存設置    res.setHeader('Cache-Control', 'no-cache');    next();});

4. 設置get請求url對應的處理函數(shù)（獲取評論json數(shù)據(jù)）

   app.get('/api/comments', function(req, res) {    //讀取comments.json文件，并且解析為json數(shù)據(jù)    fs.readFile(COMMENTS_FILE, function(err, data) {        if (err) {          console.error(err);          process.exit(1);        }        //讀取成功后，返回        res.json(JSON.parse(data));    });});

5. 設置post請求url對應的處理函數(shù)（提交評論數(shù)據(jù)）

   app.post('/api/comments', function(req, res) {    //先讀取comments.json文件    fs.readFile(COMMENTS_FILE, function(err, data) {        if (err) {          console.error(err);          process.exit(1);        }        //將文件內(nèi)容解析為json數(shù)據(jù)        var comments = JSON.parse(data);        //獲取新評論        var newComment = {          id: Date.now(),          author: req.body.author,          text: req.body.text,        };        //添加json數(shù)組中        comments.push(newComment);        //將json數(shù)據(jù)寫回到comments.json文件中,并且返回全部的評論數(shù)據(jù)         fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) {              if (err) {                console.error(err);                process.exit(1);              }              res.json(comments);        });    });});

6. 啟動，監(jiān)聽端口

   app.listen(app.get('port'), function() {  console.log('Server started: http://localhost:' + app.get('port') + '/');});

web端

web端核心在于 example.js文件，結(jié)合官網(wǎng)的資料，我們對這個應用進行分析，學習如何構(gòu)建一個簡單的react應用。

組件結(jié)構(gòu)

React踐行了 Web Components的理念，依照組件化的開發(fā)方式，我們來分析這個應用的組件結(jié)構(gòu)（如圖所示）：

即是：

-- CommentBox    -- CommentList        -- Comment    -- CommentForm

組件之間的關(guān)系圖為：

組件Comment

如上述的結(jié)構(gòu)圖，我們從最底層開始編寫組件 Comment，這個組件需要做兩件事情

1. 接收上層組件 CommentList傳遞的數(shù)據(jù)，動態(tài)渲染虛擬DOM節(jié)點，則從 props中讀取數(shù)據(jù)

   //評論人{this.props.author}//評論的內(nèi)容{this.props.children}

2. 由于評論是支持MarkDown語法的，因此需要使用第三放庫 marked對用戶輸入的內(nèi)容進行處理。

   var rawMarkup = marked(this.props.children.toString(), {sanitize: true});

3. 此外，輸出的內(nèi)容要解析為HTML，而在默認情況下，基于預防XSS攻擊的考慮，React對輸出的內(nèi)容是不解析為HTML的。此時，需要利用到特殊的屬性 dangerouslySetInnerHTML，要將內(nèi)容放到一個對象的 _html屬性中，然后將這個對象賦值給 dangerouslySetInnerHTML屬性

   var html = {_html:"輸出的html內(nèi)容"};<span dangerouslySetInnerHTML={html} />

var Comment = React.createClass({    rawMarkup : function() {        var rawMarkup =  marked(this.props.children.toString(),{sanitize:true});        return {_html : rawMarkup}; //React的規(guī)則，會讀取這個對象的_html內(nèi)容，    },    render : function() {        return (            <div className="comment">                <h2 className="commentAuthor">                    {this.props.author}                </h2>                <span  dangerouslySetInnerHTML={this.rawMarkup()} />            </div>        );    }});

組件CommentList

組件 CommentList需要做的就是接收上一層組件 CommentBox傳遞過來的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)生成多個子組件 Comment

var CommentList = React.createClass({    render : function() {        var commentNodes = this.props.data.map(function(comment){            return (                <Comment author={comment.author} key={comment.id}>                    {comment.text}                </Comment>            );        });        return (            <div className="commentList">                {commentNodes}            </div>        );    }})

在生成子組件 Comment時，將每個子組件的key屬性設置為 comment.id，這是因為 key是一個可選的唯一標識符，通過它可以給組件設置一個獨一無二的鍵，并確保它在一個渲染周期中保持一致，使得React能夠更加智能地決定應該重用一個組件，還是銷毀并重新創(chuàng)建一個組件，進而提升渲染性能。

組件CommentForm

組件 CommentForm需要做的就是兩件事情

1. 管理自身的狀態(tài) this.state（即表單中輸入的評論人和評論內(nèi)容）

   1. 當表單輸入發(fā)生變化時

   2. 當表單提交時

2. 當submit事件觸發(fā)時，調(diào)用上一層組件 CommentBox的事件處理函數(shù)，改變組件 CommentBox的狀態(tài)。

var CommentForm = React.createClass({    getInitialState : function() {        //設置初始狀態(tài)，        return {author:'',text:''};    },    handleAuthorChange : function(e) {        this.setState({            author : e.target.value        });    },    handleTextChange : function(e) {        this.setState({            text : e.target.value        });    },    handleSubmit : function(e) {        e.preventDefault();        var author = this.state.author.trim();        var text = this.state.text.trim();        if(!text || !author){ //為空驗證            return;        }        //觸發(fā)評論提交事件，改變父組件的狀態(tài)        this.props.onCommentSubmit({author:author,text:text});        //改變自身的狀態(tài)        this.setState({author:'',text:''});    }});

在這里有一個值得注意的點，那就是抽象的自定義事件 commentSubmit和真實的事件 submit之間的聯(lián)系，這是一個相當實用的技巧，在接下來的章節(jié)可以看到是如何實現(xiàn)的。

組件CommentBox

作為整個應用的頂層組件， CommentBox需要做的事情有：

1. 從服務器端請求已有的評論數(shù)據(jù)

2. 將新的評論數(shù)據(jù)上傳到服務器

3. 管理自身的狀態(tài)，根據(jù)狀態(tài)對視圖進行渲染（狀態(tài)改變的示意圖如下）

var CommentBox = React.createClass({    getInitialState : function(){        return {data : []};    },    loadCommentsFromServer : function() {        //使用了jQuery的Ajax        $.ajax({            url : this.props.url,            dataType : 'json',            cache : false,            success : function(data) {                this.setState({data:data});            }.bind(this),            error : function(xhr,status,err){                console.err(this.props.url,status,err.toString());            }.bind(this)        });    },    componentDidMount : function() {        /*        這個方法屬于React組件生命周期方法，在render方法成功調(diào)用并且真實的DOM        已經(jīng)渲染之后，調(diào)用此方法，這個方法發(fā)送json數(shù)據(jù)請求，并且設置一個定時器        ，每隔一段時間就向服務器請求數(shù)據(jù)        */        this.loadCommentsFromServer();        setInterval(this.loadCommentsFromServer,this.props.pollInterval);    },    handleCommentSubmit : function(comment) {        /*        這個方法也是比較有意思：        1. 自定義了一個commentSubmit事件，并且此方法作為該事件的處理函數(shù)。        2. 此方法是在子組件CommentForm的submit事件處理函數(shù)中調(diào)用        */        var comments = this.state.data;        comment.id = Date.now();        var newComments = comments.concat([comment]);        //改變自身狀態(tài)        this.setState({data:newComments});        $.ajax({            url : this.props.url,            dataType: 'json',            type : 'POST',            data : comment,            success : function(data) {                this.setState({data:data});            }.bind(this),            error : function(xhr,status,err) {                //還原數(shù)據(jù)                this.setState({data:comments});                console.err(this.props.url,status,err.toString());            }.bind(this)        });    },    render : function() {        return (            <div className="commentBox">                <h1>Comments</h1>                <CommentList data={this.state.data} />                <CommentForm onCommentSubmit={this.handleCommentSubmit} />            </div>        );    }});

最后，只需將組件 CommentBox掛載到真實的DOM節(jié)點上，就可以看到效果了

ReactDOM.render(    <CommentBox url="/api/comments" pollInterval={2000} />,    document.getElementById('content'));