React中函式元件和類元件的區別

定義元件有兩個要求：

元件名稱必須以大寫字母開頭

元件的返回值只能有乙個根元素

函式元件：

function welcome (props) 

}reactdom.render(='react' />, document.getelementbyid('root'));
函式元件接收乙個單一的props物件並返回了乙個react元素

類元件：

class welcome extends react.component 

); }
}reactdom.render(='react' />, document.getelementbyid('root'));

所有 react 元件都必須是純函式，並禁止修改其自身props。

react是單項資料流，父元件改變了屬性，那麼子元件檢視會更新。

屬性props是外界傳遞過來的，狀態state是元件本身的，狀態可以在元件中任意修改

元件的屬性和狀態改變都會更新檢視。

區

別：

函式元件和類元件當然是有區別的，而且函式元件的效能比類元件的效能要高，

因為類元件使用的時候要例項化，而函式元件直接執行函式取返回結果即可。

為了提高效能，盡量使用函式元件。

函式元件沒有this,沒有生命週期，沒有狀態state,

類元件有this,有生命週期，有狀態state。

React函式元件和類元件的區別

定義元件有兩個要求 元件名稱必須以大寫字母開頭 元件的返回值只能有乙個根元素 function welcome props h1 reactdom.render react document.getelementbyid root 函式元件接收乙個單一的props物件並返回了乙個react元素 cl...

React 的函式元件和類元件中的props

函式元件 函式元件中的props是乙個物件直接作為函式的引數傳入,在元件內容中可以直接用點語法使用props物件中的屬性,如下 function test1 props b logged in.div const element isloggedin reactdom.render element,...

react中智慧型元件和木偶元件

智慧型元件和木偶元件，又叫做 smart and dumb components 當我在寫react應用的時候我發現一種老有用而且簡單的寫法了。要是你寫了一段時間react的話。我估摸著你也應該發現了這種寫法了。這篇文章 下次我就翻譯這片文章 就說的很好，但是捏，我還想多差兩句嘴 你要是把你的元件分...