記一下從開(kāi)始到第一個(gè)項(xiàng)目中的問(wèn)題掸读。
01.expected a component class gotobject
importMessageDetailViewContainerfrom'./Messagedetail/MessageDetailViewContainer';
if(key ==='messageDetail'){
return
}
組件首字母要大寫(xiě)
02.dependencies與devDependencies的區(qū)別
devDependencies下列出的模塊，是我們開(kāi)發(fā)時(shí)用的依賴(lài)項(xiàng)蝗砾，像一些進(jìn)行單元測(cè)試之類(lèi)的包佑惠，比如grunt-contrib-uglify融欧，我們用它混淆js文件他炊，它們不會(huì)被部署到生產(chǎn)環(huán)境。dependencies下的模塊咧擂，則是我們生產(chǎn)環(huán)境中需要的依賴(lài)，即正常運(yùn)行該包時(shí)所需要的依賴(lài)項(xiàng)檀蹋。
如果你將包下載下來(lái)在包的根目錄里運(yùn)行,執(zhí)行如下命令,默認(rèn)會(huì)安裝兩種依賴(lài)
npm install
如果你只是單純的使用這個(gè)包而不需要進(jìn)行一些改動(dòng)測(cè)試之類(lèi)的松申，只安裝dependencies而不安裝devDependencies。執(zhí)行：
npm install--production
通過(guò)“npm install
packagename”進(jìn)行安裝俯逾，只會(huì)安裝dependencies
npm installpackagename
如需安裝devDependencies贸桶，執(zhí)行：
npm installpackagename --dev
03.export default , export區(qū)別：import的時(shí)候export不帶{} export要帶{}，export
default只能有一個(gè)
04.rest語(yǔ)法
functionanimals(...types){
console.log(types)
}
animals('cat','dog','fish')//["cat","dog","fish"]
而如果不用ES6的話桌肴，我們則得使用ES5的arguments皇筛。
05.()=>arrow function
不用指定this，當(dāng)我們使用箭頭函數(shù)時(shí)坠七，函數(shù)體內(nèi)的this對(duì)象水醋，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象彪置。并不是因?yàn)榧^函數(shù)內(nèi)部有綁定this的機(jī)制拄踪，實(shí)際原因是箭頭函數(shù)根本沒(méi)有自己的this，它的this是繼承外面的悉稠，因此內(nèi)部的this就是外層代碼塊的this宫蛆。
06.繼承
classAnimal{
constructor(){
? ? this.type ='animal'
}
says(say){
? ?console.log(this.type +' says '+ say)
}
}
letanimal =newAnimal()
animal.says('hello')//animal says hello
classCatextendsAnimal{
constructor(){
super()
?this.type ='cat'
}
}
let cat=newCat()
cat.says('hello')//cat says hello
constructor內(nèi)定義的方法和屬性是實(shí)例對(duì)象自己的，而constructor外定義的方法和屬性則是所有實(shí)例對(duì)象可以共享的的猛。
Class之間可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承耀盗，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多卦尊。上面定義了一個(gè)Cat類(lèi)叛拷，該類(lèi)通過(guò)extends關(guān)鍵字，繼承了Animal類(lèi)的所有屬性和方法岂却。
super關(guān)鍵字忿薇，它指代父類(lèi)的實(shí)例（即父類(lèi)的this對(duì)象）。子類(lèi)必須在constructor方法中調(diào)用super方法躏哩，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)署浩。這是因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，而是繼承父類(lèi)的this對(duì)象扫尺，然后對(duì)其進(jìn)行加工筋栋。如果不調(diào)用super方法，子類(lèi)就得不到this對(duì)象正驻。
一個(gè)組件的組織結(jié)構(gòu)
1classdefinition
? ? 1.1constructor
? ? ? ? 1.1.1event handlers
? ? 1.2'component'lifecycle events
? ? 1.3getters
? ? 1.4render
2defaultProps
3proptypes
PropTypes和getDefaultProps()
1.一定要寫(xiě)PropTypes弊攘，切莫為了省事而不寫(xiě)
2.如果一個(gè)Props不是requied抢腐，一定在getDefaultProps中設(shè)置它
React.PropTypes主要用來(lái)驗(yàn)證組件接收到的props是否為正確的數(shù)據(jù)類(lèi)型，如果不正確襟交，console中就會(huì)出現(xiàn)對(duì)應(yīng)的warning迈倍。出于性能方面的考慮，這個(gè)API只在開(kāi)發(fā)環(huán)境下使用捣域。
基本使用方法：
propTypes: {
myArray: React.PropTypes.array,
myBool: React.PropTypes.bool,
myFunc: React.PropTypes.func,
myNumber: React.PropTypes.number,
myString: React.PropTypes.string啼染，
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: React.PropTypes.func.isRequired
}
假如我們props不是以上類(lèi)型，而是擁有復(fù)雜結(jié)構(gòu)的對(duì)象怎么辦竟宋？比如下面這個(gè)：
{
text:'hello world',
numbers: [5,2,7,9],
}
當(dāng)然提完，我們可以直接用React.PropTypes.object,但是對(duì)象內(nèi)部的數(shù)據(jù)我們卻無(wú)法驗(yàn)證。
propTypes:{
myObject:React.PropTypes.object,
}
進(jìn)階使用方法：shape()和arrayOf()
propTypes:{
myObject:React.PropTypes.shape({
text: React.PropTypes.string,
numbers: React.PropTypes.arrayOf(React.PropTypes.number),
})
}
下面是一個(gè)更復(fù)雜的Props：
[
{
name:'Zachary He',
age:13,
married:true,
},
{
name:'Alice Yo',
name:17,
},
{
name:'Jonyu Me',
age:20,
married:false,
}
]
綜上丘侠，：
propTypes:{
myArray:React.PropTypes.arrayOf(
React.propTypes.shape({
name: React.propTypes.string.isRequired,
age: React.propTypes.number.isRequired,
married: React.propTypes.bool
})
)
}
07.如果想讓子view實(shí)現(xiàn)100%的效果可以設(shè)置left：0 ,right :0,同理height可以用top:0,bottom:0
08.使用text的numberOfLines可以實(shí)現(xiàn)文本截取省略號(hào)徒欣，即css的text-overflow屬性
09.react native里面沒(méi)有z-index的概念，是根據(jù)jsx語(yǔ)法里面定義組件的順序來(lái)實(shí)現(xiàn)的蜗字，后寫(xiě)的組件會(huì)覆蓋在先寫(xiě)的組件上
UIManager
模塊數(shù)據(jù)結(jié)構(gòu)打肝，JS端可訪問(wèn)：
UIManager.[UI組件名].[Constants（靜態(tài)值）/Commands（命令/方法）]
從端上映射的方法：（部分）
·createView(int
tag, String className, int rootViewTag, ReadableMap props)
創(chuàng)建View
·updateView(int
tag, String className, ReadableMap props)
更新View
·manageChildren(int
viewTag, Array moveFrom, Array moveTo, Array addChildTags, Array addAtIndices,
Array removeFrom)
批量添加/刪除/移動(dòng)一個(gè)view下面的view
·measure(int
reactTag, Callback callback)
測(cè)量View的位置、size等挪捕，結(jié)果異步回調(diào)
·measureInWindow(int
reactTag, Callback callback)
測(cè)量View相對(duì)屏幕的位置粗梭、size等，結(jié)果異步回調(diào)
·dispatchViewManagerCommand(int
reactTag, int commandId, ReadableArray commandArgs)
派發(fā)View命令级零，也就是用來(lái)調(diào)用對(duì)應(yīng)View的方法
這個(gè)模塊是NativeModule方式定義的断医，在RN的JS端啟動(dòng)時(shí)，端上會(huì)通過(guò)JSC把收集到的模塊信息（名稱(chēng)）打到JS端全局變量global.__fbBatchedBridgeConfig中奏纪，并采用延遲加載策略：設(shè)置NativeModules.[模塊名]的getter鉴嗤，延遲通過(guò)JSC讀取模塊詳細(xì)信息（方法、命令號(hào)等信息）序调。在調(diào)用的時(shí)候會(huì)放到MessageQueue的隊(duì)列里醉锅，批量提交，兩次批量提交限制的最小間隔為5ms发绢。
10.NativeMethodsMixin?
react-native中直接訪問(wèn)原聲組件的方法
11.array.map(function(currentValue,index,arr),thisValue)
12.react-native沒(méi)有z-index的概念后寫(xiě)的組件在新寫(xiě)的上邊硬耍，所以一個(gè)view中放一個(gè)圖片view并不能擋住圖片超出view的部分。（為圖片設(shè)置與view一樣的style即可）
13.用循環(huán)渲染組件
會(huì)出現(xiàn)key的問(wèn)題例如Warning: Each child in an array or iterator should have aunique "key" prop. Check the render method ofListView.解決方法：為每個(gè)子組件添加key边酒，但是不能重復(fù)经柴。
14.Array.map()array.foreach()
優(yōu)先級(jí)map>foreach>for
foreach的返回值并不是數(shù)組，所以不能寫(xiě)鏈?zhǔn)酱a
15.
