专栏首页OECOMReact组件相关API

React组件相关API

在React中,我们通过组件来将页面结构组件化,形成一个个独立的模块,方便了程序的开发,在组件内部定义了一系列的API来供开发者调用,操作组件内的数据或是DOM结构。在React中主要有一下几种组件API:

  1. 设置状态:setState
  2. 替换状态:replaceState
  3. 强制更新:forceUpdate

设置状态:setState

this.setState()方法来更新state。当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI。setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

 componentWillMount(){
    var self = this;
    //创建定时器,同时给state的nowTime赋值
    setInterval(function(){
      let theTime = new Date();
      self.setState({
        nowTime:theTime.getFullYear()+"年"+(theTime.getMonth()+1)+"月"+theTime.getDate()+"日"+theTime.getHours()+":"+theTime.getMinutes()+":"+theTime.getSeconds()
      })
    },1000);
    
  }

在组件创建前构建一个定时器来显示当前的时间。在上面的说明中说到setState并不会立即对state执行修改,所以当setState执行完成以后再次使用this.state.nowTime的值应该还是之前的值。那么如果我想使用修改之后的值,就应该按照下面的方法,来给setState设置一个回调函数,该函数会在修改完成以后执行。

componentWillMount(){
    var self = this;
      self.setState({
       nowTime:5
      },function(){
         console.log(self.state.nowTime);
      })
    console.log(this.state.nowTime);
  }

替换状态:replaceState

replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。

强制更新:forceUpdate

constructor(){
    super();
    this.state  = {
      msg:"这是react的信息",
      nowTime:"",
      myName:"张三"
    }
  }
	
	handleClickOnTitle(ds){
		this.setState({
			myName:"李四"
		});
    console.log(this.state.myName);
    this.forceUpdate(function(){
       console.log(this.state.myName);
    });
	}

上面代码中执行handleClickOnTitle函数后先输出的应该是张三,执行forceUpdate之后,在其回调函数内输出结果为李四。也就是说forceUpdate()方法会使组件调用自身的render()方法重新渲染组件,组件的子组件也会调用自己的render()。但是,组件重新渲染时,依然会读取this.props和this.state,如果状态没有改变,那么React只会更新DOM。

forceUpdate()方法适用于this.props和this.state之外的组件重绘(如:修改了this.state后),通过该方法通知React需要调用render()

一般来说,应该尽量避免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React组件相关API

    在React中,我们通过组件来将页面结构组件化,形成一个个独立的模块,方便了程序的开发,在组件内部定义了一系列的API来供开发者调用,操作组件内的数据或是DOM...

    无邪Z
  • react中setState是同步还是异步的

    我们都知道,React框架是由数据来驱动视图变化的,基于状态的管理实现对组件的管理,也就是组件当中的state,通过setState方法来修改当前组件的stat...

    无邪Z
  • react组件间的通信

    在使用react过程中,不可避免的需要组件间的数据通信,数据通信一般情况有一下几种情况:

    无邪Z
  • React组件相关API

    在React中,我们通过组件来将页面结构组件化,形成一个个独立的模块,方便了程序的开发,在组件内部定义了一系列的API来供开发者调用,操作组件内的数据或是DOM...

    无邪Z
  • 上拉加载下拉刷新了解下

    1.界面上,只分成简单的两块,一块是上方的刷新文字,一块是下方的内容,然后将上方提示内容隐藏在屏幕之外,一般由两种方式,一种是上面遮一层,另一种是marginT...

    IMWeb前端团队
  • 用 React 分页显示数据用react分页显示数据

    展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

    一个会写诗的程序员
  • 使用组件的state机制实现屏幕取词

    望月从良
  • ASP.NET AJAX(15)__构建高性能ASP.NET AJAX应用UpdatePanel的性能问题使用UpdatePanel的注意事项脚本加载避免脚本阻塞页面显示AjaxControlTool

    UpdatePanel的性能问题 在UpdatePanle使用的时候,它每次的更新都是将整个页面回送的,而且也会加上一些他更新的标记,所以往往它传递的数据量比传...

    小白哥哥
  • React 基础实例教程

    首先,需要核心库react.js与React的DOM操作组件react-dom.js

    书童小二
  • React源码分析与实现(一):组件的初始化与渲染

    阅读源码的方式有很多种,广度优先法、调用栈调试法等等,此系列文章,采用基线法,顾名思义,就是以低版本为基线,逐渐了解源码的演进过程和思路。

    Nealyang

扫码关注云+社区

领取腾讯云代金券