zoukankan      html  css  js  c++  java
  • 组件通信

    组件间通信

    父子组件间通信

    这种情况下很简单,就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁。

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    
    class GroceryList extends Component {
      handleClick(i) {
        console.log('You clicked: ' + this.props.items[i]);
      }
    
      render() {
        return (
          <div>
            {this.props.items.map((item, i) => {
              return (
                <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
              );
            })}
          </div>
        );
      }
    }
    
    render(
      <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
    );
    

    div 可以看作一个子组件,指定它的 onClick 事件调用父组件的方法。

    父组件访问子组件?用 refs

    非父子组件间的通信

    使用全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI。

    这种模式在复杂的系统里面可能会变得难以维护,所以看个人权衡是否将组件封装到大的组件,甚至整个页面或者应用就封装到一个组件。

    一般来说,对于比较复杂的应用,推荐使用类似 Flux 这种单项数据流架构,

  • 相关阅读:
    mysql 库,表,数据操作
    mysql 初识数据库
    MySQL 索引 视图 触发器 存储过程 函数
    MySQL 事物和数据库锁
    MySQL 约束和数据库设计
    MySQL 创建千万集数据
    MySQL 各种引擎
    求1,1,2,3,5,8,13 斐波那契数列第N个数的值
    WEB前端研发工程师编程能力成长之路(1)
    XML DOM
  • 原文地址:https://www.cnblogs.com/Annely/p/10454241.html
Copyright © 2011-2022 走看看