React组件三大核心属性State props Refs介绍
1.state
state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）。
组件被成为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）。
一、定义state，访问state
写法一（常用、简写）
直接向class App添加state属性
import React, { Component } from 'react'
export default class App extends Component {
// ====定义state写法一====
state = {
isCollect: false,
myname:"Kerwin"
}
render() {
return (
<div>
<h1>欢迎来到react开发-{this.state.myname}</h1>
</div>
)
}
}
写法二（了解）
使用构造器，初始化一个state属性
import React, { Component } from 'react'
export default class App extends Component {
// ====定义state写法二====
constructor(){
super()
this.state = {
isCollect:false,
myname:"Kerwin"
}
}
render() {
return (
<div>
<h1>欢迎来到react开发-{this.state.myname}</h1>
</div>
)
}二、修改state
想要修改state中的数据，我们就需要自定义一个修改state的方法。
如何自定义这个方法并且调用？
关键点在于，this指向应为App这个类的实例对象
...
render(){
{/* 法一 */}
<button onClick={this.handleAddClick}>add</button>
{/* 法二 */}
<button onClick={this.handleDelClick(index)}>delete</button>
}
handleAddClick= ()=>{}
handleDelClick(){}
如何修改state对象中的数据?
state状态数据，不支持直接修改或更新！需要借助setState！
setState
this.state 是纯js对象，在Vue中，data属性是利用object.defineProperty 处理过的，更改data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法 setState。
实例：
修改state.isHot 的值。
...
state = {isHot: true,wind: '微风'}
render(){
return (
<div>
<h1 onClick={this.changeWeather}>天气：{this.state.isHot}-{this.state.wind}</h1>
</div>
)
}
...
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
...
此处state被修改后的结果为： state = {isHot: false, wind:'微风'}
setState可以更新state ,且更新是一种合并不是替换！
特别注意：不能直接修改状态（state），可能会造成不可预期的后果！
扩展：
假如state属性中存有一个数组，如何修改这个数组的值呢？
state = {
list: ['aaa','bbb','ccc']
}
切记不能写成这样!!
const newlist = this.state.list
newlist.push('ddd')
解决办法：
由于我们不能直接修改state中的数据，所以需要将 list 这个数组深复制一份，对复制得来的新数组进行修改并使用setState传入。
//法一 const newlist = [...this.state.list] //法二 const newlist = this.state.list.concat() //法三 const newlist = this.state.list.slice() //...
setState更新状态不总是异步的。
setState还接收第二个参数，第二个参数是回调函数，当状态和 dom更新完后就会被触发。
2.props
props是从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式传入新的 props。
传递单个属性
在组件上采用 key=value的形式写下属性，子组件通过 this.props获取属性。
<Person name="Alice"></Person>
const {name} = this.props批量传递属性
使用展开运算符
const p = {name:'Alice',age:23,sex:'女'}
...
<Person {...p}></Person>
注意：在原生js下，使用展开运算符展开一个对象，这种写法是会报错的。
但在babel和react的影响下，这种写法不会报错，展开运算符也可以展开一个对象了，但仅仅适用于标签语法中。
对props进行限制
首先需要引入
import PropTypes from 'prop-types'
写法一：
写在类的内部
static propTypes = {
'标签属性'：'限制'
}
写法二：
写在类的外部
类名.propTypes = {
//...
}
对标签属性进行类型限制
import PropTypes from 'prop-types'
...
static propTypes = {
name: PropTypes.string, //限制name属性为字符串类型
age: PropTypes.number, //限制age为数值
speak: PropTypes.func, //限制speak为函数
isStudent: PropTypes.bool, //限制isStudent为布尔值
}
对属性进行必要性限制
PropTypes.string.isRequired
对props设置默认值
引入
import PropTypes from 'prop-types'
写法一：
写在类的内部
static defaultProps = {
标签属性：默认值
}
写法二：
写在类的外部
类名.defaultProps = {
//...
}
例：
import PropTypes from 'prop-types'
...
static propTypes = {
age:18 //默认age为18
}
props 不能在子组件修改!!!
state与props的区别
state的主要作用是用于组件保存、控制、修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能修改也不能访问。你可以认为 state是一个局部的、只能被组件自身控制的数据源。 state中状态可以通过 this.setState方法进行更新，setState会导致组件的重新渲染。
props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props永远保持不变。
没有 state的组件叫无状态组件（stateless component），设置了state的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态地组件。这样会降低代码维护地难度，也会在一定程度上增强组件的可复用性。
3.ref
给标签设置ref=“username”
通过这个获取this.refs.username，ref可以获取到应用的真实dom。
给组件设置ref=“username”
通过这个获取this.refs.username，ref可以获取组件对象。
新的写法
myRef = React.createRef()
...
<div ref={this.myref}>hello</div>
<button onClick={()=>{
//访问
console.log(this.myref.current)
}}></button>
React.createRef调用后可以返回一个容器，该容器可以存储被Ref所标识的节点，该容器“专人专用”。
到此这篇关于React组件三大核心属性State props Refs介绍的文章就介绍到这了,更多相关React state props refs内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react-router-domV6版本的路由和嵌套路由写法详解
本文主要介绍了react-router-domV6版本的路由和嵌套路由写法详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
react使用useImperativeHandle示例详解
这篇文章主要为大家介绍了react使用useImperativeHandle示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了React之配置多个代理实现数据请求返回问题，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了在 React Native 中给第三方库打补丁的过程解析,有时使用了某个React Native 第三方库，可是它有些问题，我们不得不修改它的源码，本文介绍如何修改源码又不会意外丢失修改结果的方法，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了Jira 任务管理系统项目总结讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在Ant Design Pro登录功能中集成图形验证码组件的方法步骤
这篇文章主要介绍了在Ant Design Pro登录功能中集成图形验证码组件的方法步骤，这里的登录功能其实就是一个表单提交，实现起来也很简单，具体实例代码跟随小编一起看看吧2021-05-05
这篇文章主要为大家详细介绍了如何基于React.js实现兔兔牌九宫格翻牌抽奖组件，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-01-01
这篇文章主要为大家介绍了React 状态的不变性实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React中memo useCallback useMemo方法作用及使用场景
这篇文章主要为大家介绍了React中三个hooks方法memo useCallback useMemo的作用及使用场景示例，有需要的朋友可以借鉴参考下，希望能够有所帮助2023-03-03
最新评论