react父子、子父、兄弟通信方法

父子通信

1. 父组件定义一个状态数据
2. 调用子组件的时候，将数据通过属性的方式传给子组件
3. 子组件通过this.props的方式接收
4. 但是不能对传递过来的属性进行修改

父组件

export default class Todos extends Component {
    state = {
        list:["a","b","c"]
    }
    render() {
        let {list} = this.state;
        return (
            <div>
                <List list={list}/>
            </div>
        )
    }
}

子组件

export default class List extends Component {
    render() {
        let {list} = this.props;
        return (
            <ul>
                {
                    list.map((item,index)=>{
                    return <li key={index}>{item}</li> 
                    })
                }
            </ul>
        )
    }
}

子父通信

1. 父组件需要定义一个状态
2. 父组件需要定义一个修改自身状态的方法
3. 在调用子组件的时候通过属性将方法传给子组件
4. 子组件通过this.props.xxx触发父组件的修改状态的方法

父组件

export default class Todos extends Component {
    state = {
        list:["a","b","c"],
    }

    add = value =>{
        this.setState({
            list:[...this.state.list,value]
        })
    }

    render() {
        let {list} = this.state;
        return (
            <div>
                <Input add={this.add}/>
                <List list={list}/>
            </div>
        )
    }
}

子组件

export default class Input extends Component {

    handleKeyUp = e => {
        if(e.keyCode === 13){
            this.props.add(e.target.value)
            e.target.value = ""
        }
    }

    render() {
        return (
            <input onKeyUp={this.handleKeyUp}/>
        )
    }
}

兄弟组件

1. 通过EventHub的机制.on绑定事件，通过trigger进行事件触发
2. 在兄弟一组件中创建更改自身状态的方法
3. 在componentDidMunt钩子函数中通过EventHub.on(‘绑定第事件’,触发的方法)监听绑定事件
4. 在兄弟二组建中通过EventHub.trigger(“触发的绑定事件”,兄弟一更改状态方法的形参)触发绑定事件（订阅过程）
5. 【注】兄弟事件都需要引入event_hub.js文件

兄组件

export default class One extends Component {
    state = {
        color:"red"
    }

    setColor = (color)=>{
        this.setState({
            color
        })
    }

    componentDidMount(){
        //需要监听事件
        EventHub.on("change",this.setColor)
    }


    render() {
        return (
            <div>
                <p style={{background:this.state.color}}>One</p>
            </div>
        )
    }
}

弟组件

export default class Two extends Component {

    randomHexColor() { //随机生成十六进制颜色
        return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
    }

    changeColor = ()=>{
        //需要让One组件的change事件进行触发（订阅过程）
        EventHub.trigger("change",this.randomHexColor())
    }
    render() {
        return (
            <div>
                Two -- <button onClick={this.changeColor}>点击变色</button>
            </div>
        )
    }
}

加粗样式event_hub.js文件

let callbackLists = {}
let eventHub = {
    trigger(eventName, data) {
        let callbackList = callbackLists[eventName]
        if (!callbackList) {
            return
        }
        for (let i = 0; i < callbackList.length; i++) {
            callbackList[i](data)
        }
    },
    on(eventName, callback) {
        if (!callbackLists[eventName]) {
            callbackLists[eventName] = [] // {change:[callback,callback2]}
        }
        callbackLists[eventName].push(callback)
    }
}

export default eventHub