React 語法一:React.createClass()、ReactDOM.render()、props、state和componentDidMount()

初級語法

React.createClass()

  1. 爲了創建一個 react 組件,我們在 react 中使用 React.createClass() 方法。

    1. render() 對於 react 組件來說是唯一必要的方法。
  2. 另外一種定義 react 組件的方式是使用 ES6繼承,具體語法爲 class ProductList extends React.Component {}ProductList 是新建的 react 組件。

  3. 原生的 HTML 元素標籤名時常是以小寫字母開頭的,但在 react 組件中,react 組件名通常是以大寫字母開頭的。
  4. 組件中的 this 將被綁定在 react 組件類。

ReactDOM.render()

  1. 語法:ReactDOM.render([what], [where]);

props

  1. react 中,我們通過 props 把數據從父級流向子級

  2. 我們申明的 props 中,key 這個 prop 不是被我們的組件內部方法使用的,而是將被用於react 框架的。而且對於每個 react 組件來說,這個屬性的值必須是獨一無二的。

  3. 一般來說,props 不被子組件持有,而是被它的父組件所持有。

state

  1. 鑑於 props不可變的,並且隸屬於父級組件,所以 react 就創建了 state 。它首先是可變的,並且隸屬於組件本身。

  2. 這個屬性本身能夠通過 this.setState() 方法來將最新的 state 屬性值更新到組件中去。當 state 更新組件的時候,組件會自我重新渲染。

  3. 爲了告訴 react ,我們的組件是狀態化的,我們將定義 getInitialState() 函數,該函數定義了組件中各個 state 的初始值,並且返回一個非 false 的值。

  4. 就像 render() 方法一樣,在 react 組件中 getInitialState() 是一個特別的方法,它是幾個生命週期的方法中的一個。在組件的生命週期中,它將只被執行一次

componentDidMount()

  1. 它也是幾個生命週期的方法中的一個。這個方法將在組件完全渲染完畢之後執行。
發佈了45 篇原創文章 · 獲贊 57 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章