【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表单中的值随着用户的输入而更新

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