表單

• 通過三種當時獲取表單的數據
• 包含表單的組件分類
• 受控組件：表單項輸入數據能夠自動收集成狀態，案例中的age字段
• 非受控組件：需要時才手動讀取表單輸入框中的數據，案例中的username和password字段
• 大部分推薦使用受控組件，因為其更符合react的思想，不需要進行DOM的操作，而且react也不推薦過多的使用refs

class Login extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            age:18
        }
 


        this.handleSubmit = this.handleSubmit.bind(this)
        this.handleChange = this.handleChange.bind(this)
    }

    handleSubmit(event){
        event.preventDefault();
        // 通過舊的refs獲取username
        const username = this.refs.username.value
        // 通過新的refs獲取username
        const pwd =
 
 this.pwd.value
        // 通過狀態獲取age
        const {age} = this.state

        console.log(username,pwd,age);
    }

    handleChange(event){
        // 由於原生的onchange事件並不是真的在change時觸發事件，而是在失去焦點的時候才會觸發change事件
        // react在onChange事件做了優化，會在change的時候就觸發事件
        const age = event.target.value
        this
 
.setState({
            age
        })

    }

    render(){
        return (
            <form action="" method="get" onSubmit={this.handleSubmit}>
            <p>
            username: <input type="text" ref="username" />
            </p>
            <p>
            password: <input type="password" ref={input => this.pwd = input} />
            </p>
            <p>
            age: <input type="number" value={this.state.age} onChange={this.handleChange} />
            </p>
            <p>
            <input type="submit" value="login" />
            </p>
            </form>
        )
    }
}


ReactDOM.render(<Login/>,document.getElementById(‘app‘))

組件生命周期

• 生命周期理解
• 就是一個組件對象從創建到結束的一個過程，在這個過程組件對象會經歷特定的階段，每個特定的階段都會對應一個相應的勾子函數
• 勾子函數本質就是生命周期的回調函數，在組件的生命周期特定時刻進行回調
• React.Component已經定義好了一系列的勾子函數，若是需要在特定的時間節點做一些事情，可以重寫特定的勾子函數，在勾子中實現自己的邏輯功能
• 生命周期
• 組件有三個生命周期狀態
  • Mount：插入真實DOM，其對應的勾子函數為：componentWillMount()和componentDidMount()
  • Update：重新渲染，其對應的勾子函數為：componentWillUpdate()和componentDidMount()
  • Unmount：銷毀真實DOM，其對應的勾子函數為：componentWillUnmount()
• 生命周期流程
• 首次初始化渲染顯示：ReactDOM.render()
  • constructor()：創建對象初始化state
  • componentWillMount()：將要插入回調
  • render()：插入虛擬DOM回調
  • componentDidMount()：插入完成回調
• 每次更新state：this.setState()
  • componentWillUpdate()：將要更新回調
  • render()：更新、重新渲染
  • componentDidUpdate()：更新完成回調
• 移除組件:ReactDOM.unmountComponentAtNode()
  • componentWillUnmount()：組件將要銷毀時的回調
• 常用勾子
  • render()：初始化渲染和更新都會調用
  • componentDidMount()：開啟監聽、ajax請求等
  • componentWillUnmount()：做一些收尾的工作，清除定時器等
• 案例
• 實現一個組件
• 讓文本實現顯示/隱藏動畫
• 切換時間2s
• 點擊按鈕 從界面中移除

// 定義組件 
class Life extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            opacity:1,
            color:`#f0f`
        }

        this.cancelTime = this.cancelTime.bind(this)
    }

    componentDidMount(){
        // 定時器作用域問題
        // 1. 通過bind解決
        // 2. 箭頭函數
        this.timer = setInterval( function() {
            let {opacity} = this.state
            opacity -= 0.1

            //不能使用opacity === 0
            // 因為js的計算存在誤差
            if(opacity <= 0){
                opacity = 1
            }
            this.setState({
                opacity
            })

        }.bind(this),200)

    }

    cancelTime(){
        // 移除組件
        ReactDOM.unmountComponentAtNode(document.getElementById(‘app‘))

    }

    componentWillUnmount(){
        // 銷毀組件之前的勾子
        // 定時器必須清除，不然會造成內存泄露的問題
        clearInterval(this.timer)

    }

    render(){
        const {msg} = this.props
        const {...style} = this.state

        return (
            <div>
            <h1 style={style} >{msg}</h1>
            <button onClick={this.cancelTime}>取消定時器</button>
            </div>
        )
    }
}

// 渲染組件
ReactDOM.render(<Life msg="生命周期演示"/>,document.getElementById(‘app‘))

• 問題

• 樣式綁定，首先將樣式存在state中，在render中將樣式幫上

  //方式2：綁定樣式
  // 因為綁定樣式是在js中使用，所以樣式是使用對象的方式傳入
  const {opacity,color} = this.state
  //這裏需要使用雙花括號，因為是在js中綁定樣式，樣式在一個對象中以鍵值對的形式存在
  <h1 style={{opacity,color}} >{msg}</h1>
  
  //方式2：綁定樣式
  // 使用...將樣式以對象的方式取出，可以直接綁定至樣式上 
  const {...style} = this.state
  <h1 style={style} >{msg}</h1>

• 定時器必須清除，不然會造成內存泄露的問題

react-生命周期