React: 关于React通信方式

栏目: IOS · Android · 发布时间: 4年前

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

父组件向子组件通信

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>
        )
    }
}复制代码

React: 关于React通信方式

子组件向父组件通信

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

父组件

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>
        )
    }
}复制代码

React: 关于React通信方式

跨级组件通信(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>

        )
    }
}

复制代码

React: 关于React通信方式

注意

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

Redux

这里就不多说了

juejin.im/post/5cad96…


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

性能之巅

性能之巅

Brendan Gregg / 徐章宁、吴寒思、陈磊 / 电子工业出版社 / 2015-8-15 / 128

《性能之巅:洞悉系统、企业与云计算》基于Linux 和Solaris 系统阐述了适用于所有系统的性能理论和方法,Brendan Gregg 将业界普遍承认的性能方法、工具和指标收集于本书之中。阅读本书,你能洞悉系统运作的方式,学习到分析和提高系统与应用程序性能的方法,这些性能方法同样适用于大型企业与云计算这类最为复杂的环境的性能分析与调优。一起来看看 《性能之巅》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具