组件的生命周期

生命周期图谱

组件的生命周期三个大阶段

挂载阶段

constructor ==> render ==> componentDidMount

constructor: 创建组件时，最先执行 . 一般用于: 1. 初始化 state 2. 为事件处理程序绑定 this

render: 每次组件渲染都会触发 注意: 不能在 render 中调用 setState()

componentDidMount: 组件挂载(完成 DOM)渲染后 一般用于: 1. 发送网络请求 2. DOM 操作 (只要是组件以上来就要做的事情,都应该写在挂载成功的回调中)

更新阶段

render ==> componentDidUpdate

setState() , forceUpdate(), 组件接收到新的 props 都会导致更新

componentDidUpdate: 组件更新(完成 DOM 渲染)后

1 发送网络请求 2 DOM 操作 注意：如果要 setState() 必须放在一个 if 条件中

卸载阶段

componentWillUnmount

**componentWillUnmount:**组件卸载(从页面中消失） 执行清理操作

旧版 react 生命周期(了解)

componentWillMount

componentWillUpdate,

componentWillReceiveProps

以上生命周期钩子函数在 React v16.3 后废弃

组件通讯

react 组件通讯有三种方式.分别是 props, context, pubsub

props

单向数据流 父传子

context

爷孙嵌套 传递

**实现一: **

• 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件

  const { Provider, Consumer } = React.createContext("默认值");
  // 注意: 默认值是在没有提供provider的时候生效,而不是没有写value的时候生效

• 使用 Provider 组件作为父节点, 使用 value 属性定义要传递的值

  <Provider value={要传递的值}>
    <div className="App">
      <Child1 />
    </div>
  </Provider>

• 使用 Consumer 组件接收数据

  <Consumer>
    {(data) => <span>data参数表示接收到的数据 -- {data}</span>}{" "}
  </Consumer>

**实现二: **

export default class Demo extends Component {
  // 给要使用的Context的Demo类,添加静态contextType属性, 并赋值为context对象
  // 那么在Demo的实例对象上context属性中就可以获取到需要的值
  static contextType = MyContext;
  render() {
    // return <MyContext.Consumer>{data => <p>{data}</p>}</MyContext.Consumer>
    return <div>{this.context}</div>;
  }
}

**注意:**不要使用 context 随意传递数据,一般用于传递"全局"数据, 比如当前认证的用户、主题或首选语言

pubsub

发布订阅机制

publish subscribe

pubsubjs 是一个用 JavaScript 编写的库。

利用订阅发布模式, 当一个组件的状态发生了变化，可以让其他多个组件更新这些变化.

实现:

• 安装

  在项目根目录下: npm install pubsub-js / yarn add pubsub-js

• 导入

  import PubSub from "pubsub-js"; // 导入的PubSub是一个对象.提供了发布/订阅的功能

• pubsubjs 提供的方法

  //  一个用于接收订阅信息的函数(接收外部传入的数据的函数)
  // PubSub.subscribe() 用于订阅信息(相当于监听某个组件内部数据变化)
  // TOPIC ==> 订阅话题.推荐使用常量
  // 第二个参数: 用于接收数据的函数
  // token 这一次订阅的令牌(用于取消订阅)
  var token = PubSub.subscribe("car", function (msg, data) {
    console.log(msg, data);
  });
  
  // 以异步的形式的发布一个话题
  // TOPIC 通过这个话题,找到订阅这个话题的订阅者
  // 'hello world!' 具体要传递的数据
  PubSub.publish("car", "hello world!");
  // 发布的同步使用方法
  // 慎用!!!! 因为会阻塞发布者的代码执行
  PubSub.publishSync(TOPIC, "hello world!");
  
  // 取消指定的订阅
  PubSub.unsubscribe(token);
  
  // 取消某个话题的所有订阅
  PubSub.unsubscribe(TOPIC);
  
  // 取消所有订阅
  PubSub.clearAllSubscriptions();