React 之 内置方法setState改变state(一)

这篇具有很好参考价值的文章主要介绍了React 之 内置方法setState改变state(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简述

  1. this.setState 方法是React组件类(React.Component 的子类)的一个内置方法。当你在创建一个React组件类时,你继承自 React.Component,因此你的组件类会自动获得this.setState 方法。
  2. this.setState 用于更新组件的state。当state更新时,React会重新渲染该组件及其子组件。

使用this.setState代码栗子:

//以下为组件 Board 的代码(一个React 组件类对象)
class Board extends React.Component {
  //构造函数来初始化 state(状态)
  //在 JavaScript classes(类)中, 在定义子类的构造函数时,你需要始终调用 super 。	          			   
  //所有具有 constructor 的 React 组件类都应该以 super(props) 调用启动它。
  constructor(props) {
    super(props);
    this.state = {  //等同于vue的data属性
      squares: Array(9).fill(null),
    };
  }

  handleClick(i) {  //等同于vue2的method属性内定义的方法
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    //调用内置方法this.setState更新数据状态
    this.setState({squares: squares});
  }

  renderSquare(i) {
    return (
      //这里的Square 是另外一个组件,这里没写
      <Square   
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';
    // 以下等同于vue的模版template,  XML 的标签。你的组件告诉 React 你要呈现的内容
    return (   
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

文章来源地址https://www.toymoban.com/news/detail-861089.html

到了这里,关于React 之 内置方法setState改变state(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react中的setState是同步还是异步

    setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。 合成事件:就是react 在组件中的onClick等都是属于它自定义的合成事件 原生事件:比如通过addeventListener添加的,dom中的原生事件 setState的“异步”并不是说内部由异步代码实现,其实本身

    2024年02月04日
    浏览(37)
  • 【React】组件生命周期、组件通信、setState

    ◼ 组件化思想的应用: ​  有了组件化的思想,我们在之后的开发中就要充分的利用它。 ​  尽可能的将页面拆分成一个个小的、可复用的组件。 ​  这样让我们的代码更加方便组织和管理,并且扩展性也更强。 ◼ React的组件相对于Vue更加的灵活和多样,按照不同的

    2024年01月20日
    浏览(44)
  • React中setState是同步还是异步的

    setState()同步、异步总结 异步的情况: 由React控制的事件处理函数,以及生命周期函数调用setState时表现为异步 。 大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等(合成事件中),这些事件处理函数中的setState都是异步处理的。 注:上面的事件都是

    2024年02月11日
    浏览(39)
  • React中的setState使用细节和原理解析

    前面我们有使用过setState的基本使用, 接下来我们对setState使用进行详细的介绍 使用setState的原因 开发中我们并不能直接通过修改state的值来让界面发生更新 : 因为我们修改了state之后,希望React根据最新的State来重新渲染界面,但是 this.state 这种方式的修改React并不知道数据发

    2024年02月03日
    浏览(42)
  • react如何处理setState,useState异步问题

    flushSync 是 React 提供的一种实验性的 API,用于控制 React 更新的同步/异步方式,并且只能在 React 16 及更高版本中使用。使用 flushSync 可以强制 React 在执行一些特定的 DOM 操作时,同步地(而非异步地)执行分块更新,从而保证消息优先级和交互响应性能。 通常情况下,React 采

    2024年02月11日
    浏览(46)
  • react中useState、setState、usemeno、meno区别

    useState和setState是异步 useState : useState 是React函数组件中的钩子,用于声明状态变量。 通过 useState ,你可以在函数组件中添加状态,而无需创建类组件。 useState 返回一个数组,其中包含当前状态和一个更新状态的函数 setState : setState 是类组件中用于更新状态的方法。 在类

    2024年02月22日
    浏览(31)
  • React - 请你说一说setState是同步的还是异步的

    难度级别:中高级及以上                               提问概率:70%  在React项目中,使用setState可以更新状态数据,而不能直接使用为this.state赋值的方式。而为了避免重复更新state数据,React首先将state添加到状态队列中,此时我们可以通过shouldComponentUpdate这

    2024年04月09日
    浏览(42)
  • React源码解析18(11)------ 实现多次setState的批处理

    在React中,如果涉及到了多次setState,组件render几次。setState是同步的还是异步的。这是一个很常见的面试题。 而本篇文章,就是主要实现React中,对于这部分的性能优化,我们称之为批处理。例如当我有下面的JSX。 对于当前的点击事件来说,只有最后的setNum(num + 3)是有效的。

    2024年02月11日
    浏览(45)
  • react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误

    在 React 组件中,当在 componentWillUpdate 或 componentDidUpdate 生命周期方法中调用 setState 时,会触发无限循环,导致超过最大更新深度。 在React组件中 ,我们使用componentWillUpdate 或 componentDidUpdate 生命周期方法中调用 setState 方法,但是调用seState会导致组件重新渲染 ,那么这个生命

    2024年02月12日
    浏览(40)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包