我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React中DOM事件和状态介绍

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

React中DOM事件和状态介绍

DOM事件

react中绑定事件的语法跟html中为元素绑定事件的语法相似,

html中绑定事件:

<div onclick="fn"></div>
    react中绑定事件
<div onClick={this.fn}></div>

注意:

  • 1 事件名称首字母必须大写
  • 2 事件回调函数定义在组件中,我们通过插值语法引入绑定
  • 3 事件回调函数不能执行(后面不能添加参数集合())

绑定的是一个未执行的方法

参数

React使用了事件委托模式实现事件的绑定(事件委托模式特点:1 减少事件数量, 2 预言未来元素, 3 防止内存外泄)

vue没有实现事件委托,参数就是源生的事件对象

jquery实现了事件委托模式,参数是jquery封装后的事件对象

react中的DOM事件是基于事件委托模式实现的,因此参数就是react封装的事件对象(16版本就一个参数)

因此可以通过事件对象准确的获取绑定事件的元素,以及触发事件的元素。

作用域

react中的DOM事件回调函数

ES5开发中,this指向组件实例化对象,并且是不能改变的

ES6开发中,this默认是undefined,我们未来访问组件中的其他数据,我们要绑定作用域

改变作用域由两种方式:

  • 第一种,使用ES5提供的bind方法,改变作用域
  • 第二种,使用ES6提供的箭头函数,是定义时的作用域

一旦改变了作用域,我们是可以传递自定义参数的

bind方式改变的作用域,传递的自定义参数始终在事件对象前面

箭头函数改变的作用域,传递的自定义参数可以在任何位置。

在ES6开发中,事件回调函数允许我们绑定其他的对象,但是工作中,不建议绑定组件之外的其他对象

举例:

// 定义类
 class Demo extends Component {
  // 事件回调函数
  clickBtn(e) {
      console.log(this, arguments)
      // console.log(e.target, e.currentTarget)
  }
  // 渲染
  render() {
      return (
          <div>
              <button onClick={this.clickBtn}><span>按钮</span>1</button>
              {}
              <button onClick={this.clickBtn.bind(this, 100, 'hello', true)}>按钮2</button>
              <button onClick={e => this.clickBtn(100, e, 'demo', false)}>按钮3</button>
              {}
              <button onClick={this.clickBtn.bind(obj)}>按钮4</button>
          </div>
      )
  }
}

状态

组件有两类数据,一类是属性数据,一类就是状态数据

属性数据是在组件外部传递给组件的,因此在组件外部维护

状态数据是在组件内部使用的,因此在组件内部维护

根据组件是否有状态数据,可以将组件分成两类,一类是无状态是组件,一类是有状态组件

无状态组件

如果组件创建完成,组件就是一成不变的,组件不会产生交互,不会发送请求,这类组件就是无状态组件

我们目前所学习的组件,都是无状态组件

无状态组件还可以简写成一个函数

无状态组件也叫state less component

有状态组件

如果组件创建完成后,会与用户产生交互,会发送异步请求等等,在组件内部就会产生数据,为了维护这部分数据,我们可以将这部分数据放在状态中,这样的组件就是有状态组件。

这里的数据就是状态数据

使用状态数据

使用状态数据跟使用属性数据一样,也是通过this.state来使用。

初始化状态数据

我们在组件的构造函数中,初始化状态数据。

es6中通过constructor定义构造函数,由于我们的组件继承了Component组件基类,

并且重写了构造函数constructor,为了在构造函数内实现构造函数继承,我们要使用super关键字

构造函数有props属性数据参数,为了继承它,我们要将props参数传递给super方法

super(props);

如果不传递:在构造函数中,this.props目前是undefined

由于继承了props,所以在构造函数中props和this.props没有区别了

初始化状态

在构造函数中,通过为this.state赋值即可。

注意:由于在构造函数中,我们可以访问属性数据,因此我们可以用属性数据为状态数据赋值,这样可以实现数据有外部流入内部(工作中常见)

修改状态数据

组件提供了一个this.setState的方法,可以在组件内部修改状态数据

参数是对象

key表示状态属性数据名称

value表示状态数据值

注意:无论是组件的属性数据发生改变,还是状态数据发生改变,组件都会执行render方法。

// 无状态组件内部不需要维护数据,因此可以简写成函数
 let Demo = () => <button>按钮</button>
 // 定义换一换组件
 class Demo extends Component {
 // 初始化状态数据
 constructor(props) {
      // 构造函数继承
      super(props);
      // console.log(this.props, props)
      // 初始化状态
      this.state = {
          num: 0
      }
  }
 // 定义子视图列表
 createChildList(arr) {
      // 将数组成员转成span
      return arr.map((item, index) => <span key={index}>{item}</span>)
  }
  // 创建新闻列表
  createList() {
      // console.log(this)
      // 获取数据长度
      let len = this.props.data.length;
      return this.props.data.map((item, index) => {
          // 遍历第二维数组,如果num与index相等,要显示
          return <li key={index} style={{
              display: this.state.num % len === index ? '' : 'none'
          }}>{this.createChildList(item)}</li>
      })
  }
  // 事件回调函数
  toggle() {
      // 更新num
      // var num = this.state.num;
      // // 下一页
      // num++;
      // 更新状态
      // this.setState({ num })
      // 简化成一步
      this.setState({
          // 先加再更新
          num: ++this.state.num
      })
  }
  // 定义渲染方法
  render() {
      return (
          <div>
              {}
              <span onClick={e => this.toggle(e)}>换一换</span>
              {}
              <ul>{this.createList()}</ul>
          </div>
      )
  }
}

到此这篇关于React中DOM事件和状态介绍的文章就介绍到这了,更多相关React事件和状态内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React中DOM事件和状态介绍

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React事件监听和State状态修改方式

这篇文章主要介绍了React事件监听和State状态修改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

React中使用事件驱动进行状态管理的方法

这篇文章给大家分享的是有关React中使用事件驱动进行状态管理的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。自 Hook 被引入 React 以来,Context API 与 Hook 库在应用状态管理中
2023-06-14

vue中的事件修饰符介绍和示例

在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理,需要的朋友可以参考下
2023-05-17

Springboot 框架中事件监听和发布机制详细介绍

Spring Framework中的ApplicationEventPublisher​接口用于发布和订阅应用程序事件。事件是一种机制,用于在应用程序中实现松散耦合的组件通信。当某些事件发生时,发布者可以通知所有已注册的监听器,并执行相应的

MT6169 PVT时间掩码测试中的TPC事件定时和修改MIPI TX资料介绍

Modify MIPI TX & TPC event Timing for PVT Time mask test--MT6169原资料介绍:1. 調整Timing 的時候,請調到剛好的位置不用留太多margin,太接近boundary 有些
2023-06-05

编程热搜

目录