专栏首页菜鸟计划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 条评论
登录 后参与评论

相关文章

  • 写一个简单的轮播组件

    柴小智
  • react入门(五):事件处理、条件渲染、列表&keys、表单

    柴小智
  • react入门(六):状态提升&context上下文小白速懂

    使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

    柴小智
  • [Cocos Creator] 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    陈皮皮
  • 一个全能的挖孔 Shader

    TouchBlocker 是用来限制可点击的节点的独立组件,完整文件在 eazax-ccc/component 目录下。

    白玉无冰
  • Cocos Creator | 炮弹发射效果模拟

    1.全局监听touch事件,事件分为TOUCH_START(开始)、TOUCH_MOVE(移动)、TOUCHCANCEL(取消)、TOUCH_END(结束)四个...

    一枚小工
  • es6中class类的全方面理解(二)------继承

    继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。...

    用户1272076
  • vue 中使用threejs

    tianyawhl
  • node.js + postgres 从注入到Getshell

    (最近你们可能会看到我发很多陈年漏洞的分析,其实这些漏洞刚出来我就想写,不过是没时间,拖延拖延,但该做的事迟早要做的,共勉)

    phith0n
  • Flutter开发:TextField常用属性的使用

    在flutter开发过程中,掌握常用组件的使用是必备技能,flutter常用的组件和App开发时候常用的控件基本一模一样,只是使用的方式不一样罢了。

    三掌柜

扫码关注云+社区

领取腾讯云代金券