react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)方式
更新時(shí)間：2022年08月08日 15:41:57 作者：神奇大叔
這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react 數(shù)據(jù)監(jiān)聽(tīng)
監(jiān)聽(tīng)組件傳遞的值：
?componentWillReceiveProps(newProps)
?{
??? ?參數(shù)為給組件傳遞的參數(shù)
?}監(jiān)聽(tīng)組件內(nèi)部狀態(tài)的變化：
componentDidUpdate(prevProps,prevState){
?? ?參數(shù)分別為改變之前的數(shù)據(jù)狀態(tài)對(duì)象
?? ?if(prevState.屬性名!=this.state.屬性名)
?? ?{
?? ??? ?...
?? ?}
}react事件監(jiān)聽(tīng)三種寫(xiě)法
方式一
在constructor中使用bind綁定，改變this的指向
import React, { Component } from 'react';
?
export default class Group extends Component {
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? show: true,
? ? ? title: '大西瓜'
? ? };
? ? // 寫(xiě)法一：事件綁定改變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>
? ? );
? }
}方式二
通過(guò)箭頭函數(shù)改變this指向
import React, { Component } from 'react';
?
export default class Group extends Component {
? constructor(props) {
? ? super(props);
? ? this.state = {
? ? ? show: true,
? ? ? title: '大西瓜'
? ? };
? }
? // 第二種，通過(guò)箭頭函數(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通過(guò)redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例
這篇文章主要介紹了React通過(guò)redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
react中history(push,go,replace)切換路由方法的區(qū)別及說(shuō)明
這篇文章主要介紹了react中history(push,go,replace)切換路由方法的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React狀態(tài)提升案例，所謂 狀態(tài)提升 就是將各個(gè)子組件的 公共state 提升到它們的父組件進(jìn)行統(tǒng)一存儲(chǔ)、處理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-04-04
React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問(wèn)題
使用redux管理數(shù)據(jù)，由于Store獨(dú)立于組件，使得數(shù)據(jù)管理獨(dú)立于組件，解決了組件之間傳遞數(shù)據(jù)困難的問(wèn)題，非常好用，今天重點(diǎn)給大家介紹使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問(wèn)題，感興趣的朋友參考下吧2021-06-06
本文給大家分享React鼠標(biāo)多選功能，通過(guò)導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可，操作簡(jiǎn)單方便,對(duì)React鼠標(biāo)多選相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護(hù)性、更好的團(tuán)隊(duì)協(xié)作、靈活性和易于測(cè)試和調(diào)試等好處,從而提高了開(kāi)發(fā)效率和質(zhì)量,這篇文章主要介紹了React 封裝自定義組件,需要的朋友可以參考下2023-12-12
webpack 2的react開(kāi)發(fā)配置實(shí)例代碼
本篇文章主要介紹了webpack 2的react開(kāi)發(fā)配置實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
React 如何使用時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳
這篇文章主要介紹了React 如何拿時(shí)間戳計(jì)算得到開(kāi)始和結(jié)束時(shí)間戳,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09