React: 关于React通信方式

父组件向子组件通信

React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息

父组件

import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Child from "views/child"
export default class Parent extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Child name="飞旋的留恋"></Child>
            </div>
        )
    }
}

复制代码

子组件

import React, {PureComponent} from "react"

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Child extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        console.log(this.props)
        return (
            <div>{this.props.name}</div>
        )
    }
}复制代码

子组件向父组件通信

利用回调函数 利用自定义事件机制,即子组件通过调用父组件传递到子组件的方法向父组件传递消息的

父组件

import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Child from "views/child"
export default class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ""
        }
    }
    sayname = (name) => {
        this.setState({
            name: name
        })
    }
    render() {
        return (
            <div>
                <Child sayname ={this.sayname} name={this.state.name}></Child>
            </div>
        )
    }
}复制代码

子组件

import React, {PureComponent} from "react"

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class Child extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        console.log(this.props)
        this.props.sayname("飞旋的留恋")
    }
    render() {
        return (
            <div>{this.props.name}</div>
        )
    }
}复制代码

跨级组件通信（Context 通信）

context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性,缩短了父组件到子组件的属性传递路径,就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。但是这种机制对于前端应用状态管理来说是很有帮助的，因为毕竟很多状态都会在组件之间进行共享，context会给我们带来很大的方便

父组件

import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link,withRouter} from 'react-router-dom'
import PropTypes from 'prop-types'
import User from "views/user"

class Home extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            color: "red"
        }
    }
    componentDidMount() {
    }
    static  childContextTypes = {
        color:PropTypes.string,
        changeColor:PropTypes.func
    }
    getChildContext() {
        return {
            color:this.state.color,
            changeColor: this.changeColor
        }
    }
    changeColor = () => {
       this.setState({
           color: "blue"
       })
    }
    render() {
        return (
            <div>
                <User></User>
            </div>
        )
    }
}

export default Home;复制代码

子组件

import React, {PureComponent} from "react"
import PropTypes from 'prop-types'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'

export default class User extends React.Component {
    constructor() {
        super()
    }
    static contextTypes={
        color: PropTypes.string,
        changeColor: PropTypes.func
    }
    render() {
        console.log(this.context)
        return (
            <div style={{color:this.context.color}}>
                user
                <button onClick={this.context.changeColor}>改变color</button>
            </div>

        )
    }
}

复制代码

注意 ：

1. 如果父组件设置了context，那么它的子组件都可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。  
2. 父组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。 
3.  任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态，然后可以通过 this.context 访问到那些状态。

Redux

这里就不多说了

juejin.im/post/5cad96…