父组件向子组件通信
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>
)
}
}
注意:
- 如果父组件设置了context,那么它的子组件都可以直接访问到里面的内容,它就像这个组件为根的子树的全局变量。
- 父组件可以通过 getChildContext 方法返回一个对象,这个对象就是子树的 context,提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。
- 任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态,然后可以通过 this.context 访问到那些状态。
Redux
这里就不多说了