react中的属性有state(内部状态)、props(外部属性)和ref(组件内某个元素),重点记录props的使用。年底了,【冲业绩】???
一、state
用于有状态的组件中——类组件,是一个对象,能包含很多属性
1、写法:
state={
属性名:属性值
}
2、访问:
this.state.属性名
3、修改:通过setState来修改
this.setState({
属性名:要修改的内容
})
4、验证是否是异步
在修改中,通常需要注意的问题就是是否是异步?不能立即获取状态更新后的值
其实是视情况而定的:看执行setState的位置
(1)在React控制的回调函数中(生命周期钩子,react事件监听回调)这种情况是异步的。如事件:
import React, { Component } from 'react'
export default class App6 extends Component {
state = {
count: 1
}
add=()=>{
console.log('生命周期钩子函数更新之前:',this.state.count)
this.setState(state => ({count: state.count + 1}) )
console.log('生命周期钩子函数更新之后:',this.state.count);//1
}
render() {
return (
<div>
<div>{this.state.count}</div>
<button onClick={this.add}>加1</button>
</div>
)
}
}
改为同步:只需要在修改后添加一个回调函数,在回调函数中回去更新后的值
import React, { Component } from 'react'
export default class App6 extends Component {
state = {
count: 1
}
// 同步
add=()=>{
console.log('生命周期钩子函数更新之前:',this.state.count)
this.setState(state => ({count: state.count + 1}),()=>{
console.log('生命周期钩子函数更新之后:',this.state.count);//1
})
}
render() {
return (
<div>
<div>{this.state.count}</div>
<button onClick={this.add}>加1</button>
</div>
)
}
}
或者出现(2)里面提到的定时器等里面可以转换为同步
(2)在非react控制的异步回调函数中(定时器回调/原生事件监听回调/promise回调)这种情况是同步的
二、props
每个组件对象都会有props(properties的简写)属性,通过标签属性从组件外向组件内传递变化的数据,仅适用于父子组件之间的传值
(一)外部传值
通过在子组件绑定,向子组件传值
<Sub1 name="12"/>
(二)内部读取某个属性值
this.props.name
import React, { Component } from 'react'
export default class App6 extends Component {
state = {
name:'1'
}
render() {
return (
<div>
{/* 引入子组件 */}
{/* 通过在子组件绑定,向子组件传值 */}
<Sub1 name={this.state.name} />
</div>
)
}
}
class Sub1 extends Component {
render() {
return (
<div>
{/* 内部读取某个属性值 */}
<div>{this.props.name}</div>
</div>
)
}
}
(三)添加类型限制
前提是需要先引入PropTypes
import PropTypes from 'prop-types'
1、类组件的形式
子组件.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
}
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class App6 extends Component {
state = {
name:'1'
}
render() {
return (
<div>
{/* 引入子组件 */}
{/* 通过在子组件绑定,向子组件传值 */}
<Sub1 name={this.state.name} />
<Sub1 />
</div>
)
}
}
class Sub1 extends Component {
render() {
return (
<div>
{/* 内部读取某个属性值 */}
<div>{this.props.name}</div>
</div>
)
}
}
//类组件的形式
Sub1.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
}
2、使用class静态属性static
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
}
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class App6 extends Component {
state = {
name:'1'
}
render() {
return (
<div>
{/* 引入子组件 */}
{/* 通过在子组件绑定,向子组件传值 */}
<Sub1 name={this.state.name} />
<Sub1 />
</div>
)
}
}
class Sub1 extends Component {
//使用class静态属性static
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
}
render() {
return (
<div>
{/* 内部读取某个属性值 */}
<div>{this.props.name}</div>
</div>
)
}
}
以上两点都能做到添加类型设置,若不传,或者不是字符串的值,会报错
(五)默认属性值
当某个属性没有传递值的时候,使用自定义的值
import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class App6 extends Component {
state = {
name:'1'
}
render() {
return (
<div>
{/* 引入子组件 */}
{/* 通过在子组件绑定,向子组件传值 */}
<Sub1 name={this.state.name} />
<Sub1 />
</div>
)
}
}
class Sub1 extends Component {
//使用class静态属性static
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
}
render() {
return (
<div>
{/* 内部读取某个属性值 */}
<div>{this.props.name}</div>
</div>
)
}
}
// 默认属性值
Sub1.defaultProps = {
name: "哈",
}
三、ref
在上上篇文章讲过,不在赘述