React建立元件的三種方式及其區別

2021-08-20 08:03:07 字數 785 閱讀 4186

react建立元件的三種方式及其區別

三種方式:

函式式定義的無狀態元件es5原生方式react.createclass定義的元件

es6形式的extends react.component定義的元件

function hellocomponent(props, /* context */) 

}reactdom.render(, mountnode)

只帶有乙個render方法的元件類,通過函式形式或者箭頭函式形式在建立,並且無state。

不會被例項化;不能訪問this,因為沒有例項化過程;無法訪問生命週期方法;只能訪問輸入的props,不會有***。

class inputcontroles6 extends react.component {}
react.component建立的元件,其成員函式不會自動繫結this;

react.createclass建立的元件,其每乙個成員函式的this都有react自動繫結。

react.component有三種手動繫結方法:

constructor(props) 

//使用bind來繫結

this.handleclick()}>

//使用arrow function來繫結

React建立元件的三種方式

react常見的三種元件建立方式,具體如下 函式式定義的無狀態元件 es5原生方式react.createclass定義的元件 es6形式的extends react.component定義的元件 下面我們簡單說一下,這三種方式的用法 適用場合以及區別 import react,from react...

React三種建立元件的方式

react一共有三種建立方式 1 函式式定義的無狀態元件 2 es5原生方式react.createclass建立元件 3 es6繼承react.component方式 無狀態函式式元件是乙個只帶有render方法的函式,並且該元件是無狀態的,具體的形式如下 function hello props...

React建立元件的三種方式及其區別

1.函式定義式的無狀態元件 建立純展示元件,只負責根據傳入的props來展示,不涉及state的操作。無狀態函式式元件形式上表現為乙個直帶有乙個render方法的元件類。function hellocomponent props reacrdom.render mountnode 特點是精簡,避免冗...