react實現數據監聽方式是什么

本文小編為大家詳細介紹“react實現數據監聽方式是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“react實現數據監聽方式是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

react 數據監聽

監聽組件傳遞的值：

 componentWillReceiveProps(newProps)
 {
     參數為給組件傳遞的參數
 }

 監聽組件內部狀態的變化：

componentDidUpdate(prevProps,prevState){
    參數分別為改變之前的數據狀態對象
    if(prevState.屬性名!=this.state.屬性名)
    {
        ...
    }
}

react事件監聽三種寫法

方式一

在constructor中使用bind綁定，改變this的指向

import React, { Component } from 'react';
 
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
    // 寫法一：事件綁定改變this指向
    this.showFunc = this.showFunc.bind(this);
  }
  // 調用該方法
  showFunc() {
    this.setState({
      show: false
    });
  }
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={this.showFunc}>觸發</button>
        {result}
      </div>
    );
  }
}

方式二

通過箭頭函數改變this指向

import React, { Component } from 'react';
 
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
  }
  // 第二種，通過箭頭函數改變this指向
  showFunc = () => {
    this.setState({
      show: false
    });
  };
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={this.showFunc}>觸發</button>
        {result}
      </div>
    );
  }
}

方式三

直接使用箭頭函數改變this的指向

import React, { Component } from 'react';
 
export default class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true,
      title: '大西瓜'
    };
  }
  // 調用該方法
  showFunc() {
    this.setState({
      show: false
    });
  }
  render() {
    let result = this.state.show ? this.state.title : null;
    return (
      <div>
        <button onClick={() => this.showFunc()}>觸發</button>
        {result}
      </div>
    );
  }
}

讀到這里，這篇“react實現數據監聽方式是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。