react如何实现数据监听方式

react 数据监听 监听组件传递的值:componentWillReceiveProps(newProps){参数为给组件传递的参数} 监听组件内部状态的变

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渲染机制超详细讲解

react后台系统最佳实践示例详解

react中的双向绑定你真的了解吗

React组件的应用介绍

React组件通信如何实现方式详解