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>
? ? );
? }
}方式二
通過(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 ant Design手動(dòng)設(shè)置表單的值操作
這篇文章主要介紹了react ant Design手動(dòng)設(shè)置表單的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-10-10
這篇文章主要為大家介紹了React元素與組件的區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React?Hooks使用startTransition與useTransition教程示例
這篇文章主要為大家介紹了React?Hooks使用startTransition與useTransition教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在React中,解析HTML標(biāo)簽通常是使用JSX（JavaScript XML）語(yǔ)法的一部分,這篇文章主要介紹了React 用來(lái)解析html 標(biāo)簽的方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟，詳解的介紹了開發(fā)環(huán)境的配置搭建，有興趣的可以了解一下2017-09-09
關(guān)于react+antd樣式不生效問(wèn)題的解決方式
最近本人在使用Antd開發(fā)時(shí)遇到些問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于react+antd樣式不生效問(wèn)題的解決方式,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
React創(chuàng)建組件的三種方式及其區(qū)別
本文主要介紹了React創(chuàng)建組件的三種方式及其區(qū)別，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
React構(gòu)建簡(jiǎn)潔強(qiáng)大可擴(kuò)展的前端項(xiàng)目架構(gòu)
這篇文章主要為大家介紹了React構(gòu)建簡(jiǎn)潔強(qiáng)大可擴(kuò)展的前端項(xiàng)目架構(gòu)實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
自定義組件的時(shí)候往往需要傳?children,由于寫法比較多樣,我就總結(jié)了一下,要自定義的組件其中包含一個(gè)?title?和一個(gè)?children,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10