亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

7個導航器

通過flex 調整組件的比例

決定是否換行

111111

組件并不是DOM節點而是存在內存之間的數據結構 稱之為虛擬DOM。在它插入真正的文檔之后才被稱之為真正的DOM

ref：組件被渲染后指向組件的引用，我們可以通過ref屬性來獲取真實的屬性

*ref 屬于組件的特殊屬性可以直接引用

<Text onPress={()=>{

? ? ? var size = this.refs.reftest.getSize();

}}> </Text>

? ? <RefTest ref = "reftest"/>

*this.refs.reftest 來找到RefTest的組件。

*this.refs.reftest.getSize()。getSize()來調取組件的方法

refs指的是一個所有帶ref屬性的組件數組

state：組件的狀態

當state發生改變就會重新渲染

?defaultProps:?設置初始值 如果沒有傳遞值的時候

static defaultProps ={ name: "xiaohon"}

propTypes: 限制屬性類型

static propTypes={

????name: PropTypes.string //name只能是字符串

????sex: PropTypes.string.isRequired //限制sex必須被傳遞

}

導入和導出:

導出變量:?

export var name = "xiaoming"

--------------------------------

var name = "xiaoming"

var age ="22"

export {name, age}

--------------------------

導出組件

export default class HiComponent extends Component{}

------------------------------

導出函數

export function sum(a,b){

? ? ? return a+b;

}

------------------------------

導入組件和變量和函數

import {name,age,sum}, HiComponent from 'HiComponent';

用onPress()來改變屬性的值

onPress={()=>{

????this.setState({? ? remove = !this.state.remove? ? })

}}

通過屬性的值來判斷組件:

? ? ? var view = remove? null : <LifeComponent/>

{view}

class Hello extends Component{

????constructor(props){

? ? ? ? ?super(props);? //因為繼承Component 使用Super完成初始化

}

}

state在改變的時候shouldComponentUpdate(), componentWillUpdate(), render(), componentDidUpdate()都會被依次調用

生命周期: 開始和關閉

生命周期的方法: 1. Mounting 2. Updating 3. Unmounting

getDefaultProps：定義默認屬性

getInitialState：初始話(ES6 constructor)

componentWillMount:裝載之前調用的方法

render: 渲染

componentDidMount: 渲染完成

Mounting：getDefaultProps ->getInitialState ->componentWillMount->render->componentDidMount

Updating:

在運行的是Props屬性改變。運行componentWillReceiveProps收到Value.

在收到Value后運行shouldComponentUpdate() 決定是否Update. 如果是的話運行componentWillUpdate() 再進行渲染再執行componentDidUpdate.

Unmounting:?

頁面關閉時運行componentUnmounting()

ES6:

???? ?export default class HelloComponent extends Component{

}

ES5:?

var HelloComponent = React.createClass({})

module.exports = HelloComponent;

?函數式:(不能使用this)

function HelloComponent(props){}

module.exports = HelloComponent;

Object Value()

? ? ? ? ?const obj = {a:1 , b:2 , c:3};

? ? ? ? ?const values = Object.values(obj1); //[1,2,3]

? ? ? ? ?

ES7 include()

let arr = ['react','angular','vue' ];

if(arr.includes('react')){

????console.log('react exist');

}

async/await:異步函數

async來標識函數

async doLogin2(username){

????????const userId = await this.login(username);

????????const result = await this.getDate(userId);

}

異步函數本身會返回一個Promise, 所以我們可以通過then來獲取異步函數的返回值。通過catch來捕捉整個async/await函數的錯誤。

const d1 = await charCount(data1).
????????????????????????????????????catch(e=>console.log('d1 is null'))