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

Java_oldboy 發布于2019-08-26 13:32 / 1036人閱讀

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

20190306期

react中類組件和函數式組件中有什么不同?

在react中創建組件的形式有三種

純函數式定義的無狀態組件

React.createClass 定義的組件

Extends React.Component 定義的組件

今天我們要聊的是純函數式定義的無狀態組件及類組件的到底有什么不同, 分別在什么場景下適合使用

首先我們來看一下用上述方法如何來創建一個組件

Extends React.Component 定義的組件

React.Component是以ES6的形式來創建react的組件的，是React目前極為推薦的創建有狀態組件的方式，最終會取代React.createClass形式

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

純函數式定義的無狀態組件

純函數組件的特點:

組件不會被實例化,整體渲染性能得到提升

組件不能訪問this對象

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

無狀態組件只能訪問輸入的props,無副作用

function DemoComponent(props) {
  return Hello {props.name}
}
ReactDOM.render(, mountNode)

使用場景

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

總結

react中有三種創建組件的形式

純函數不會被實例化，不能訪問this，沒有生命周期

盡可能的使用純函數拆分復雜型組件

關于JS每日一題

JS每日一題可以看成是一個語音答題社區
每天利用碎片時間采用60秒內的語音形式來完成當天的考題
群主在次日0點推送當天的參考答案

注絕不僅限于完成當天任務，更多是查漏補缺，學習群內其它同學優秀的答題思路

點擊加入答題

云服務器 GPU云服務器函數式組件組件和組件通信 js組件 js 組件框架

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

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

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

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

wow_worktile 2019-08-23 15:22 評論0 收藏0
JS每日一題：react的生命周期有哪些？有什么需要注意的地方?

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

seanHai 2019-08-23 15:40 評論0 收藏0
React 328道最全面試題(持續更新)

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

kumfo 2019-08-26 10:13 評論0 收藏0
JS每日一題：小程序跳轉頁面有幾種方式？有什么不同?

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

googollee 2019-08-23 15:35 評論0 收藏0
JS每日一題：函數式編程中代碼組合(compose)如何理解?

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

Kaede 2019-08-23 16:08 評論0 收藏0