react如何定义全局变量_react定义全局变量[通俗易懂]

react如何定义全局变量_react定义全局变量[通俗易懂]前言就目前网上一些关于react中使用reflux的教程,坑比较多,解释的也不够通俗,代码也非常零碎,结合自己踩过的坑,给大家举个简单易懂的react中使用reflux的基础例子,希望对vue转react或者只接触过r

前言

就目前网上一些关于react中使用reflux的教程,坑比较多,解释的也不够通俗,代码也非常零碎,结合自己踩过的坑,给大家举个简单易懂的react中使用reflux的基础例子,希望对vue转react或者只接触过react的朋友一点帮助。

安装reflux

我自己采用的是ts + react的开发模式,不管你采用的是js还是ts,我这里不做赘述,假定你的开发环境全都安装好了,接下来我们需要安装reflux插件,执行命令:
npm install reflux

Reflux是根据React的flux创建的单向数据流类库。
Reflux的单向数据流模式主要由actions和stores组成。例如,当页面中数组litems新增item元素时,会调用actions的某个方法(如addItem(item)),并将新的数据当参数传递进去,通过事件机制,数据会传递到stroes中,stores更新数据并反馈到页面中。
就像这样:
在这里插入图片描述

创建actions

import Reflux from "reflux"
//这里创建一个动作(函数)集,类似于消息发布者(通俗点叫动作发布者),下面制定了三个动作(函数)
//在store中会对这三个动作进行监听
var actions = Reflux.createActions(["getAllItems","addItem","deleteItem"]);
export default actions;

创建stores

import Reflux from "reflux"
//引入需要监听的actions
import actions from "../actions/mainpageActions"

var store = Reflux.createStore({ 
   
  //这是全局变量,随便定义
  items: ["1", "2", "3"],
  //将actions加入监听队列
  listenables: [actions],
  //这是actions中的"getAllItems","addItem","deleteItem"动作(函数)对应的监听回调函数
  //调用"getAllItems","addItem","deleteItem"时实际上调用的是下面对应的回调函数,这些回调函数类似于动作接收者和动作执行者
  //这里的命名有严格的规定,on表示监听,getAllItems要对应onGetAllItems命名
  onGetAllItems:function(){ 
   
    console.log("onGetAllItems:", this.items);
  },
  onAddItem: function (item) { 
   
    this.items.push(item);
    console.log("onAddItem:", this.items);
  },
  onDeleteItem:function () { 
   
    this.items.pop();
    console.log("onDeleteItem:", this.items);
  }
});
export default store;

展示页面

// @ts-ignore
import React, { 
   Component} from 'react'
import { 
   View, Text} from '@tarojs/components'
import { 
   AtNavBar, AtToast, AtBadge, AtIcon, AtButton, AtInput} from "taro-ui"
import Reflux from 'reflux'
import actions from "../../actions/mainpageActions"
import store from "../../store/mainpageStore"

var Taro = require("@tarojs/taro")

interface isState { 
   
  pageTitle: string,
  num: any
}

export default class MainPage extends Component <any, isState> { 
   
  constructor(props: any) { 
   
    super(props)
    this.state = { 
   
      pageTitle: '收件箱',
      num: "",
    }
  }

  componentWillMount() { 
   
  }

  componentDidMount() { 
   
    //页面挂载完成时发布获取所有元素的动作,然后回调函数执行获取所有元素的操作
    actions.getAllItems()
  }

  componentWillUnmount() { 
   
  }

  componentDidShow() { 
   
  }

  componentDidHide() { 
   
  }

  //添加元素动作,表示发布添加动作,然后回调函数会执行添加动作,并将更新后的数据保存在store中
  add() { 
   
    actions.addItem(this.state.num);
  }

  //删除最后一个元素,原理同上
  delete() { 
   
    actions.deleteItem();
  }

  numChange(value: number) { 
   
    this.setState({ 
   
      num: value
    })
  }

  render() { 
   
    return (
      <View>
        <AtNavBar
          color='red'
          title={ 
   this.state.pageTitle}
          rightFirstIconType='bullet-list'
        />
        <AtInput
          name='password'
          title='元素 :'
          type='number'
          placeholder='在此输入数字'
          value={ 
   this.state.num}
          onChange={ 
   this.numChange.bind(this)}
        />
        <AtButton type="primary" onClick={ 
   this.add.bind(this)}>加一个元素</AtButton>
        <AtButton type="primary" onClick={ 
   this.delete.bind(this)}>减一个元素</AtButton>
      </View>
    )
  }
}

效果图

我就不在页面显示了,直接在后台打印出来,如果要在页面显示只要在state中定义一个变量接收这个全局变量数据即可。
获取所有元素:
在这里插入图片描述
添加元素:
在这里插入图片描述
删除最后一个元素:
在这里插入图片描述

今天的文章react如何定义全局变量_react定义全局变量[通俗易懂]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/89557.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注