位置: IT常识 - 正文
推荐整理分享【React】组件三大核心属性(react组件框架),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:react 组件三种创建,react常用组件及作用,react组件定义,react 组件三种创建,react 组件三种创建,react 组件三种创建,react组件定义,react组件constructor,内容如对您有帮助,希望把文章链接给更多的朋友!
🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨
【React】组件三大核心属性📘前言📖1.state📑setState📖2.props📑对props进行限制📑对props设置默认值📑state与props的区别📖3.ref📖1.statestate是组件对象最重要的属性,值是对象(可以包含多个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!
📑setStatethis.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.listnewlist.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.propsprops是从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式传入新的 props。
1.传递单个属性
在组件上采用 key=value的形式写下属性,子组件通过 this.props获取属性。
<Person name="Alice"></Person>const {name} = this.props2.批量传递属性
使用展开运算符
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所标识的节点,该容器“专人专用”。
上一篇:【node进阶】深入浅出websocket即时通讯(一)(node深入浅出pdf)
下一篇:【图像分类数据集】非常全面实用的垃圾分类图片数据集共享(图像分类实战)
友情链接: 武汉网站建设