React組件安裝使用和生命週期函數

React安裝
在使用react時 須要安裝 兩個模塊
react react-dom

初始化時 須要用到react-dom中的render方法

具體以下:
import ReactDOM from "react-dom"

ReactDOM.render(<div>test</div>,document.getElementById("app"),()=>{
console.log("應用初始化完畢")
})

或者
import {render} from "react-dom"

render(<div>test</div>,document.getElementById("app"),()=>{
console.log("應用初始化完畢")
})

定義組件(在react中 組件首字母必須大寫)

簡單組件:
let Box = function(props){
return <div>xxxx{props.xxx}</div>
}
或者採用箭頭函數
let Box = props => <div>xxxx{props.xxx}</div>

完整組件
import React from "react"
class Box extends React.Component{
render(){
return <div></div>
}
}

值得注意的是 在定義組件時,組件的結構只能有一個頂層元素
若是dom結構比較複雜 須要多行時 最好用()將html結構括起來 例如:
return (<div>
<button>按鈕</button>
</div>)

組件的狀態: state
組件的數據模型均掛載在state上 可在構造函數內進行初始化

class Box extends React.Component{
constructor(){
this.state = {
username : "",
goodsList : []
}
}

render(){
return ....
}
}

在渲染函數中 獲取組件狀態: this.state.username

修改組件狀態:
this.setState({
username : "new value"
})

綁定事件:
經過在事件名前面加on而且採用駝峯命名法例如:
<a href="javascript:;" onClick={this.sayHello}>btn</a>
正常狀況 無需也不能加() 不然 該函數在加載階段就當即運行了 此時綁定到事件上的只是函數的返回值
還有一點須要注意: 將函數丟給click事件後 它的this再也不指向當前組件
若是在函數體內涉及到this調用 記得賦值前綁好this指向 例如:
class Box extends React.Component{
constructor(){
this.sayHello = this.sayHello.bind(this)
this.state = {
name : "zhuiszhu"
}
}

sayHello(){
console.log(`hello ${this.state.name}`)
}

render(){
return <a onClick={this.sayHello}></a>
}
}

若是綁定函數時須要傳參 則讓函數的返回值爲點擊時須要執行的函數便可
例如:
{
constructor(){
this.state = {
name : "zhuiszhu"
}
}

sayHello(name){
return () => {
console.log(`hello ${name}`)
console.log(this.state.name)
}
}

render(){
return <a onClick={this.sayHello('zhuiszhu')} >打招呼</a>
}
}

數據雙向綁定
{
constructor(){
this.state = {
name :"zhuiszhu"
}

this.changename = this.changename.bind(this)
}

changename(e){
let value = e.target.value
this.setState({
name : value
})
}

render(){
return <input value={this.state.name} onChange={this.changename} />
}
}

若是無需用到數據雙向綁定 可僅在提交時獲取最新數據便可
例如:
{

sub(){
let data = {
username : this.refs.username.value,
password : this.refs.password.value,
password2 : this.refs.password2.value
}

//提交
}

render(){
return (<form onSubmit="this.sub.bind(this)">
<div>用戶名: <input type="text" placeholder="請輸入用戶名" ref="username" /></div>
<div>密碼: <input type="text" placeholder="請輸入密碼" ref="password" /></div>
<div>重複密碼: <input type="text" placeholder="請從新輸入密碼" ref="password2" /></div>
<input type="submit" value="註冊" />
</form>)
}

}

組件的props: 用於接收由父級傳遞的數據

{this.props.xxx}

父級調用子組件傳遞props時

<Child xxx="123" />
注意,若是你要傳動態數據或者數字類型或者boolean類型 則須要採用以下寫法
let yyy = "zhuiszhu"
<Child xxx={ yyy | 123 | false} />

props類型驗證:
須要給當前組件(類)上添加上靜態屬性 propTypes
例如:
es5寫法:
import PropType form "prop-types"

class Box extends React.Componnet{
....

}

Box.propTypes = {
propname : PropType.string,
propname1 : PropType.func.isRequired, //必填
...
}

es6寫法
import PropType form "prop-types"

class Box extends React.Componnet{
....
static propTypes = {
propname : PropType.string,
propname1 : PropType.func.isRequired, //必填
...
}
}

組件的生命週期函數:

三大時期:

加載期 更新期 卸載期
默認 每一個時期都有以前和以後 卸載期除外
更新期以前額外多出兩個生命週期函數

以前都是will
以後都是did

加載是mount
更新時update
卸載unmount

其中容許更新是全部生命收起函數中惟一不以component爲開頭的生命週期函數
接收父級props以前的生命週期函數是惟一以四個單詞組成的生命週期函數

加載前
componentWillMount()
加載後
componentDidMount()

組件以前接收props
componentWillReceiveProps(newProps)

容許組件更新
shouldComponentUpdate(newProps,newState)
更新前
componentWillUpdate(newProps,newState)
更新後
componentDidUpdate(oldProps,oldState)

卸載前 componentWillUnmount()