React组件通讯

组件通讯-概念

组件状态是独立的，组件化之后涉及状态同步，需要进行组件通讯

组件的特点

• 组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据
• 在组件化过程中，通常会将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能

组件通讯意义

• 而在这个过程中，多个组件之间不可避免的要共享某些数据
• 为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通
• 这个过程就是组件通讯

props 基本使用

传递数据和接收数据的过程

• 使用组件的时候通过属性绑定数据，在组件内部通过 props 获取即可。

函数组件使用 props

// 使用组件
<Hello name="jack" age="20" />

// 定义组件 props包含{name:'jack',age:'20'}
function Hello(props) {
  return <div>接收到数据:{props.name}</div>;
}

类组件使用 props

// 使用组件
<Hello name="jack" age="20" />

// 定义组件 props包含{name:'jack',age:'20'}
class Hello extends Component {
  render() {
    return <div>接收到的数据:{this.props.age}</div>;
  }
}

props 注意事项

什么是单向数据流

• 单向数据流，是从上到下的，自顶而下的，数据流。
• 好比：河流，瀑布，只能从上往下流动，上游污染下游受影响，但是下游不能影响上游。
• 父组件传递数据给子组件，父组件更新数据子组件自动接收更新后数据，但是子组件是不能修改数据的。

props 可以传递什么数据？

• 字符串
• 数字
• 布尔
• 数组
• 对象
• 函数
• JSX （插槽）
• …任意

父传子方式

大致步骤：

• 父组件提供要传递的 state 数据
• 给子组件标签添加属性，值为 state 中的数据
• 子组件中通过 props 接收父组件中传递的数据

父组件提供要传递的 state 数据

class Parent extends React.Component {
  state = {
    money: 10000,
  };
  render() {
    return (
      <div>
        <h1>父组件：{this.state.money}</h1>
      </div>
    );
  }
}

给子组件标签添加属性，值为 state 中的数据

class Parent extends React.Component {
  state = {
    money: 10000
  }
  render() {
    return (
      <div>
        <h1>父组件：{this.state.money}</h1>
+        <Child money={this.state.money} />
      </div>
    )
  }
}

子组件中通过 props 接收父组件中传递的数据

function Child(props) {
  return (
    <div>
      <h3>子组件：{props.money}</h3>
    </div>
  );
}

子传父方式

• 父组件提供回调函数，通过 props 传递给子组件
• 子组件调用 props 中的回调函数，函数可传参
• 父组件函数的参数就是子组件传递的数据

父组件

class Parent extends React.Component {
  state = {
    money: 10000,
  };
  // 回调函数
  buyPhone = (price) => {
    this.setState({
      money: this.state.money - price,
    });
  };
  render() {
    const { money } = this.state;
    return (
      <div>
        <h1>父组件：{money}</h1>
        <Child money={money} buyPhone={this.buyPhone} />
      </div>
    );
  }
}

子组件

const Child = (props) => {
  const handleClick = () => {
    // 子组件调用父组件传递过来的回调函数
    props.buyPhone(5000);
  };
  return (
    <div>
      <h3>子组件：{props.money}</h3>
      <button onClick={handleClick}>买手机</button>
    </div>
  );
};

兄弟组件通讯

通过状态提升思想完成兄弟组件数据通讯

状态提升思想是什么？

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态和修改状态的方法
• 需要通讯的组件通过 props 接收状态和函数即可

参考代码：

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 导入两个子组件
import Jack from './Jack';
import Rose from './Rose';

// App 是父组件
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  };

  changeMsg = (msg) => {
    this.setState({ msg });
  };

  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        {/* 兄弟组件 1 */}
        <Jack changeMsg={this.changeMsg}></Jack>
        {/* 兄弟组件 2 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    );
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));

Jack.js

import React, { Component } from 'react';

export default class Jack extends Component {
  say = () => {
    // 修改数据
    this.props.changeMsg('you jump i look');
  };
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}>说</button>
      </div>
    );
  }
}

Rose.jsx

import React, { Component } from 'react';

export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    );
  }
}

context 跨级组件通讯

什么是跨级组件通讯？

• 组件间相隔多层，理解成叔侄，甚至更远的亲戚。

context 怎么去理解？

• 术语：上下文
• 理解：一个范围，只要在这个范围内，就可以跨级组件通讯。（不需要 props 层层传递）

context 使用方法

• 创建上下文

context.js

import { createContext } from 'react' // 引入创建上下文的方法
export default createContext(初始值) // 初始值会在找不到Provider提供者时生效

• 使用上下文的Provider组件作为提供者

import Context from './context'
import Child from './Child';

function Parent () {
  return (
    // Provider包裹确定上下文生效范围，value注入范围内可用的数据
      <Context.Provider value={context共享的值}>
        ....子孙组件
       </Context.Provider>
  )
}

• 使上下文的Consumer作为消费者

import Context from './context'
function Child () {
  return (
      <Context.Consumer>
      {
        value => JSX
      }
    </Context.Consumer>
  )
}

• 示例

index.jsx

import React, { Component, createContext } from 'react'
import Parent from './Parent'

// 1. 创建上下文对象
// @ts-ignore
export const MyContext = createContext()

export default class App extends Component {
  state = {
    money: 10000
  }
  updateMoney = newMoney => {
    this.setState({
      money: newMoney
    })
  }
  render() {
    return (
      // 2. Provider包裹确定上下文生效范围，value注入范围内可用的数据
      <MyContext.Provider value={{
        money: this.state.money,
        updateMoney: this.updateMoney
      }}>
        <div className="app">
          <h1>根组件：{this.state.money}</h1>
          <hr />
          <Parent />
        </div>
      </MyContext.Provider>
    )
  }
}

Parent.jsx

import Child from './Child';
const Parent = () => {
  return (
    <div className="parent">
      <h3>父组件：</h3>
      <hr />
      <Child />
    </div>
  );
};

export default Parent;

Child.jsx

import { MyContext } from './App'

const Child = () => {
  return (
    // 3. 通过Consumer来消费数据，value=>{ 这里使用数据 }
    <MyContext.Consumer>
      {(value) => (
        <div className="child">
          <h5>子组件：{value.money} <button onClick={()=>value.updateMoney(5000)}>修改money</button></h5>
        </div>
      )}
    </MyContext.Consumer>
  );
};

export default Child;

总结：

• 使用creatContext()创建一个上下文对象，包含：Provider Consumer 组件。
• 使用 Provider 包裹组件，value 属性注入状态，函数，被包裹组件下的任何组件可以使用。
• 使用 Consumer 消费 Provider 提供的数据和函数，语法{value=>使用数据和函数}