欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式

 更新時(shí)間:2022年08月08日 15:41:57   作者:神奇大叔  
這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react 數(shù)據(jù)監(jiān)聽

監(jiān)聽組件傳遞的值:

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

 監(jiān)聽組件內(nèi)部狀態(tài)的變化:

componentDidUpdate(prevProps,prevState){
?? ?參數(shù)分別為改變之前的數(shù)據(jù)狀態(tài)對(duì)象
?? ?if(prevState.屬性名!=this.state.屬性名)
?? ?{
?? ??? ?...
?? ?}
}

react事件監(jiān)聽三種寫法

方式一

在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);
? }
? // 調(diào)用該方法
? showFunc() {
? ? this.setState({
? ? ? show: false
? ? });
? }
? render() {
? ? let result = this.state.show ? this.state.title : null;
? ? return (
? ? ? <div>
? ? ? ? <button onClick={this.showFunc}>觸發(fā)</button>
? ? ? ? {result}
? ? ? </div>
? ? );
? }
}

方式二

通過箭頭函數(shù)改變this指向

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

方式三

直接使用箭頭函數(shù)改變this的指向

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

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例

    React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例

    這篇文章主要介紹了React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-02
  • react中history(push,go,replace)切換路由方法的區(qū)別及說明

    react中history(push,go,replace)切換路由方法的區(qū)別及說明

    這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React狀態(tài)提升案例介紹

    React狀態(tài)提升案例介紹

    這篇文章主要介紹了React狀態(tài)提升案例,所謂 狀態(tài)提升 就是將各個(gè)子組件的 公共state 提升到它們的父組件進(jìn)行統(tǒng)一存儲(chǔ)、處理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-04-04
  • React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)

    React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)

    本文主要介紹了React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題

    使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題

    使用redux管理數(shù)據(jù),由于Store獨(dú)立于組件,使得數(shù)據(jù)管理獨(dú)立于組件,解決了組件之間傳遞數(shù)據(jù)困難的問題,非常好用,今天重點(diǎn)給大家介紹使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題,感興趣的朋友參考下吧
    2021-06-06
  • React鼠標(biāo)多選功能的配置方法

    React鼠標(biāo)多選功能的配置方法

    本文給大家分享React鼠標(biāo)多選功能,通過導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可,操作簡(jiǎn)單方便,對(duì)React鼠標(biāo)多選相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-05-05
  • React 封裝自定義組件的操作方法

    React 封裝自定義組件的操作方法

    React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護(hù)性、更好的團(tuán)隊(duì)協(xié)作、靈活性和易于測(cè)試和調(diào)試等好處,從而提高了開發(fā)效率和質(zhì)量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下
    2023-12-12
  • webpack 2的react開發(fā)配置實(shí)例代碼

    webpack 2的react開發(fā)配置實(shí)例代碼

    本篇文章主要介紹了webpack 2的react開發(fā)配置實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 淺談React Native Flexbox布局(小結(jié))

    淺談React Native Flexbox布局(小結(jié))

    這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • React 如何使用時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳

    React 如何使用時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳

    這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開始和結(jié)束時(shí)間戳,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09

最新評(píng)論