[邊學邊練]用簡單實例學習React

CrazyCodes 發布于2019-08-29 16:31 / 1839人閱讀

摘要：殲轟運殲擊機轟炸機運輸機這里有個知識點需要知道這個一定要調用，這里相當于調用了的。下面簡單實現一下殲轟運殲擊機轟炸機運輸機如果要修改只能使用如改變。殲擊機轟炸機運輸機殲擊機轟炸機運輸機這樣一來，在頁面渲染前就初始化有值了，頁面也正常了。

每一個的地方，每一種的知識，每一種事物，都是從陌生到熟悉。在這個過程里面，或許能開闊眼界，增長見識，體驗樂趣。一切都歸于我們的心態與行動。

1.前言

學習之路不可停止，最近在玩 React。也動手嘗試寫了一個實例。借此整理總結下初步學習 React 的一些基礎知識。因為這幾天比較忙，沒那么多時間，所以實例和文章沒有很細致。如果大家發現文章有錯誤的地方，請多諒解。有什么更新的建議，歡迎在評論區指出。該文章主要是大概講下和快速上手使用，如果深入，要靠自己探索，后期我也會補充文章。

1.這里使用 React 版本是 16.4

2.如果大家看的有點蒙圈，可能要去 React 上面看下 React 的基礎。

3.代碼已經上傳到 Github 上面，需要的可以去進行下載，歡迎 star react-demos。

4.建議大家看該文章的時候也打開編輯器，邊寫邊看，思路會清晰很多

2.預熱知識

學習React之前，一定要對下面兩個知識點有所了解。如果不了解下面的知識，請前往下面對應的鏈接，進行學習。

2-1.JSX

學習 React 實例之前，一定要對JSX有一定的了解。JSX 可以說是一個語法糖，React 使用來替代常規的 JavaScript。看起來很像 XML 的 JavaScript 語法擴展。

JSX 不是必須的，如下兩段代碼，是完全等價的，但是使用JSX會更加的清晰，簡潔，易懂。
JSX

let el=守候

ReactDOM.render(
       el,
   document.getElementById("example")
);

HTML

let el=React.createElement("div",{className:"suthor"},"守候")
ReactDOM.render(
       el,
   document.getElementById("example")
);

關于 JSX 語法的更多內容，大家請看 React JSX 。這里不做過多的介紹。

2-2.組件

組件是 React 最重要的一個概念。比如下面的代碼，就可以說是一個組件。

class Author extends React.Component{
    render(){
        return (
            守候
        )
    }
}

當然也可以使用函數組件的方式定義。

function Author(props) {
    return 守候;
}

把組件掛在到頁面的 id 為 example 的一個 Dom 元素上面。

ReactDOM.render(
    ,
    document.getElementById("example")
);

上面這里，就是一個組件，這個組件只有一個元素。組件也可以由多個元素組成

class Author extends React.Component{
    render(){
        return (
            
                守候
                男
            
        )
    }
}

參考鏈接：React 組件。

3.實例

這個例子的運行效果如下，是一個非常簡單的實例。下面通過這個實例，接觸下 React 的一些基礎知識和使用方式。

3-1.渲染

渲染其實上面例子就已經有了，就是利用 render 函數返回一個組件。之后利用 ReactDOM.render 進行掛載到頁面上的特定 Dom 元素里面。

class EquipmentList extends React.Component{
    render(){
        return (
            
                殲擊機
                轟炸機
                運輸機
                
                    殲20
                    轟6K
                    運20
                
            
        )
    }
}
//掛載到頁面里 id 為 example 的元素上面
ReactDOM.render(
    ,
    document.getElementById("example")
);

3-2.狀態和循環

上面是最基本的一個頁面布局，但是頁面是靜態的，不是根據數據渲染的。下面認識下狀態和循環，以數據驅動渲染。

首先來說下狀態

引用菜鳥教程的說法：React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。

我們把上面的代碼，稍微改下，給組件加上狀態。

class EquipmentList extends React.Component{
    constructor(){
        super();
        this.state={
            post1:"殲20",
            post2:"轟6K",
            post3:"運20",
        }
    }

    render(){
        return (
            
                殲擊機
                轟炸機
                運輸機
                
                    {this.state.post1}
                    {this.state.post2}
                    {this.state.post3}
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById("example")
);

這里有3個知識點需要知道

1.super(); 這個一定要調用，這里相當于調用了 React.Component 的 constructor。目的就是初始化 React 組件。

2.this.state 就是組件的狀態

3.render 方法里面，輸入的是 state (也可以是 props)。輸出的就是組件。

頁面效果完全一樣，至于狀態的修改等，下面再實例再提及。

但是這樣寫代碼顯然是不優雅的，如果數據一多，工作量就很大，就應該使用循環進行渲染。下面把代碼改下。

class EquipmentList extends React.Component{
    constructor(){
        super();
        this.state={
            equipmentList:[
                {
                    id:1,
                    title:"殲20"
                },
                {
                    id:2,
                    title:"轟6K"
                },
                {
                    id:3,
                    title:"運20"
                }
            ],
        }
    }

    render(){
        return (
            
                殲擊機
                轟炸機
                運輸機
                
                    {this.state.equipmentList.map(item=>{item.title})}
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById("example")
);

可能大家會有疑問，為什么li要帶上 key 這個屬性。是因為 React 是使用 key 屬性來標志列表中的所有元素，當列表數據發生變化時，React 通過 key 可以更快的知道哪些元素發生了變化，從而只重新渲染發生變化的元素，提高效率和性能。在列表里面 key 需要唯一，一般是使用 id 作為 key 值，不建議使用 index 作為 key 值。因為如果列表發生了刪除，插入等操作，列表要重排。index 值會改變，可能會影響渲染的效率和性能。

3-3.事件

接下來就給組件添加時間，點擊 a 元素的時候，比如點擊‘殲擊機’，就應該顯示 equipmentList 里面 title 等于‘殲20’的數據，點擊‘轟炸機’，就應該顯示 equipmentList 里面 title 等于‘轟6K’的數據......

實現這個需求，其實很簡單，就是新建一個狀態 equipmentListNow ，組件里面只遍歷 equipmentListNow。點擊‘殲擊機’，就把 equipmentList 里面 title ‘殲20’的數據賦值給postListNow，點擊‘轟炸機’，就把 equipmentList 里面 title 等于‘轟6K’的數據賦值給postListNow......。

下面簡單實現一下

class EquipmentList extends React.Component{
    constructor(){
        super();
        this.state={
            equipmentList:[
                {
                    id:1,
                    title:"殲20"
                },
                {
                    id:2,
                    title:"轟6K"
                },
                {
                    id:3,
                    title:"運20"
                }
            ],
            equipmentListNow:[]
        }
    }

    switchTab(id){
        let _list=this.state.equipmentList.filter(item=>item.id===id);
        this.setState({
            equipmentListNow:_list
        })
    }

    render(){
        return (
            
                {
                    this.switchTab(1);
                }}>殲擊機
                {
                    this.switchTab(2);
                }}>轟炸機
                {
                    this.switchTab(3);
                }}>運輸機
                
                    {this.state.equipmentListNow.map(item=>{item.title})}
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById("example")
);

如果要修改 state ,只能使用如： this.setState({equipmentListNow:_list})  改變。切記不能出現如下寫法：this.equipmentListNow=_list;

跑起來了，沒報錯，但是頁面上一開始列表沒有被渲染出來，要點擊的時候才有特定的數據出來（點擊第一章的a，出現第一章的數據，以此類推）。原因想必大家也知道，因為在頁面初始化的時候，equipmentListNow 只是一個空數組，所以正確的做法是在頁面初始化的時候，就把 equipmentList 的值賦給 equipmentListNow。頁面初始化賦值，就是下面組件生命周期的內容了。

3-4.生命周期

為了讓頁面加載后，equipmentListNow 能有初始化的內容，那么需要在生命周期函數里面把 equipmentList 的值賦給 equipmentListNow。

至于生命周期，這里不展開講，大家可以看下文檔：React 組件生命周期。

大家應該知道，這個初始化賦值操作，應該在渲染前就完成。如果在渲染后再操作，那么就相當于頁面渲染了第二次。所以我們現在用到的生命周期函數是 componentWillMount 。

class EquipmentList extends React.Component{
    constructor(){
        super();
        this.state={
            equipmentList:[
                {
                    id:1,
                    title:"殲擊機"
                },
                {
                    id:2,
                    title:"轟炸機"
                },
                {
                    id:3,
                    title:"運輸機"
                }
            ],
            equipmentListNow:[]
        }
    }

    switchTab(id){
        let _list=this.state.equipmentList.filter(item=>item.id===id);
        this.setState({
            equipmentListNow:_list
        })
    }

    componentDidMount(){
        let _list=this.state.equipmentList;
        this.setState({
            equipmentListNow:_list
        })
    }

    render(){
        return (
            
                {
                    this.switchTab(1);
                }}>殲擊機
                {
                    this.switchTab(2);
                }}>轟炸機
                {
                    this.switchTab(3);
                }}>運輸機
                
                    {this.state.equipmentListNow.map(item=>{item.title})}
                
            
        )
    }
}
ReactDOM.render(
    ,
    document.getElementById("example")
);

這樣一來，equipmentListNow 在頁面渲染前就初始化有值了，頁面也正常了。

3-5.組件樣式

上面的組件，一行 CSS 都沒寫，看著就特別難看。下面就添加些樣式。

方式1：最簡單的方式就是，就是給組件起 class 。在外部寫上 CSS 樣式。

CSS 代碼

body{
    font-family: "微軟雅黑";
}
ul{
    margin: 0;
    padding: 0;
}
.post-box{
    width: 600px;
    margin: 30px auto;
}
.post-box a{
    display: inline-block;
    font-size: 14px;
    margin-right: 10px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #09f;
    color: #fff;
    text-decoration: none;
}
.post-box li{
    list-style-type: none;
    line-height: 40px;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
}

JS 代碼

在 js class 是關鍵字，所以要給元素設置 class 屬性，需要用 className

render() {
    return (
        {/*給div增加class*/}
        
            ...
        
    )
}

方式2：由于 React 的機制，所以很多時候會使用 css-in-js 這種方式，設置元素的樣式，簡單來說就是設置元素的內聯樣式。

render() {
    return (
        
            {/*給a設置內聯樣式*/}
             {
                this.switchTab(1);
            }} style={{background:"#f90"}}>殲擊機
             {
                this.switchTab(2);
            }} style={{background:"#f00"}}>轟炸機
             {
                this.switchTab(3);
            }} style={{background:"#0f0"}}>運輸機
            
                {this.state.equipmentListNow.map(item => {item.title})}
            
        
    )
}

css-in-js 的另一種寫法是：聲明樣式變量

let _style={
    background:"#09f",
    color:"#f3f201"
}

render() {
    return (
        
            {/*給a設置內聯樣式*/}
             {
                this.switchTab(1);
            }} style={_style}>殲擊機
             {
                this.switchTab(2);
            }} style={_style}>轟炸機
             {
                this.switchTab(3);
            }} style={_style}>運輸機
            
                {this.state.equipmentListNow.map(item => {item.title})}
            
        
    )
}

3-6.有狀態組件和無狀態組件

大家可以看到，上面的組件，是有一個狀態 state 的。但大家看了文章開始的例子就知道，并不是所有的組件都是需要 state 的。根據有無 state 。可以把組件區分為有狀態組件和無狀態組件。把有狀態組件和無狀態組件合理利用，分工合作，可以說是用好 React 的第一步，下面簡單分析下。

不難發現，上面 EquipmentList 組件復用性不強。想要復用，必須把代碼拷貝過去，然后再修改 equipmentList 這個狀態。

大家應該知道 EquipmentList 要想復用，里面的數組不能寫死，只能由外部傳入，EquipmentList 通過 props 獲取數據。

既然說到了 props 就順便提下，props 的作用就是把父組件的值傳給子組件。props 是一個對象。如下

下面引用 2-2 的一個例子。
ReactDOM.render(
    ,
    document.getElementById("example")
);

那么 Author 里面收到的 props 就是

props={
    name:"守候",
    gender:"男"

}

使用方式也很簡單

class Author extends React.Component{
    render(){
        return (
            
                {this.props.name}
                {this.props.gender}
            
        )
    }
}

引用菜鳥教程說法：state 和 props 主要的區別在于 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。

說了這么多，下面修改下，把 EquipmentList 封裝成一個能復用的組件。

class EquipmentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //根據props獲取數據
            equipmentList: this.props.list,
            equipmentListNow: []
        }
    }
    switchTab(id) {
        let _list = this.state.equipmentList.filter(item => item.id === id);
        this.setState({
            equipmentListNow: _list
        })
    }
    componentDidMount() {
        let _list = this.state.equipmentList;
        this.setState({
            equipmentListNow: _list
        })
    }
    render() {
        return (
            
                 {
                    this.switchTab(1);
                }}>殲擊機
                 {
                    this.switchTab(2);
                }}>轟炸機
                 {
                    this.switchTab(3);
                }}>運輸機
                
                    {this.state.equipmentListNow.map(item => {item.title})}
                
            
        )
    }
}

這里有一個要注意的點在 constructor 里面，我寫的是 super(props) 不是之前那樣的 super() 。這樣的寫的原因就是為了在 constructor 里面可以使用 this.props。如下代碼

constructor(props) {
    super(props);
    this.state = {
        //根據props獲取數據
        equipmentList: this.props.list,
        equipmentListNow: []
    }
}

如不需要用 this.props 。可以直接寫 super()，當然寫 super(props) 也沒錯。

constructor(props) {
    super();
    this.state = {
        //根據props獲取數據
        equipmentList: props.list,
        equipmentListNow: []
    }
}

說了這么多，下面看下怎么使用。

使用方式1，這里只做一個說明，這樣子寫實際是沒什么意思的。

let equipmentList = [
    {
        id: 1,
        title: "殲20"
    },
    {
        id: 2,
        title: "轟6K"
    },
    {
        id: 3,
        title: "運20"
    }
]
ReactDOM.render(
        ,
    document.getElementById("example")
);

使用方式2

class Example2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            equipmentList: [
                {
                    id: 1,
                    title: "殲20-量產型號"
                },
                {
                    id: 2,
                    title: "轟6K-量產型號"
                },
                {
                    id: 3,
                    title: "運20-量產型號"
                }
            ],
        }
    }

    componentDidMount() {
        let _list = this.state.equipmentList;
        //兩秒后更新數據
        setTimeout(() => {
            _list.forEach((item,index)=>{
                item.title="其實這是一艘航空母艦"+index;
            });
            this.setState({
                equipmentList: _list
            })
        }, 2000)
    }
    render(){
        return (
            
        )
    }
}
ReactDOM.render(,
    document.getElementById("example2")
);

這樣一來，EquipmentList 變成了無狀態組件，Example2 變成了有狀態組件。分工方面，EquipmentList 不操作數據的變化，只管數據的渲染；Example2 不關注如何渲染，只控制數據變化，每次變化，使用 setState 更新數據，EquipmentList 的渲染結果就會改變。

看到這可能大家也有感悟了，一般而言，一個頁面上絕大部分應該是無狀態組件，少部分是有狀態組件。

最后提一點，可能大家也有會疑問，如果 props 很多都是重復的值，可不可以設置一個默認值，就可以少傳些參數。答案是可以的，比如下面代碼，掛載的時候 EquipmentList 沒有傳值，但是能渲染出來，因為使用了 defaultProps 設置 props 的默認值。

class EquipmentList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //根據props獲取數據
            equipmentList: this.props.list,
            equipmentListNow: []
        }
    }
    switchTab(id) {
        let _list = this.state.equipmentList.filter(item => item.id === id);
        this.setState({
            equipmentListNow: _list
        })
    }
    componentDidMount() {
        let _list = this.state.equipmentList;
        this.setState({
            equipmentListNow: _list
        })
    }
    render() {
        return (
            
                 {
                    this.switchTab(1);
                }}>殲擊機
                 {
                    this.switchTab(2);
                }}>轟炸機
                 {
                    this.switchTab(3);
                }}>運輸機
                
                    {this.state.equipmentListNow.map(item => {item.title})}
                
            
        )
    }
}
//設置 props 默認值
EquipmentList.defaultProps={
    list:[
            {
                id: 1,
                title: "殲20"
            },
            {
                id: 2,
                title: "轟6K"
            },
            {
                id: 3,
                title: "運20"
            }
   ]
}
ReactDOM.render(,
    document.getElementById("example")
);

4.小結

好了，這幾天對 React 學習的一些總結，就暫時告一段落了。該文章只是針對 React 實現一個非常簡單的實例，也很基礎。如果要深入，就要大家各自去努力了，在往后深入學習里面，我也會繼續寫文章，分享。希望和大家有更多的交流，如果大家對文章有什么看法和建議，歡迎指點。

-------------------------華麗的分割線--------------------

想了解更多，和我交流，內推職位，請添加我微信。或者關注我的微信公眾號：守候書閣

云服務器 GPU云服務器 python邊學邊用事務簡單實例指令簡單實例 webrtc簡單實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113799.html

[邊學邊練]用簡單實例學習React

摘要：殲轟運殲擊機轟炸機運輸機這里有個知識點需要知道這個一定要調用，這里相當于調用了的。下面簡單實現一下殲轟運殲擊機轟炸機運輸機如果要修改只能使用如改變。殲擊機轟炸機運輸機殲擊機轟炸機運輸機這樣一來，在頁面渲染前就初始化有值了，頁面也正常了。每一個的地方，每一種的知識，每一種事物，都是從陌生到熟悉。在這個過程里面，或許能開闊眼界，增長見識，體驗樂趣。一切都歸于我們的心態與行動。 1.前言 ...

Mike617 2019-08-23 11:31 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

JouyPub 2019-08-01 17:53 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

funnyZhang 2019-08-29 13:42 評論0 收藏0
iOS轉前端的學習記錄

摘要：我的第一個項目是一個基于和的后臺管理系統，當時我還沒有任何的前端開發知識，時間也比較緊，就在學習和的基礎后，有針對性的對和進行了了解。第一篇博文，寫在從零開始學前端的兩個月后，期間經過了春節，之后又經歷了一些動蕩。算是在邊做邊學中堅持下來，現在基本上可以完成一些業務邏輯上的開發工作。想到應該總結一下這兩個月的學習，也是對自己的知識掌握情況做一個梳理。我的第一個項目是一個基于vue和...

Pines_Cheng 2019-08-26 18:36 評論0 收藏0