React入門系列 - 7. 事件觸發與組件通信

1. 事件觸發

React採用跟原生相同名字駝峯寫法的props來定義觸發類型。 好比onclick在React中使用onClick來定義觸發的事件。

<div 
    onClick={(e)=>{
        console.log('onclick')
        console.log(e)
    }}
>點擊觸發事件</div>
複製代碼

當用戶點擊以後，瀏覽器會在控制檯輸出

onclick
event:{}
複製代碼

React爲事件響應作了處理，在全部的瀏覽器中，event是統一的、擁有一致性。

若是你很是須要使用原生對象，那麼能夠經過event.nativeEvent來訪問瀏覽器原生的事件方法。

在React中,綁定事件有不少種方式，可是我推薦使用=>箭頭方法直接指定事件處理。這種方式集合衆家所長。

2. 組件間通信

組件通信能夠用React的方式，也能夠採起Redux數據驅動通信的方式來進行。咱們來簡單的講述一下React的實現。

2.1 父向子通信

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <div>{this.props.text}</div>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }

    render () {
        return <div> <Subchildren text={this.state.count}/> <button onClick={this.handleAdd}>喜加1</button> </div> } } 複製代碼

這個時候，你點擊按鈕 喜加1 就會發現 子組件的內容會隨着父組件中state.count的值變化而變化。

這是一種數據流向通信。由於只須要向子組件傳遞消息便可。

2.2 子向父通信

React中並無像Vue同樣的監聽子組件$on、$emmit的功能，可是不妨礙咱們將事件傳入給子組件，由子組件經過事件將信息遞交回父組件。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.props.onClick(0)
                }
            }
        >重置爲0</button>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    
    handlePostMessage = (count) => {
        this.setState({count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
複製代碼

點擊重置爲0子組件並無去作重置操做，而是委託給父組件傳遞下來的事件進行操做。這樣父組件就知道了子組件想要將數據修改成0了。

2.3 兄弟組件通信

兄弟組件通信其實就是：父子組件通信+子父組件通信的混合體。

先經過子向父通信，父組件接收到數據以後再寫入到兄弟組件上去。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.props.onClick(100)
                }
            }
        >重置爲0</button>
        </>
    }
}

class Subchildren2 extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0,
        count2:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    
    handlePostMessage = (count) => {
        this.setState({count2:count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <Subchildren2 text={this.state.count2} />
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
複製代碼

點擊重置爲0，你會發現Subchildren2組件顯示數據的值爲100。這樣，兄弟組件就能相互通信了。他們是基於父組件進行的。

2.4 跨組件通信

2.4.1 發佈訂閱模式

跨組件通信，也就是多個組件在不一樣的容器內組成，可是又相互有數據關係依賴這樣的狀況下，能夠再頂層本身設計一個發佈/訂閱的方法。

這裏不過多闡述。

2.4.2 this.context

這個方法其實就是兄弟組件通信的原理。由於React會從root層註冊一個context,而每一個組件都會將context註冊進來。

也就是說，全部的組件全局依賴一個頂層root的 context`。

redux也是基於這個模式設計的。

import React from 'react'

class Subchildren extends React.Component{
    render () {
        return <> <div>{this.props.text}</div>
        <button
            onClick={()=>{
                    this.context.handleAdd()
                }
            }
        >加1加1加1</button>
        </>
    }
}

class Subchildren2 extends React.Component{
    render () {
        return <> <div>{this.context.value}</div>
        </>
    }
}


export default FatherChildren extends React.Component{
    static state = {
        count:0,
        count2:0
    }
    
    handleAdd = () => {
        this.setState({count:this.state.count++})
    }
    getChildContext() {
        return {
            value: this.state.count,
            handleAdd: this.handleAdd
        }
    }
    handlePostMessage = (count) => {
        this.setState({count2:count})
    }

    render () {
        return <div>
            <Subchildren
                onClick={this.handlePostMessage}
                text={this.state.count}/>
            <Subchildren2 text={this.state.count2} />
            <button
                onClick={this.handleAdd}
            >喜加1</button>
        </div>
    }
}
複製代碼

主要須要注意父組件的getChildContext,與子組件中的this.context。