react建立元件的三種方式,你懂嗎?

2021-09-11 15:27:43 字數 976 閱讀 6608

eact建立元件的三種方式:

1、函式式無狀態元件

2、es5方式react.createclass元件

3、es6方式extends react.component

三種建立方式的異同

1、函式式無狀態元件

(1)語法

function mycomponent(props)   }

複製**

(2)特點

● 它是為了建立純展示元件,這種元件只負責根據傳入的props來展示,不涉及到state狀態的操作。

● 元件不能訪問this物件

● 不能訪問生命週期方法

(3)建議

如果可能,盡量使用無狀態元件

2、es5方式react.createclass元件

(1)語法

var mycreate = react.createclass(,

getinitialstate: function

() ;

}, render: function

() 複製**

(2)特點

這種方式比較陳舊,慢慢會被淘汰。

3、es6方式extends react.component

(1)語法

class inputcontroles6 extends react.component ;

// es6 類中函式必須手動繫結

this.handlechange = this.handlechange.bind(this);

} handlechange

() );

} render

() 複製**

(2)特點

● 成員函式不會自動繫結this,需要開發者手動繫結,否則this不能獲取當前元件例項物件。

● 狀態state是在constructor中像初始化。

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建立元件的三種方式及其區別

react建立元件的三種方式及其區別 三種方式 函式式定義的無狀態元件es5原生方式react.createclass定義的元件 es6形式的extends react.component定義的元件 function hellocomponent props,context reactdom.ren...