React入門筆記（一）

OpenDigg 發(fā)布于2019-08-19 18:15 / 3396人閱讀

摘要：環(huán)境配置新版的要求統(tǒng)一使用作為的編譯工具，因此我們選擇，新建文件，內(nèi)容如下設(shè)置候選版本為和這里因為要用到，所以把在候選版本里加入對的支持組件里引入的組件這個概念里的組件就像，里的控件一樣，能方便快捷的作為界面的一部分實現(xiàn)一定功能，我們可以

環(huán)境配置

新版的React要求統(tǒng)一使用babel作為JSX的編譯工具，因此我們選擇babel，新建.babelrc文件，內(nèi)容如下

{
    "presets":["es2015","react"]       //設(shè)置候選版本為es6和react-jsx
}

這里因為要用到ES6，所以把在babel候選版本里加入對ES6的支持

React組件

React里引入的組件這個概念：
React里的組件就像Android，ios里的控件一樣，能方便快捷的作為界面的一部分實現(xiàn)一定功能，我們可以把數(shù)據(jù)傳入：

var Hello = React.createClass({
    render: function () {
        return (
            
                
                    {this.props.name}
                
            
        );
    }
});

這里我們用React.createClass方法創(chuàng)建了一個React組件，render函數(shù)的返回值為要渲染的內(nèi)容。

同樣的組件我們用ES6實現(xiàn)如下：

class Hello extends React.Component {

    render() {
        return (
            
                
                    {this.props.name}
                
            
        );
    }

}

這里用到了ES6的class、extends等關(guān)鍵詞

接下來我們用ReactDOM.render方法將其render到頁面上

let names = [
    "flypie ",
    "flyboy "
];

ReactDOM.render(
    ,
    document.body
);

組件的生命周期

組件的生命周期分成三個狀態(tài)：

Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM

React 為每個狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計五種處理函數(shù)。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

下圖是官方文檔里對各種函數(shù)執(zhí)行位置的表述

這里我們做個實驗：

let Hello = React.createClass({

    getInitialState: function () {
        console.log("getInitialState");
        return {};
    },

    getDefaultProps: function () {
        console.log("getDefaultProps");
        return {};
    },

    componentWillMount: function () {
        console.log("componentWillMount");
    },

    componentDidMount: function () {
        console.log("componentDidMount");
    },

    componentWillReceiveProps: function () {
        console.log("componentWillReceiveProps");
    },

    shouldComponentUpdate: function () {
        console.log("shouldComponentUpdate");
        return true;
    },

    componentWillUpdate:function(){
        console.log("componentWillUpdate");
    },

    componentDidUpdate:function(){
        console.log("componentDidUpdate");
    },

    componentWillUnmount:function(){
        console.log("componentWillUnmount");
    },

    render: function () {
        return (
            
                
                    {this.props.name}
                
            
        );
    }
});

let names = [
    "flypie ",
    "flyboy "
];

ReactDOM.render(
    ,
    document.body
);

運行程序，控制臺輸出結(jié)果如下：

云服務(wù)器 GPU云服務(wù)器 java開發(fā)入門筆記學(xué)習(xí)筆記一 react _React

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79371.html

發(fā)表評論

登陸后可評論

0條評論

OpenDigg

男|高級講師

我要關(guān)注我要私信

TA的文章

【測試】01-基礎(chǔ)推進(jìn)-請求方法

閱讀 2683·2021-11-18 10:02
EasyUI項目之門戶書籍、類別查詢、圖片上傳

閱讀 3415·2021-09-28 09:35
主機最主要是什么-組裝電腦最主要的是什么？

閱讀 2594·2021-09-22 15:12
主機商如何防止攻擊-針對互聯(lián)網(wǎng)攻擊，高防服務(wù)器將如何防御？

閱讀 753·2021-09-22 15:08
NVIDIA Jetson之I2C測試

閱讀 3110·2021-09-07 09:58
10g.biz：【八月老用戶尊享活動】香港/日本七星級服務(wù)器 E5v2 + 16G + 1T +

閱讀 3475·2021-08-23 09:42
對于web前端的理解

閱讀 735·2019-08-30 12:53
css 聊聊position屬性

閱讀 2085·2019-08-29 13:51

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React入門筆記（一）

{this.props.name}

{this.props.name}

{this.props.name}

相關(guān)文章

React 入門學(xué)習(xí)筆記整理目錄

react入門學(xué)習(xí)筆記（一）

Flux架構(gòu)小白入門筆記