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

資訊專欄INFORMATION COLUMN

JS每日一題：react中類組件和函數(shù)式組件中有什么不同?

Java_oldboy / 1038人閱讀

摘要：期中類組件和函數(shù)式組件中有什么不同在中創(chuàng)建組件的形式有三種純函數(shù)式定義的無狀態(tài)組件定義的組件定義的組件今天我們要聊的是純函數(shù)式定義的無狀態(tài)組件及類組件的到底有什么不同分別在什么場(chǎng)景下適合使用首先我們來看一下用上述方法如何來創(chuàng)建一個(gè)組件定義的

20190306期

react中類組件和函數(shù)式組件中有什么不同?

在react中創(chuàng)建組件的形式有三種

純函數(shù)式定義的無狀態(tài)組件

React.createClass 定義的組件

Extends React.Component 定義的組件

今天我們要聊的是純函數(shù)式定義的無狀態(tài)組件及類組件的到底有什么不同, 分別在什么場(chǎng)景下適合使用

首先我們來看一下用上述方法如何來創(chuàng)建一個(gè)組件

Extends React.Component 定義的組件

React.Component是以ES6的形式來創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會(huì)取代React.createClass形式

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: props.initialValue || "placeholder"
        };
        // 手動(dòng)綁定this
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            

                
            

        );
    }
}
Demo.propTypes = {
    initialValue: React.PropTypes.string
}
純函數(shù)式定義的無狀態(tài)組件

純函數(shù)組件的特點(diǎn):

組件不會(huì)被實(shí)例化,整體渲染性能得到提升

組件不能訪問this對(duì)象

組件無法訪問生命周期的方法

無狀態(tài)組件只能訪問輸入的props,無副作用

function DemoComponent(props) {
  return 
Hello {props.name}

}
ReactDOM.render(, mountNode)
使用場(chǎng)景

以類形式創(chuàng)建的組件不用多說，該怎么用還怎么用, 這里說一純函數(shù)組件, 純函數(shù)組件被鼓勵(lì)在大型項(xiàng)目中盡可能以簡單的寫法來分割原本龐大的組件，未來React也會(huì)這種面向無狀態(tài)組件在譬如無意義的檢查和內(nèi)存分配領(lǐng)域進(jìn)行一系列優(yōu)化，所以只要有可能，盡量使用無狀態(tài)組件

總結(jié)

react中有三種創(chuàng)建組件的形式

純函數(shù)不會(huì)被實(shí)例化，不能訪問this，沒有生命周期

盡可能的使用純函數(shù)拆分復(fù)雜型組件

關(guān)于JS每日一題

JS每日一題可以看成是一個(gè)語音答題社區(qū)
每天利用碎片時(shí)間采用60秒內(nèi)的語音形式來完成當(dāng)天的考題
群主在次日0點(diǎn)推送當(dāng)天的參考答案

注 絕不僅限于完成當(dāng)天任務(wù)，更多是查漏補(bǔ)缺，學(xué)習(xí)群內(nèi)其它同學(xué)優(yōu)秀的答題思路

點(diǎn)擊加入答題

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

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

相關(guān)文章

  • JS每日一題：什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？

    摘要：什么情況下適合使合使用中有幾個(gè)步驟開始之前先簡單了解一下定義是一個(gè)狀態(tài)管理機(jī)制采用集中式存儲(chǔ)應(yīng)用所有組件的狀態(tài)嗯，就是一句話能說明白的，沒明白的，我們用代碼再理解一下什么叫集中式式存儲(chǔ)比如下面這段代碼，同時(shí)需要用到，那么我們首先能想到就是在 20190121 什么情況下適合使合vuex？Vuex使用中有幾個(gè)步驟？ 開始之前先簡單了解一下vuex 定義: vuex是一個(gè)狀態(tài)管理機(jī)制,采用...

    wow_worktile 評(píng)論0 收藏0

  • JS每日一題：react的生命周期有哪些？有什么需要注意的地方?

    摘要：期的生命周期有哪些有什么需要注意的地方生命周期是什么這里不再累述了，有興趣可以點(diǎn)這里的生命周期這里我們以為準(zhǔn)先上一張圖從圖中我們可以看出來生命周期分為三個(gè)部分裝載處理更新處理卸載處理英譯過來叫做裝備，裝配的意思，在這里我們理解為應(yīng)用加載的過 20190304期 react的生命周期有哪些？有什么需要注意的地方? 生命周期是什么這里不再累述了，有興趣可以點(diǎn)這里 react的生命周期 這里...

    seanHai 評(píng)論0 收藏0

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請(qǐng)，我又找了20多個(gè)React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時(shí)發(fā)布在了前端面試每日3+1的React專題，希望對(duì)大家有所幫助，同時(shí)大...

    kumfo 評(píng)論0 收藏0

  • JS每日一題：小程序跳轉(zhuǎn)頁面有幾種方式？ 有什么不同?

    摘要：小程序跳轉(zhuǎn)頁面有幾種方式有什么不同在小程序中每個(gè)頁面可以看成是一個(gè)，全部以棧的形式進(jìn)行管理最多五層在說跳轉(zhuǎn)方式之前我們先來溫習(xí)一下棧和堆的區(qū)別管理方式不同棧是系統(tǒng)編譯器啟動(dòng)管理，不需要程序員手動(dòng)管理堆的釋放由程序員手動(dòng)管理，不及時(shí)回收容易產(chǎn) 20190228 小程序跳轉(zhuǎn)頁面有幾種方式？ 有什么不同? 在小程序中每個(gè)頁面可以看成是一個(gè)pageModel，pageModel全部以棧的形式進(jìn)...

    googollee 評(píng)論0 收藏0

  • JS每日一題：函數(shù)式編程中代碼組合(compose)如何理解?

    摘要：期函數(shù)式編程中代碼組合如何理解定義顧名思義，在函數(shù)式編程中，就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在一起，讓它們結(jié)合，產(chǎn)生一個(gè)嶄新的函數(shù)代碼理解一個(gè)將小寫轉(zhuǎn)大寫的函數(shù)一個(gè)在字符后加的函數(shù)將兩個(gè)函數(shù)組合起來這里假設(shè)我們實(shí)現(xiàn)了每日一題每日一題顯示結(jié)果里上面 20190315期 函數(shù)式編程中代碼組合(compose)如何理解? 定義: 顧名思義，在函數(shù)式編程中，Compose就是將幾個(gè)有特點(diǎn)的函數(shù)拼湊在...

    Kaede 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<