1.每個頁面文件tsx 都必須引入使用的標籤且首字母大寫
2.引入自定義組件時要使用首字母大寫與駝峯命名
3.可以在jsx中隨意使用表達式,注意是表達式,if 和 for 不是表達式,也可以在render中聲明變量,也就是 要使用if或者 for循環時處理變量時
4.字符串常量的傳遞
eg:
這兩種寫法是等價的
5.給屬性傳值時 如果你沒有給值,那就是默認爲true
6.jsx的循環語句,較之前的vuex項目還是不太一樣的,
eg: render() {
const todos = [‘finish doc’, ‘submit pr’, ‘nag dan to review’]
return (
{ todos.map(todo) =>
)
}
7.條件渲染也是不同的:
eg:
{ showHerder && < Header /> }
8.組件化和props。
taro的組件 ,通過Class類定義一個組件。裏面的props接受的值,也不用聲明,就可以直接去使用,props中的key值是不允許在子組件中被改變的
- 檢查組件的屬性 需要配置特殊的propTypes屬性,也就是除了你在render中使用的,還需要加一步驟。
import Proptype from ‘prop-types’
Greeting.propTypes = {
name: PropTypes.string
}
10.在CLass中聲明變量,可以寫在 this.state中,因爲這樣的話,將來就可以使用this.setState()去更新組件局部狀態
正因爲this.state和this.setState有特殊意義,所以 由this.state定義的變量 就不要直接去改變 eg: this.state.age = '18' 這樣是不會重新渲染組件的 應該這樣寫: this.setState({ age: '18' })
11.由於this.setState異步的,所以不能在它後面直接打印 你改變的值,
應該用callback
this.setState({
age : ‘19’
},() => {
// 在這裏打印你想要的值
})
- taro中的事件綁定
activeLasers = (e) => {
e.stopPropagation() // 阻止冒泡 ,需要明確的指明
// 邏輯代碼
}
13.也可以使用bind方式監聽函數傳參,事件對象寫在最後
eg :
activeLasers(name,test,e){
e.stopPropagation()
}
14.也可以使用匿名函數:
eg:
15.任何事件的開頭都要以on開頭
16.條件渲染 邏輯運算符渲染 三目運算符 枚舉條件渲染
17.類函數式組件 普通函數組件