react元件的建立

2022-08-03 19:24:16 字數 1346 閱讀 6338

最近專案接觸react和rn,之前會一些vue和小程式,起初寫react是很難受的,尤其是jsx的寫法,不過2周過後感覺寫起來有點舒服了。。。

這是早期react元件的建立方式,如果你看的文章是幾年之前寫的,很多都是這種方式(比如阮老師這篇react 入門例項教程)

var likebutton = react.createclass(;

},handleclick: function(event) );

},render: function() this. click to toggle.);}

});reactdom.render(

,document.getelementbyid('example')

);

使用es6的語法,是react.createclass的替代,也是目前用的最多的一種方式

class likebutton extends component 

}componentwillmount ()

componentdidmount ()

handleclick() )

}render() }>

you this.click to toggle)}

}

constructor(props) 

然後可以

}>

這種元件不會被例項化,只負責根據傳入的props來展示,不涉及到state,生命週期和this。在大部分react**中,大多數元件被寫成無狀態的元件,通過簡單組合可以構建成其他的元件等;這種通過多個簡單然後合併成乙個大應用的設計模式被提倡。

//子元件

const likebutton=(props)=> this.click to toggle

)}//父元件

constructor(props)

}handleclick() )

}render() } like=/>

) }

大多數元件都可以使用函式式元件,因為他很簡潔,沒有例項化過程和生命週期所以效能非常出色;而其他情況可以使用react.component;至於react.createclass就可以放棄了;

小程式:taoland

React的元件建立

在react中,元件分為兩種,類元件和函式式元件 簡單的共呢個使用函式式元件複雜功能使用類元件元件名首字母都必須大寫 使用es6建立的方式實現乙個元件 import react,from react export default class classcomponent extends compon...

react建立元件的方式

react建立元件的方式 工廠 無狀態 函式 最簡潔,推薦使用 function component es6語法,複雜元件,推薦使用 定義的元件類component必須繼承react的核心元件類component,extends是繼承的意思,render 方法是react最常用的方法 class c...

react建立元件的方法

注意 元件名字必須大寫 建立元件的方式,元件首字母大寫 function hello props div const dog 向元件傳值 在元件裡傳,或者 name reactdom.render div document.getelementbyid 使用class方式定義元件,必須讓元件繼承re...