专栏首页菜鸟计划react入门(三):state、ref & dom简解

react入门(三):state、ref & dom简解

一、状态

自己在组件内部定义的

作用:组件内部的状态重新更新时,可以控制组件内部重新渲染(不需要重新调取组件也可以重新渲染)

import React from 'react';
class Clock extends React.Component{
  constructor(){
  super();
  this.state = {
    time: new Date().toLocaleString(),
    num: 0
  }
}
componentDidMount() {
/**
* 修改状态的两种方式
* 1.通过this.setState来修改状态属性
* 2.通过this.forceUpdate来强制渲染
*/
setInterval(()=>{
  //这种方式不仅能修改状态,还能重新渲染组件。
   this.setState({
     time: new Date().toLocaleString()
   })

  //这种方式能修改状态,但是不能重新渲染组件。如果要渲染,则需要this.forceUpdate()强制渲染。
  this.state.time = new Date().toLocaleString();
  this.forceUpdate();
 }, 1000)
}


render() {
  return (
    <div>
      <h2>{this.state.time}</h2>
      <button onClick={event => {
        //此处setState修改组件的状态是异步编程:执行完setState后,会把修改状态和通知组件渲染的操作放到EventQueue(等待事件队列中),当后面的主栈任务完成才会执行这个操作。
        //但setState不全是异步操作。
        this.setState({
        num: this.state.num+1
      });
     console.log(this.state.num); //第一次打印的是0
     }}>点我</button>
    </div>
  )
 }
}
export default Clock;

 二、ref & dom

class Clock extends React.Component{
  constructor(){
    super();
    this.state = {
      time: new Date().toLocaleString(),
    num: 0
  }
  this.time = React.createRef(); //第三种通过函数创建一个
}
componentDidMount() {
  setInterval(()=>{
  /**
  * 如果我们给元素设置ref属性(属性值是唯一的)
  * ref="xxx",react在解析jsx的时候,会把所设置的这个属性的元素以对象键值对的方式增加到当前实例的refs对象中{xxx:元素}
  * 在jsx渲染完成后,想要操作这个元素,直接基于this.refs.xxx就可以获取到,这就是react中的dom操作.
  */
  this.refs.time.innerHTML = new Date().toLocaleString();  //console.log(this.refs) {time: h2}

  this.time.innerHTML = new Date().toLocaleString();  // console.log(this.time) {time: h2}

  }, 1000)
}

render() {
  // 第一种(直接定义属性)
  return <h2 ref={'time'}>{this.state.time}</h2>

  //第二种(通过箭头函数定义)
  //ref的值除了是字符串外,还可以是函数。如果是函数,参数x代表的就是当前元素本身,而我们一般会把当前元素直接挂载到实例上,
  // 以后直接this.xxx就可以操作元素了(例如:这里的x就是h2)
  return (
    <div>
      <h2 ref={x => {this.time = x}}>{this.state.time}</h2>
    </div>
)

  //第三种(通过React.createRef()方法定义)
  <h2 ref={this.time}>{this.state.time}</h2>
 }
}

下面是几个适合使用 refs 的情况:

- 处理焦点、文本选择或媒体控制。 - 触发强制动画。 - 集成第三方 DOM 库

例如:处理焦点

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创建 ref 存储 textInput DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意:通过 "current" 取得 DOM 节点
    this.textInput.current.focus();
  }

  render() {
    // 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上
    return (
      <div>
        <input type="text" ref={this.textInput} />
          
        <input type="button" value="Focus the text input" onClick={this.focusTextInput}/>
      </div>
    );
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为什么 React16 对开发人员来说是一种福音

    就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。

    前端小智@大迁世界
  • React 开发要知道的 34 个技巧

    原理:子组件里面利用 props 获取父组件方法直接调用,从而改变父组件的值 注意: 此方法和 props 大同小异,都是 props 的应用,所以在源码中没有...

    前端老王
  • React ref 的前世今生

    众所周知,React 通过声明式的渲染机制把复杂的 DOM 操作抽象成为简单的 state 与 props 操作,一时圈粉无数,一夜间将前端工程师从面条式的 D...

    Nealyang
  • 【React】你想知道的关于 Refs 的知识都在这了

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

    Nealyang
  • React 开发必须知道的 34 个技巧【近1W字】

    React 是前端三大框架之一,在面试和开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的...

    火狼1
  • React 从入门到入土(二)--组件三大属性

    这时候会发现页面内容不会改变,原因是 React 中不建议 state不允许直接修改,而是通过类的原型对象上的方法 setState()

    小丞同学
  • React两大组件,三大核心属性,事件处理和函数柯里化

    3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

    大忽悠爱学习
  • 小结React(三):state、props、Refs

    在React中state、props、Refs都是最基础的概念,本文将同时梳理下这三个知识点,主要内容包括:

    前端林子
  • 2021前端react面试题汇总

    (2)区别 Redux更多的是遵循Flux模式的一种实现,是一个 JavaScript库,它关注点主要是以下几方面∶

    zz1998
  • react-组件学习笔记

    本文重点学习理解react组件部分,文档内容来源于react官网以及《react全栈》。本文内容仅针对react初学者,请大神略过,仅限于读书笔记与摘录。

    RobinsonZhang
  • 「React进阶」 React全部api解读+基础实践大全(夯实基础万字总结)

    很多同学用react开发的时候,真正用到的React的api少之又少,基本停留在Component,React.memo等层面,实际react源码中,暴露出来的...

    用户6835371
  • 谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返...

    lingxiaoguang
  • 谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返...

    前端森林
  • 让你30分钟快速掌握vue 3

    经过了漫长的迭代,Vue 3.0终于在上2020-09-18发布了,带了翻天覆地的变化,使用了Typescript 进行了大规模的重构,带来了Compositi...

    前端开发博客
  • 一文让你30分钟快速掌握Vue3

    https://juejin.im/post/6887359442354962445

    ConardLi
  • 【React源码解读】- 组件的实现

    react使用也有一段时间了,大家对这个框架褒奖有加,但是它究竟好在哪里呢? 让我们结合它的源码,探究一二!(当前源码为react16,读者要对react有一定...

    用户2356368
  • react入门——慕课网笔记

      1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性

    超然
  • [OHIF-Viewers]医疗数字阅片-医学影像-REACT-React.createRef()-Refs and the DOM关于回调 refs 的说明

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

    landv
  • 细说React中的useRef

    这是一个非常经典的例子,页面上渲染出三个button。当我点击+之后,页面重新渲染为1。

    19组清风

扫码关注云+社区

领取腾讯云代金券