【React】React入门--更改状态、属性、表单的非受控组件和受控组件

🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐

setState

this.state是纯js对象，在vue中，data属性是利用object.defineProperty处理过的，更改data数据的时候会触发数据的getter和setter，但是React没有做这样的处理，所以不能直接更改this.state中的值，需要使用特殊的更改状态的方法setState

以下方代码为例，对button按钮绑定onClick事件，点击按钮，改变this.state中的myshow值和myname值，从而判断是收藏还是取消收藏

export default class App extends Component {
    constructor(){
        super()
        this.state = {
            mytext:"收藏",
            myshow:true,
            myname:"kerwin"
        }
    }
  render() {

    return (
      <div>
        <h1>欢迎来到React开发-{this.state.myname}</h1>
        <button onClick={()=>{

            this.setState({
                myshow:!this.state.myshow,
                myname:"xiaoming"
              
            }) //间接修改收藏

            if(this.state.myshow){
                console.log("收藏的逻辑");
            } else{
                console.log("取消收藏的逻辑");
            }

        }}>{this.state.myshow?"收藏":"取消收藏"}</button>
      </div>
    )
  }
}

setState有两个参数

第一个参数可以是对象，也可以是方法return一个对象

• 参数是对象

  this.setState({
                  myshow:!this.state.myshow,
                  myname:"xiaoming"
                
              }) 
  

• 参数是方法

  this.setState((prevState,props)=>{
  	return {
  		myshow:!prevState.myshow,
      }
  })
  

  该方法中接受了两个参数，一个是上一次的state，一个是pops

属性(props)

props是外部传入的数值，组件内部也可以通过一些方式进行初始化的设置，属性不能被组件自己更改，但是可以通过父组件组东重新渲染的方式来传入新的props

props的使用：在使用一个组件的时候，可以把参数放在标签的属性当中，这些属性都会作为组件props对象的键值

• 在组件上通过key=value写属性，通过this.props获取属性

• 在传参时候，如果写成isshow = "true"那么传过去的数值是一个字符串，如果写成isshow = {true}这时传过去的是布尔值

• {…对象}利用ES6展开赋值

• 默认属性值

      // 默认属性
      static defaultProps={
          leftshow:true  //如果组件中没有传leftshow的键值，则默认leftshow值为true
      }
  

• 属性验证prop-types

  import kerwinPropTypes from 'prop-types'
      //   类属性
      static propTypes ={
          title:kerwinPropTypes.string,  //验证数值是否为字符串
          leftshow:kerwinPropTypes.bool  // 验证数值是否为布尔值
      }
  

属性vs状态

相似点:都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同)

不同点:

• 属性能从父组件获取，状态不能

• 属性可以由父组件修改，状态不能

• 属性能在内部设置默认值，状态也可以，设置方式不一样

• 属性不在组件内部修改，状态要在组件内部修改

• 属性能设置子组件初始值，状态不可以

• 属性可以修改子组件的值，状态不可以

state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。state中状态可以通过this.setstate方法进行更新，setstate会导致组件的重新渲染。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的props，否则组件的 props永远保持不变。

非受控组件

React要编写一个非受控组件，可以使用ref来从Dom节点中获取表单数据，即为非受控组件

import React, { Component } from 'react'

export default class App extends Component {
    myusername = React.createRef()
  render() {
    return (
      <div>
            <h1>登录页</h1>
            <input type="text" ref = {this.myusername} value="lll"/>

            <button onClick={()=>{
                console.log(this.myusername.current.value);
            }}>登录</button>
            <button onClick={()=>{
                this.myusername.current.value = ""
            }}>重置</button>

      </div>
    )
  }
}

在该非受控组件中，input表单中的值无法改变，永远都是‘lll’，因为非受控组件将真实的数据储存在Dom节点中

受控组件

通过state状态来改变表单中的值，对于受控组件来说，输入的值始终由React的state驱动

import React, { Component } from 'react'

export default class App extends Component {
    state={
        myusername:"kerwin"
    }
    render() {
        return (
          <div>
                <h1>登录页</h1>
                <input type="text" value={this.state.myusername}
                 onChange={(evt)=>{
                    	 			        console.log("onchange",evt.target.value);
                     this.setState({
                         myusername:evt.target.value
                     })
                }}/>
    
                <button onClick={()=>{
                    console.log(this.state.myusername);
                }}>登录</button>
                <button onClick={()=>{
                    this.setState({
                        myusername:""
                    })
                }}>重置</button>


          </div>
        )
      }
}

表单中的value值为state.myusername值，因此每次触发onChange绑定的事件改变state.myusername值，则表单中的value也随之改变，因此input表单中的值随着用户的输入而更新

希望对大家有所帮助，期待你们的支持✨✨✨