React基礎(chǔ)，幫你快速學(xué)習(xí)React

簡介

學(xué)完這篇博文，你可以對React，這個著名的Facebook的庫有一定程度的理解，并能開始實踐。再完成后續(xù)的學(xué)習(xí)之后你可以掌握React。在正式開始以前，先了解一些相關(guān)的概念。

什么是React？

React是一個Facebook開發(fā)的UI庫。使用這個庫可以很方便的開發(fā)交互式的、具有表達(dá)力的和可重用的UI組件。并且這個庫已經(jīng)在facebook和instagram.com的產(chǎn)品中使用。

這個庫的另外一個獨特的賣點是：他不僅可以使用在客戶端，還可以用在Server端渲染。

這個庫還使用了一種叫做虛擬DOM（Virtual DOM）的概念，這些DOM可以根據(jù)狀態(tài)有選擇的渲染。這樣，頁面就會盡量的減少DOM操作而達(dá)到保持頁面狀態(tài)的效果。

虛擬DOM是如何工作的

想象一下你根據(jù)一個人造了一個模特，這個模特幾乎有這個人的全部屬性，并且有這個人的所有當(dāng)前狀態(tài)。這基本上就是React的虛擬DOM做的。

現(xiàn)在假設(shè)你對這個人形模特做了某些修改。比如，加了胡子、強(qiáng)壯的二頭肌。在React的世界里，當(dāng)我們做了這些修改，會發(fā)生兩件事：第一、運行“對比”算法找出發(fā)生的改變。第二、調(diào)整，根據(jù)第一步找出的不同執(zhí)行必要的DOM操作。

React工作的方式不是把真人拿來從頭到尾的來一次“整形”，而是只修改臉（帖胡子）和胳膊（二頭肌）。也就是如果你在input里加了文字，之后開始渲染操作里，如果input的父節(jié)點沒有開始上文第二步的“調(diào)整”操作，那么input里的文字是不會動的。

因為React使用的是假的DOM不是真的，這也給了React一個新的可能。我們可以在Server端渲染這些假DOM。

現(xiàn)在開始

開始React之旅非常簡單，主要下載facebook提供的開始示例：

React入門示例

你也可以用他們提供的JSFiddle：

React JSFiddle

建立頁面

稍后使用的練習(xí)頁面需要包括react.js、react-dom.js和

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <div id='mount-point'>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

        <script type="text/babel">

        </script>
    </body>
</html>

react-dom是最近發(fā)布的React的支持庫。react-dom本來是react.js的一部分，后來作為單獨的庫發(fā)布。

在React里，一個組件就是一個元素，所以在本例中我們可以使用mount-pointdiv作為父容器。

本例只是作為入門時使用的，在實際的開發(fā)中最好是把創(chuàng)建的組件都放在一個單獨的文件中。

基本內(nèi)容

React的基本創(chuàng)建單元叫做組件，例如：

    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, World!</h1>, 
            document.getElementById('mount-point') 
        );
    </script>

如果你從沒見過這樣的寫法，你會以為javascript/HTML又有什么新的魔法了。

JSX

其實這是JSX，是一個javascript的XML變體。使用JSX可以在javascript里寫出HTML式的標(biāo)簽。

在JSX里，HTML的class屬性寫成className，for屬性寫成htmlFor，因為class, for都是javascript的關(guān)鍵字。更多不同的內(nèi)容可以在這里看到。

你也可以不使用JSX，這是一個不用JSX的例子：

    ReactDOM.render(
        React.createElement('h1', null, 'Hello!'),
        document.getElementById('content')
    );

組件

使用ReactDOM的render方法的時候，第一個參數(shù)是需要渲染的我們創(chuàng)建的組件，第二個是HTML的DOM節(jié)點，組件渲染之后在這里添加。我們可以使用createClass方法創(chuàng)建組件。創(chuàng)建組件方法只需要一個對象作為參數(shù)。我們來創(chuàng)建一個：

    var MyComponent = React.createClass({
        render: function(){
            return (
                <h1>Hello, world!</h1>
            );
        }
    });

組件創(chuàng)建好之后就可以在文檔里渲染出來了：

    ReactDOM.render(
        <MyComponent />,
        document.getElementById('mount-point')
    );

很酷吧！？

進(jìn)階

創(chuàng)建組件的時候，我們可以給組件添加一些屬性。這些屬性都存放在props。這些屬性可以通過this.props在組件內(nèi)部訪問，也可以在render方法渲染的時候使用。

    var MyComponent = React.createClass({
        render: function(){
            return (
                <h1>Hello, {this.props.name}!</h1>
            );
        }
    });
    
    ReactDOM.render(
        <MyComponent name="handsome" />,
        document.getElementById('mount-point')
    );

生命周期和狀態(tài)

render方法是創(chuàng)建組件的唯一方法，另外還有一些生命周期相關(guān)的方法可以使用。

生命周期方法

  • componentWillMount 在渲染之前調(diào)用一次。
  • componentDidMount 在渲染之后調(diào)用一次。
  • shouldComponentUpdate 返回值決定組件是否需要update。
  • componentWillUnmount 在卸載組件之前調(diào)用。

狀態(tài)（State）

在開始State之前，需要了解一些相關(guān)基礎(chǔ)：

  • getInitialState返回State的初始值。
  • getDefaultProps獲取props的初始值。
  • mixins一組對象，主要用來擴(kuò)展當(dāng)前組件的功能。

更多相關(guān)的的內(nèi)容可以看這里。

每一個組件都包含一個state對象和一個props對象。State（狀態(tài)）用setState方法設(shè)置。調(diào)用setState方法會觸發(fā)UI的更新，也是實現(xiàn)交互式開發(fā)的必要基礎(chǔ)。如果我們要在一開始設(shè)定初始狀態(tài)（initial state），可以調(diào)用getInitialState方法。代碼：

    var MyComponent = React.createClass({
        getInitialState:function(){
            return {
                count: 5
            };
        },
        render: function(){
            return (
                <h1>Hello, {this.state.count}!</h1>
            );
        }
    });

事件

React包含一個跨瀏覽器的事件系統(tǒng)。這些事件作為屬性包含在組件中。代碼：

    var Counter = React.createClass({
        incrementCount: function(){
            this.setState({
                count: this.state.count + 1
            });
        },
        getInitialState: function(){
            return {
                count: 0
            }
        },
        render: function(){
            return (
                <div class="my-component">
                    <h1>Count: {this.state.count}</h1>
                    <button type="button" onClick={this.incrementCount}>Increment</button>
                </div>
            );
        }
    });
    
    ReactDOM.render(
        <Counter />,
        document.getElementById('mount-point')
    );

單向數(shù)據(jù)流

在Rect里，數(shù)據(jù)通過state和props單向流動，這和Angular的雙向流動不同。也就是說，在一個多組件結(jié)構(gòu)里，一個父組件需要負(fù)責(zé)管理狀態(tài)（state）并把數(shù)據(jù)通過props向下發(fā)放。

組件的狀態(tài)應(yīng)該用setState方法更新，這樣可以確保UI會同時刷新。數(shù)據(jù)通過設(shè)置子組件的屬性來傳遞給子組件。子組件可以通過this.props來獲取這些數(shù)據(jù)。代碼：

var FilteredList = React.createClass({
    filterList: function(event){
        var updatedList = this.state.initialItems;
        updatedList = updatedList.filter(function(item){
            return item.toLowerCase().search(
            event.target.value.toLowerCase()) !== -1;
        });
        this.setState({items: updatedList});
    },
    getInitialState: function(){
        return {
            initialItems: [
                "Apples",
                "Broccoli",
                "Chicken",
                "Duck",
                "Eggs",
                "Fish",
                "Granola",
                "Hash Browns"
            ],
            items: []
        }
    },
    componentWillMount: function(){
        this.setState({items: this.state.initialItems})
    },
    render: function(){
        return (
            <div className="filter-list">
                <input type="text" placeholder="Search" onChange={this.filterList}/>
                <List items={this.state.items}/>
            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.items.map(function(item) {
                    return <li key={item}>{item}</li>
                })
            }
        </ul>
        )  
    }
});

ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));

結(jié)語

現(xiàn)在我們已經(jīng)把React的基礎(chǔ)都學(xué)會了，花點時間看看React API和JSX。

原文地址：https://scotch.io/tutorials/learning-react-getting-started-and-concepts

Stay tuned to my next episode

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 本筆記基于React官方文檔，當(dāng)前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,805評論 14贊 128
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,107評論 2贊 35
  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書，強(qiáng)調(diào)了記筆記和堅持的重要性。這幾天也剛好在學(xué)習(xí)React，所以我打算每天堅持一篇R...
    gaoer1938閱讀 1,730評論 0贊 5
  • GUIDS 第一章 為什么使用React？ React 一個提供了用戶接口的JavaScript庫。 誕生于Fac...
    jplyue閱讀 3,595評論 1贊 11
  • 所有人都吃過甜甜圈，它是一種圓形空心面包，外表特別惹人喜愛尤其受女生的喜愛。《小狗錢錢》一書中提到了一個有關(guān)“甜甜...
    無尾熊自成長閱讀 409評論 0贊 1