React从入门到实战 -组件的三大核心属性(1)state

这篇具有很好参考价值的文章主要介绍了React从入门到实战 -组件的三大核心属性(1)state。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

State

  1. state是组件对象最重要的属性,值是对象(可以包含多个Key-value的组合)
  2. 组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)
    class MyComponent extends React.Component {
        render(){
            console.log(this)
            return <h1>今天天气很炎热</h1>
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))

React从入门到实战 -组件的三大核心属性(1)state

有状态的组件

除了使用外部数据(通过this.props访问)以外,组件还可以维护其内部的状态数据(通过this.state访问)。当组件的状态数据改变时,组件会再次调用render()方法重新渲染对应的标记。

绑定事件 - 解决类中this的指向问题

render中绑定的事件是作为onClick的回调,不是通过实例调用,类中的方法默认开启了局部的严格模式,如果直接打印类中方法的this为undefined。

<script type="text/babel">
    class MyComponent extends React.Component {
       constructor(props){
        super(props)
        this.state = {
            content:'今天天气很炎热',
            flag:true
        }
        this.clickFn = this.clickFn.bind(this)
       }
        render(){
            console.log(this)
            return <h1 onClick={this.clickFn}>{this.state.content}</h1>
        }
        clickFn(){
            console.log(this.state)
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>
setState的使用

状态state不可以直接更改,需要借助setState来修改

<script type="text/babel">
    class MyComponent extends React.Component {
       constructor(props){
        super(props)
        this.state = {
            content:'今天天气很炎热',
            isHot:true
        }
        this.clickFn = this.clickFn.bind(this)
       }
        render(){
            console.log(this)
            return <h1 onClick={this.clickFn}>{this.state.content}</h1>
        }
        clickFn(){
            let content = ''
            let isHot = this.state.isHot
          if(this.state.isHot){
                content = '今天天气很炎热'            
          }else{
            content= '今天天气很凉爽'
          }
          this.setState({
            content:content,
            isHot:!isHot
          })
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>
简化代码
  1. 省略构造器,类中可以直接写赋值语句

  2. 类中函数使用箭头函数绑定在实例对象上文章来源地址https://www.toymoban.com/news/detail-496132.html

    • 箭头函数没有自己得this,它的this是继承而来的,默认指向在定义它时所处的对象,此处指父级作用域
    • 自定义方法——要用赋值语句的形式+箭头函数
 class MyComponent extends React.Component {
      // 类中可以直接写赋值语句
        state={isHot:false,content:"今天天气很凉爽"}
        render(){
            return <h1 onClick={this.changeWeather}>{this.state.content}</h1>
        }
        // 使用箭头函数将方法绑定在实例对象上,箭头函数没有自己的this
        // 自定义方法
        changeWeather = ()=>{
          let content = ''
            let isHot = this.state.isHot // 此处的this是父级作用域
          if(this.state.isHot){
                content = '今天天气很炎热'            
          }else{
            content= '今天天气很凉爽'
          }
          this.setState({
            isHot:!isHot,
            content:content
          })
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))				
总结
  1. 组件中render方法中的this为组件实例对象
  2. 组件自定义的方法中this为undefined:
    • 强制绑定this,通过函数对象的bind()
    • 箭头函数
  3. 状态数据,不能直接修改或者更新,通过this.setState()进行修改

到了这里,关于React从入门到实战 -组件的三大核心属性(1)state的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • React Hook入门小案例 在函数式组件中使用state响应式数据

    Hook是react 16.8 新增的特性 是希望在不编写 class的情况下 去操作state和其他react特性 Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐 我们还是先创建一个普通的react项目 我们之前写一个react组件可以这样写 简单说 就是声明一个类对象 然后在里面 写组

    2024年02月09日
    浏览(54)
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(65)
  • React三属性之:state

    作用: state是用于在组件中存储数据,称之为\\\"状态机\\\" 类似于vue2中的data属性,不过操作和vue中data差别很大. 使用: this.state的值不能直接进行赋值操作 ,如:this.state.value_str = \\\'修改的值\\\',需要使用 this.setState 方法 this.setState({修改的key:修改的value},数值发生改变后的函数),只会改变修改

    2024年02月09日
    浏览(36)
  • React三大属性

    我是南城余!阿里云开发者平台专家博士证书获得者! 欢迎关注我的博客!一同成长! 一名从事运维开发的worker,记录分享学习。 专注于AI,运维开发,windows Linux 系统领域的分享! 知识库链接: D2 · 语雀 组件的实例对象三大属性 这三个核心都是建立在类定义的组件上,

    2024年01月23日
    浏览(33)
  • 【React 入门实战篇】从零开始搭建与理解React应用-三、React核心概念与基础语法

    三、React核心概念与基础语法 3.1 JSX语法详解 JSX是React中的一个语法糖,它允许开发者在JavaScript代码中编写类似HTML的标记。这种语法使得开发者能够以一种声明式的方式描述界面,提高了代码的可读性和可维护性。 JSX的语法规则: 元素创建 :使用尖括号 来创建元素,就像在

    2024年04月08日
    浏览(47)
  • react中的redux的了解,三大核心理念以及三大原则

    1、要学习redux首先我们先了解下函数式编程中的纯函数;我们最基本的javascript符合函数式编程,因此他也有纯函数。 纯函数:在程序中,若一个函数复合下面的条件,那么这个函数就可以被称为纯函数: ⑴这个函数在相同输入值时,需产生相同的输出。纯函数的输出和输入

    2023年04月08日
    浏览(36)
  • 初识React/JSX/组件/state/受控组件

                                               

    2024年02月12日
    浏览(60)
  • React从入门到实战-事件处理,受控组件与非受控组件

    事件处理 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素——为了更高效 通过event.target得到发生事件的DOM元素对象 收集表

    2024年02月12日
    浏览(173)
  • 自动化测试工具-Selenium:Selenium的核心三大组件详解

    目录 1. WebDriver 1.1 WebDriver的通信方式 1.2 WebDriver的功能 1.3 W3C推荐标准 2. Grid 3. IDE Selenium 是支持 web 浏览器自动化的一系列工具和库的综合项目。官方对Selenium认可的三大组件或API分别是: WebDriver、Selenium IDE、Grid。 其中,WebDriver又被称为Selenium的核心。 下面本篇文章将深度介

    2024年02月03日
    浏览(46)
  • 企业级ChatGPT开发的三大核心内幕及案例实战(四)

    2.3 四种组合文档链方式在LangChain开发中的作用及源码分析 假设阅读一本书,作者和智华合作写的一本关于Spark方面的书籍,一共1300多页,如果从第一页开始,逐渐去遍历检索信息,无论从速度、还是从性价比的角度,这是一个问题,LangChain给我们提供了一些比较经典的方式

    2024年02月10日
    浏览(69)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包