🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐
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表单中的值随着用户的输入而更新
希望对大家有所帮助，期待你们的支持✨✨✨
