在專案中使用jsx語法:
jsx語法的本質:
並不是直接把jsx渲染到頁面中,而是內部先轉換成了createelement形式再渲染。
在jsx中混合寫入js表示式:
在jsx語法中,要把js**寫在{}中。
作用:用於將jsx渲染到頁面中。
注意:a、在元件中是必須要實現的;
b、只在state改變後觸發。
1、建構函式:
2、class:
具體實現:
import react, from 'react'
// 如果使用 class 定義元件, 必須讓自己的元件繼承自
export default class 元件名 extends react.component
}
class 元件名 extends react.component
這是movie元件--)}
}
補充:
class animal
// 在class內部,通過static修飾的屬性就是靜態屬性,用的不多(es6中沒有,es7中才有)
static info = "eee";
// 這是動物類的靜態方法,用的不多(es6中有)
static show()
a = 1 // 注意!!這裡定義的不是在原型上的屬性,而是給例項初始化的
// 這是animal的原型方法,會經常用到
call()
// render函式作用:渲染當前元件所對應的虛擬dom元素
render()
}console.log(animal.info);
import react, from 'react'
export default class animal extends component
// 構造器的作用:每當new這個類的時候必然會優先執行構造器中的**
constructor(name, age)
// render函式作用:渲染當前元件所對應的虛擬dom元素
render()
}
class american extends person
}
class chinese extends person
}const c1 = new chinese("張三", 22, "***************xx");
// 定義在原型上
a()
// 定義在物件上
b = () => }
兩種建立方式的對比:
1、用建構函式建立的元件叫「無狀態元件」;
2、用class關鍵字建立的元件叫「有狀態元件」;
3、有狀態元件和無狀態元件的本質區別是:有無state屬性和有無生命週期函式。
有狀態元件有自己的私有資料和生命週期函式;
無狀態元件只有props,沒有自己的私有資料和生命週期函式;
4、什麼情況下使用有狀態元件,什麼情況下使用無狀態元件?
乙個元件如果需要有自己的私有資料,則推薦使用有狀態元件,反之則推薦使用無狀態元件;
無狀態元件因為沒有自己state和生命週期函式,所以執行效率會比有狀態元件稍高。
5、元件中props和state的區別:
props中的資料都是外界傳遞進來的,state中的資料都是元件私有的(一般是通過ajax取回來的);
props中的資料都是唯讀的,不能重新賦值,state中的資料是可讀寫的。
1、state在元件的constructor裡外初始化是一樣的,state都是掛載在元件例項上;
2、state只能使用setstate()方法更新;
3、setstate會導致render重新執行,渲染元件和子元件。
class 類名 extends react.component >)}
class元件內部的this表示當前元件的例項物件。
React 基本語法
一 宣告元件 1.建立元件檔案 兩種寫法 在components資料夾中新建乙個home.js檔案 import react,from react 宣告元件的類 class home extends component export default home 在components資料夾中新建乙個c...
React 基本語法
目錄 一 元件的使用 1.1 宣告元件 1.2 掛載元件 二 在元件裡宣告資料及繫結資料 三 在元件中繫結屬性 四 引入 有倆種寫法 寫法一 在components元件中新建home.js 檔案 import react,from react 宣告元件的類 class home extends co...
OC簡單語法複習 總結
定義類 oc中描述類需要2個檔案。類名.h 標頭檔案 定義變數,類名 類名m實現 實現方法 h中的格式 inte ce 類名 父類 為繼承表示。此處定義方法宣告 end 變數宣告 型別 變數名 private 只能在類內部訪問 protected 只能在類內部和子類中訪問 預設 public 全域性...