React 三大组件

最新推荐文章于 2024-08-01 13:42:52 发布

浣熊泡面君

最新推荐文章于 2024-08-01 13:42:52 发布

阅读量49

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/2301_76634160/article/details/131488651

版权

ref属性

是一种引用的写法
如果只创建了一个ref容器，但多个节点使用了同一个ref容器，则最后的会覆盖掉前面的节点,你通过this.ref容器.current拿到的那个节点是最后一个节点

当react执行到div中第一行时，发现input节点写了一个ref属性，又在上面创建了myRef容器，所以它就会把当前的value存到组件实例的myRef容器中

import React, { Component } from 'react'

export default class Up extends Component {
    myr = React.createRef()
    render() {
        return (
            <div>
                <input type='text' ref={this.myr}></input>
                <button onClick={this.aaa}>
                点击
                </button>
            </div>
        )
    }
    aaa = () => {
        console.log(this.myr.current.value);
    }
}

state(状态)

State是可变的，是一组用于反映组件UI变化的状态集合。
状态就是组件描述某种显示情况的数据了由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
声明式是组件内部的数据载体
状态数据不能直接赋值，需要用setState（）当每次触发这个方法就会重新渲染组件
通过更改state的值来达到更新页面显示（重新渲染组件）

export default class Up extends Component {
    state = {
        name: '选择'
    }
    render() {
        return (
            <div>
                <h2>随机选择一只猫猫</h2>
                <button onClick={
                    this.cat
                }>{this.state.name?'选择':'缅因'}
                </button>
            </div>
            )}
    
    cat = () => {
        console.log(this.state.name);
        this.setState({
            name: !this.state.name
        })
}}

setstate

setstate处在同步的逻辑中，异步更新状态，更新真实dom
setstate处在异步的逻辑中，同步更新状态，同步更新真实dom
setstate接受第二个参数第二个参数式回调函数状态和dom更新完后就会触发
本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，所以形成了所谓的‘异步’。
setState是通过队列机制实现state更新，内部会维护一个update Queue，同时更新一个同名属性时，后面会覆盖前面，且只执行最后一次更新。

props属性

每个组件都会有props属性
组件标签的所有属性都保存在props
组件内部不能改变外部传进来的props属性值
如果要传布尔值加上{ true/false } 否则会认为是字符串

// 引入class组件  
import Upp from './Component/ref_1'
//创建父类组件
export default class Up extends Component {
    render() {
        return (
            <div>
            //发送要传的值
                <upp kind=32 name='猫'></upp>
            </div>
        )
    }
}



//在子类里面接收
import React, { Component } from 'react'

export default class Upp extends Component {
    render() {
    //用es6的写法接收一下父组件传过来的值
        let {name,kind}=this.props
        return (
            <div>
                <p>{name}</p>
                <p>{kind}</p>
            </div>
        )
    }
}