react组件间通信

React 开发模式是组件化开发， 所以组件间的信息传递就尤为重要，React传递数据的方式主要有3种。

1. props

import React, { Component } from 'react';

function ChildrenComponent(props) {
  return (
    <div>
      <p>{props.text}</p>
      <button onClick={() => { props.hanldeClick('Hello, parent components! '); }}>call parent component</button>
    </div>
  );
}

export default class Test extends Component {
  state = {
    text: 'Hello World! ',
  }

  hanldeClick = (text) => {
    alert(text);
  }

  render() {
    return <ChildrenComponent hanldeClick={this.hanldeClick} text={this.state.text} />;
  }
}

通过props传值只能是父组件给子组件传值，父组件如果想要获取子组件的数据，可以通过子组件调用父组件的方法来实现。

2. context

import React, { Component } from 'react';

const TextContext = React.createContext('Hello JavaScript, this is defalut word.');

function GrandsonComponent() {
  return (
    <TextContext.Consumer>
      {text => <p>{text}</p>}
    </TextContext.Consumer>
  );
}

function ChildrenComponent() {
  return (
    <div>
      <GrandsonComponent />
    </div>
  );
}

export default class Test extends Component {
  state = {
    text: 'Hello JavaScript, this is global word.',
  }

  render() {
    return (
      <div>
        <TextContext.Provider value={this.state.text}>
          <ChildrenComponent />
        </TextContext.Provider>
        <TextContext.Consumer>
          {text => <p>{text}</p>}
        </TextContext.Consumer>
      </div>
    );
  }
}

context 通过Provider提供数据，用Consumer接收数据， 不止局限于父子组件，多级子组件之间都可以传递数据，这样可以避免需要使用中间元素传递props, 但是context这个属性可能比较耗性能，所以React建议不要只是用来在多层次的组件间传递数据，而且这个数据必须要有复用的可能。

3. redux之类的第三方库
   使用redux可以将整个应用的所有数据都管理在一棵store树上面，哪个组件需要使用只要connect相应的数据即可。不过需要注意的是， 使用redux进行状态管理之后尽量不要再使用state去渲染页面，不然这样容易造成数据的混乱。

转载于:https://www.jianshu.com/p/036eac79d344