React/组件通讯

组件通讯能够分为如下几种：

• 父组件向子组件通讯

• 子组件向父组件通讯

• 跨级组件的通讯及context

• 没有嵌套关系的组件通讯

 

父组件向子组件通讯

 

父组件经过props向子组件传递须要的信息。

 

子组件向父组件通讯

 

子组件调用porp中传来的父组件的方法达到通讯的目的

 

跨级组件的通讯

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

 

// Context 能够让咱们无须明确地传遍每个组件，就能将值深刻传递进组件树。
// 为当前的 theme 建立一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给如下的组件树。
    // 不管多深，任何组件都能读取这个值。
    // 在这个例子中，咱们将 “dark” 做为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件不再必指明往下传递 theme 了。
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，而后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

　　

没有嵌套关系的组件通讯

使用events库，收信方在componentDidMount里面注册监听事件，在componentUnMount里销毁该事件。发信方则使用emit方法便可发出通信消息。（切记，有注册，就得有销毁）

// 使用示例
class List1 extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            text: 'list1'
        }
    }
    render() {
        return (
            <div>{ this.state.text }</div>
        )
    }
    componentDidMount() {
        this.eventEmitter = ee.addListener('changeMessage', (msg) => {
            this.setState({
                text: msg
            })
        })
    }
    componentWillUnmount() {
        ee.removeListener(this.eventEmitter)
    }
}
class List2 extends React.Component{
    handleClick(message) {
        ee.emit('changeMessage', message)
    }
    render() {
        return (
            <button onClick={ this.handleClick.bind(this, '哈哈')}>点点点</button>
        )
    }
}