1. 父组件给子组件传值【props】

父组件传给子组件，子组件通过this.props获取父组件传递过来的数据

<Person personData={personData} addPerson={addPerson} />

2. 子组件修改父组件的值

父组件可以把修改值的方法传递给子组件，子组件可以调用父组件的方法，然后修改父组件的值。

class App extends Component {
   state = {
      count:10
    }
    add = () =>{
      this.setState(state =>({ count: state.count + 1}))}
  render() {
    const { count} = this.state;
    return (
      <div className='parent'>
        <h2>我是APP组件</h2>
        <h3>count当前的值是：{count}</h3>
        <button type="button" onClick={this.add}>+</button>
        <hr/>
        <Child add={this.add} count={count}/>  
      </div>
    );
  }
}
class Child extends Component {
  render() {
    return (
      <div className='child'>
        <h2>我是Child组件</h2>
         <h3>count当前的值是：{this.props.count}</h3>
         <button onClick={this.props.add}>修改父组件的值</button>
      </div>
    );
  }
}
export default App;

3. createContext

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信。

3.1 使用方式

使用方式：

//创建context容器对象
const XxxContext = React.createContext()  
//渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
<xxxContext.Provider value={数据}>
        子组件
</xxxContext.Provider>

3.2 类组件后代组件读取数据

static contextType = xxxContext // 声明接收context

this.context // 读取context中的value数据

import React, { Component, createContext  } from 'react';
import './components/style.css'
const myContext = createContext()
const { Provider} = myContext
class App extends Component {
 state = {
    name :'Iric',
    age:23
  }
render() {
  const {name, age} = this.state;
  return (
    <div className='parent'>
      <h2>我是APP组件</h2>
      <hr/>
        <Provider value={{name, age}}>
            <Child />
        </Provider>     
    </div>
  );
}
}
class Child extends Component {
render() {
  return (
    <div className='child'>
      <h2>我是Child组件</h2>
      <hr/>
      <Son/>
    </div>
  );
}
}
class Son extends Component {
static contextType = myContext
render() {
  console.log(this.context)
  const {name, age} = this.context
  return (
    <div className='son'>
      <h2>我是Son组件</h2>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
    </div>
  );
}
}
export default App;

3.3 函数组件后代组件读取数据

<xxxContext.Consumer>
  {
    value => ( // value就是context中的value数据
      要显示的内容
    )
  }
</xxxContext.Consumer>

import React, { Component, createContext  } from 'react';
import './components/style.css'
const myContext = createContext()
const { Provider,Consumer} = myContext
class App extends Component {
 state = {
    name :'Iric',
    age:23
  }
render() {
  const {name, age} = this.state;
  return (
    <div className='parent'>
      <h2>我是APP组件</h2>
      <hr/>
        <Provider value={{name, age}}>
            <Child />
        </Provider>     
    </div>
  );
}
}
class Child extends Component {
render() {
  return (
    <div className='child'>
      <h2>我是Child组件</h2>
      <hr/>
      <Son/>
    </div>
  );
}
}
function Son(){
return  <div className='son'>
  <h2>我是Son组件</h2>
  <Consumer>
    {
      value => {
        console.log(value); //{name: 'Iric', age: 23}
        return <p>从A组件传过来的名字是：{value.name}, 年龄是：{value.age}</p>
      }
    }
  </Consumer>
</div>
}
export default App;

4. 消息的发布订阅pubsub

使用Pubsub.publish(‘saveEditScoreCard’,data)接收两个参数，第一个是要发送的消息，让订阅，第二个是传输的数据。 ```javascript // AddButton组件 import React from ‘react’ import PubSub from “pubsub-js” class AddButton extends React.Component { constructor(props) {

  super(props);
  this.state = {  };

} add = () => {

  //发布消息
  PubSub.publish("addObj",{name:'haha', age:15})

} render() {

  return (
      <button onClick={this.add}>添加数据</button>
  );

} }

export default AddButton;

// List组件 import React from ‘react’; import PubSub from “pubsub-js” class List extends React.Component { constructor(props) { super(props); this.state = {
list:[ {name:”iric”, age:23}, {name:”lisa”, age:25}, {name:”monke”, age:17}, {name:”momoko”, age:33}, ] }; } componentDidMount(){ //订阅消息 this.token = PubSub.subscribe(“addObj”, (msg,data)=> { console.log(msg,data) const res = this.state.list; this.setState({ list:[data,…res] }) }) } componentWillUnmount(){ // 取消订阅 PubSub.unsubscribe(token) } render() { const {list} = this.state; return (

{item.name}

); } }

export default List;

<a name="su7Dn"></a>
# 5. React-redux
react-redux是运用Provider将组件和store对接，使在Provider里的所有组件都能共享store里的数据，还要使用connect将组件和react连接。
```javascript
const mapStateToprops = (state) => {
  console.log(state)
  return {
    sum: state
  }
}
const mapDispatchToProps = dispatch => {
  return {
    increment: data => dispatch(incremnet(data)),
    decrement : data => dispatch(decrement(data))
  }
}
//使用connect创建并暴露一个CountContainer容器组件
export default connect(mapStateToprops,mapDispatchToProps)(CountContainer)

6. 组件间的关系

父子组件
兄弟组件（非嵌套组件）
祖孙组件（跨级组件）

7. 几种通信方式
1.props：
(1).children props
(2).render props
2.消息订阅-发布：
pubs-sub、event等等
3.集中式管理：
redux、dva等等
4.conText:
生产者-消费者模式

8. 比较好的搭配方式：
父子组件：props
兄弟组件：消息订阅-发布、集中式管理
祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

13. 组件通信方式