React基礎

解剖index.ios.js

 

Render函數：

返回咱們但願這個組件渲染出來的視圖

 

樣式

style的使用，當使用StyleSheet建立的樣式時，外層只須要一層{}，而直接聲明須要再加一層，即直接聲明瞭匿名變量

建立樣式：

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

});

 

使用樣式：

 <Text style={styles.container}>

          Welcome to React Native!

          hahaha1234

 </Text>

 

註冊組件：

註冊根組件：AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

即app運行時的第一個出現的組件

 

JXS語法：

基於ES6的一種新特性

一種定義帶屬性樹結構的語法

 JSX不是XML，也不是HTML

 

React組件的生命週期——不一樣生命週期內能夠自定義的函數

初始化—》運行中—》銷燬

初始化階段：

1.getDefaultProps——獲取實例默認屬性

2.getInitialState——獲取實例的初始化狀態

3.componentWillMount——組件將要裝載

4.render——生成虛擬DOM節點JSX，渲染成真正的DOM節點

只能訪問this.props和this.state,只有一個頂層組件，不容許修改狀態和DOM輸出

5.componentDidMount——組件已經裝載

 

運行中階段：

1.componentWillReceiveProps——組件將要接收屬性時調用

2.shouldComponentUpdate——當屬性接收到新狀態時是否更新？

3.componentWillUpdate——組件將要更新

4.render——和初始化階段一行

5.conponentDidUpdate——組件更新

 

銷燬階段：

componentWillUnmount——銷燬前調用

 

React屬性和狀態

Props:

 

State:

 

 對比：

　　組件不可修改屬性，狀態只和本身相關，由本身維護

 

區分：

 　　組件在運行時須要修改的數據就是狀態

 

 

持續更行中。。。