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实现数据监听方式的详细内容...