react——三大属性

        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

在上上篇文章讲过，不在赘述