1. 前言

1. react 好久没写啥文章了
2. 最近 有人问个问题 简单写了个 demo
3. 这里再做个梳理

---

2. 是什么 what

1. 传参/通信
2. 父子组件传参
3. react-redux
4. 兄弟组件 也还没写 正好补全吧

---

3. 思路

1. 将共享状态 提升到最近的公共组件 父组件中,由父组件管理这个状态

2. 公共父组件 功能
3. 提供共享状态
4. 提供操作共享状态的方法

---

4. 布局

1. 

2. 想写计算器 有点麻烦 做个 demo 吧
3. 显示器 是个子组件 Child1
4. 下面是 是个子组件 Child2

---

5. 子组件

1. 子组件 1

        const Child1 = (props)=>{
          return <h1> 显示器:{props.count}</h1>
        }

2. 子组件 2

     const Child2 = (props)=>{
          console.log(props)
          return <button onClick={ ()=> props.increase(10)}>+1</button>
        }

---

6. 父组件

1. 核心代码

   let { Component } = React;
      // 子组件
      class Counter extends Component {
        // 提供共享状态
        state = {
          count:0
        }
        // 提供修改方法
        increase = (n = 1)=>{
          this.setState({
            count:this.state.count + n
          }) 
        }
          render(){
            return(
              <div>
                  <h1>计算器</h1>
                  <Child1 count={this.state.count}/>
                  <Child2 increase={this.increase} />
              </div>
            )
          }
        }

---

7. 后记

1. 就是 相当于 一个简单的 事件总线/event Bus

---

参考资料

父子组件传参
react-redux

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉