如何将React的数据监听改写为长尾？

本文共计485个文字，预计阅读时间需要2分钟。

目录 + React + 数据监听 + React事件监听三种写法 + 方式一 + 方式二 + 方式三 + React数据监听 + 监听组件递归传递的值： componentWillReceiveProps(newProps) { 参数为给组件递归传递的参数 } + 监听组件内部状态

目录

• 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>     );   } }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。