【React】入门第五天 - state和refs

最新推荐文章于 2022-10-22 00:24:00 发布

LaoShiRen1207

最新推荐文章于 2022-10-22 00:24:00 发布

阅读量254

点赞数

分类专栏： React 文章标签： react js

本文链接：https://blog.youkuaiyun.com/weixin_42126468/article/details/104799112

版权

React 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了React中状态管理(state)的概念及其与props的区别，解析了state在组件内部的作用，以及如何通过setState更新状态并触发渲染。同时，详细介绍了Refs的三种使用方式，包括字符串、回调函数和React.createRef()，并提供了具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

state

什么是state

state是状态

state和props的区别

props是组件对外部的接口，如果子组件需要使用父组件的数据就可以通过props来进行数据传递，

state是组件对内的接口，组件自身可能有需要管理的数据，对管理数据的属性就是state

如果需要使用state 不能使用无状态组件

class MyComponent extends React.Component {
  constructor(props) {
      super(props)
    // state是可变的，props 是只读的
      this.state = {
          name : "react"
      }
  }

  // this.setState({key:value}) 是异步的，react 就会自动触发render进行数据的渲染
  render(){
      return ( <div>我是组件
              <button onClick= {()=>{this.setState({name:"vue"})}}>changeValue</button>
              <div></div>
              name :{this.state.name}
          </div> )
  }
}

refs

refs: react当中提供了一个refs的数据不能再无状态组件当中进行使用因为无状态组件没有实例

表示当前组件的真正实例的引用他会返回当前属性的元素

标识组件内部的元素

官方建议不要过度使用refs需要优先考虑state

refs三种方式使用

字符串

class MyComponent extends React.Component {

    fun = ()=>{
        console.log(this.refs.demoInput.value)
    }

    render (){
        return ( <div>
            我是一个组件
                <input type="text" ref="demoInput " placeholder = "请输入"/>
                <button onClick = {this.fun} >click me to get value</button>
            </div> ) 
    }
}

ref回调函数就是在dom节点上或者组件上挂载函数函数的入参是dom 节点

class MyComponentB extends React.Component {
    fun = ()=>{
        console.log(this.inputValue.value)
    }

    render (){
        return ( <div>
            我是一个组件 回调
                <input type="text" ref={(input)=>{this.inputValue = input}} placeholder = "请输入"/>
                <button onClick = {this.fun} >click me to get value</button>
            </div> ) 
    }
}

React.createRef() (react 16.3新提供的方式)

// 把值付给一个变量，使用ref的current属性拿到这个节点
class MyComponentC extends React.Component {
    constructor(props){
        super(props)
        this.myRef =React.createRef()
    }

    fun = ()=>{
        console.log(this.myRef.current.value)
    }

    render (){
        return ( <div>
            我是一个组件 回调
                <input type="text" ref={ myRef } placeholder = "请输入"/>
                <button onClick = {this.fun} >click me to get value</button>
            </div> ) 
    }
}