react 组件之间有哪些通信方法？

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

前言

在使用vue，react框架开发时，最常见的使用也就是组件之间的通信，下面将介绍组件之间的通信，怎么使用。希望对大家有帮助，欢迎讨论指出问题！

1.props传递

通过props传递数据/函数数据，一层一层传递

一般数据：父组件传递给子组件 --> 子组件读取数据

函数数据：父组件传递给子组件 -->子组件回调函数，传递参数给父组件

1.1 父传子通信

使用 props通信

例子如下：

父组件操作：

export default class App extends Component {
    constructor(props) {
        this.state = {
            comments: [ { name: 'Jock', content: "非常好" }]
        }
    }
    render() {
        return <CommentList comments={this.state.comments}/>
    }
}

子组件操作：

export default class CommentList extends Component {
    render() {
        let { comments } = this.props;
        return <ul>
                {comments.map((item, index) => {
                 return <p>{comment.name}说：{comment.content}</p>
                })}
              </ul>
    }

 

1.2 子传父通信

使用 props 回调

例子如下： 父组件操作：

export default class App extends Component {
  constructor(props) {
        this.state = {
            comments: [ { name: 'Jock', content: "非常好" }]
        }
   }
   DeleteComment = (index) => {
        let { comments } = this.state;
        comments.splice(index, 1);
        this.setState({ comments })
   }
   render() {
   return <CommentList comments={this.state.comments} 
            DeleteComment={this.DeleteComment}/>
}

子组件操作：

export default class CommentList extends Component {
   handleDelete = (index) => {
        return this.props.DeleteComment(index);
    }
    render() {
        let { comments, DeleteComment } = this.props;
         return (
         <ul>{comments.map((item, index) => {
             return <p  onClick={this.handleDelete(index)}>哈哈哈哈</p>
             })}
         </ul>
    }
  }

1.3孙子之间通信（跨级组件传值）

跨级组件通信，就是父组件向子组件的子组件通信，向更深层的子组件通信

• 方法1:层层组件传递props

例如:从app 传递到list ，list再传递到item的方法

• 方法2:使用context（官方不建议使用，会导致组件的复用性很差)

 

1.4 兄弟通信（非嵌套组件传值）

共同的数据就放在共同父组件上，特有的数据放在自己内部（state）

• 方法1:查找出共同的父组件，有search传递给父组件app，再父组件传递给main

 

2.消息订阅（subscribe）-发布（publish）机制

发布---订阅模式又叫观察者模式：

它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，

当一个对象发生改变时，所有依赖于它的对象都将得到通知。

 

发布/订阅模式，通过向事件对象上添加监听器和触发事件来实现组件间通信。

工具库：PubSubJs

下载：npm i pubsub-js -save

使用：

import PubSub from 'pubsub-js'
PubSub.publish('search', 'hello world!');//发布消息
PubSub.subscribe('search', (msg, data) => {})//订阅消息，变化时可做操作了

例子：

export default class Search extends Component {
    handleSearch = () => {//发布消息‘search’
       PubSub.publish('search', this.serachinput.value)
    }
    render() {
        return (
         <div className="search">
          <input type="text" ref={input => this.serachinput = input}/>
          <button onClick={this.handleSearch}>search</button>
         </div>
        )
    }
}

订阅消息，绑定监听(search)

例子：

export default class extends Component {
  this.state = {users: null}
  componentDidMount() {
    PubSub.subscribe('search', (msg, data) => {
     let searchname = data;
     let respUrl=`https://api.github.com/search/users？q=${searchname}`
     axios.get(respUrl).then(res => {
       var result = res.data.items;
       result = result.map(item => {return {name: item.login} })
       this.setState({users: result})
     })
 }
  render() {
   return <div>{users.map((item, index) => {
                return <p key={index}>{item.name}</p>
                })}
          </div>
    }
 }

 

3.redux使用

后期详细讲解