React入門筆記（一）

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

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

環(huán)境配置

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

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

這里因?yàn)橐玫紼S6，所以把在babel候選版本里加入對(duì)ES6的支持

React組件

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

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

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

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

class Hello extends React.Component {

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

}

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

接下來(lái)我們用ReactDOM.render方法將其render到頁(yè)面上

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

ReactDOM.render(
    ,
    document.body
);

組件的生命周期

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

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

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

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

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

這里我們做個(gè)實(shí)驗(yàn)：

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
);

運(yùn)行程序，控制臺(tái)輸出結(jié)果如下：

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79371.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

OpenDigg

男|高級(jí)講師

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

TA的文章

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

閱讀 2748·2021-11-18 10:02
EasyUI項(xiàng)目之門戶書籍、類別查詢、圖片上傳

閱讀 3479·2021-09-28 09:35
主機(jī)最主要是什么-組裝電腦最主要的是什么？

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

閱讀 813·2021-09-22 15:08
NVIDIA Jetson之I2C測(cè)試

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

閱讀 3533·2021-08-23 09:42
對(duì)于web前端的理解

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

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

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

React入門筆記（一）

{this.props.name}

{this.props.name}

{this.props.name}

相關(guān)文章

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

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

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