The attributes in react include state (internal state), props (external attributes) and ref (an element in the component), focusing on recording the use of props. It's the end of the year, [Cash performance]? ? ?

one, state

Used in stateful components - a class component is an object that can contain many properties

1. Writing method:

state={

    属性名：属性值

}

2. Visit:

this.state.属性名

3. Modify: modify through setState

this.setState({

    属性名：要修改的内容

})

4. Verify whether it is asynchronous

In the modification, the question that usually needs to be paid attention to is whether it is asynchronous? Cannot immediately get the updated value of the state

In fact, it depends on the situation: look at the location where setState is executed

(1) In the callback function controlled by React (lifecycle hook, react event listener callback), this situation is asynchronous . Such as event:

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>
        )
    }
}

Change to synchronous : only need to add a callback function after modification, and return the updated value in the callback function

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>
        )
    }
}

Or the timer mentioned in (2) can be converted to synchronization

(2) In non-react-controlled asynchronous callback functions (timer callback/native event listener callback/ promise callback), this situation is synchronous

Two, props

Each component object will have props (short for properties) attribute, which transfers changing data from outside the component to inside the component through the label attribute, which is only applicable to the value transfer between parent and child components

(1) External value transfer

By binding in the subcomponent, pass the value to the subcomponent

<Sub1 name="12"/>

(2) Internally read an attribute value

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>
        )
    }
}

(3) Add type restrictions

The premise is that you need to introduce PropTypes first

import PropTypes from 'prop-types'

1. The form of class components

子组件.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. Use class static attribute 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>
        )
    }
}

The above two points can be added to the type setting. If it is not passed, or the value is not a string, an error will be reported.

(5) Default property values

When a property does not pass a value, use a custom value

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: "哈", 
    
}

Three, ref

It was mentioned in the previous article, so I won’t repeat it

react - three attributes