组件三大属性,state,props,refs

一,组件实例三大属性

(1)state

查看状态:在写好的组件实例上有一个属性,state,就代表这个组件的状态。

接下来我们写一个有状态的组件:

<body>
    <div id="test"></div>

    <script type="text/babel">
        // 创建组件
        class Component extends React.Component {
            // 初始化,调用了1次
            constructor(props) {
                super(props)
                // 初始化状态
                this.state = {size: false}
                // 解决changeSize中this指向问题,类中的changeSize方法指向实例中
                this.changeSize = this.changeSize.bind(this)
            }
            // 调用了1+n次,1是初始化的那次,每次点击更新都会调用一次
            render() {
                // console.log(this)
                return <h1 onClick={this.changeSize}>{this.state.size ? '大' : '小'}</h1>
            }
            // 调用了n次,更改了几次调用几次
            changeSize() {
                // changSize放在Component的原型对象上,供实例使用
                // 由于changeSize是作为onClick的回调,所以不是通过实例调用的,属于直接调用
                // 类中的方法默认会开启局部严格模式,所以changeSize的this指向为undefined
                //console.log(this)

                // 获取原来的size值
                const size = this.state.size
                // 状态不能直接更改,要借助react中的一个内置APIsetState进行更改
                this.setState({size: !size})
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Component/>, document.getElementById('test'))
    </script>
</body>

         当点击组件时,如果显示为‘小’则变为‘大’,如果显示为‘大’变为‘小’,根据state的值去改变,因为这儿只用到两种状态,所以我选择true和false。当state的值为true时为‘大’,当state的值为false时为‘小’。

        在这个过程中,调用了render 1+n次,1是初始化的那次,每次点击更新都会调用一次,changeSize调用了n次,更改了几次调用几次。

        因为刚开始组件是无状态的null,所以我们要先初始化,给state赋一个值,当一个class组件创建后,constructor会被首先调用,所以在constructor中可以来初始化state值,然后使用render()接收输入的数据并返回需要展示的内容,这时页面上已经有了显示的内容,只是还没有添加点击事件。

        接下来写一个点击事件changeSize,放在创建好组件的原型对象上,供实例使用,在前面说到一个类组件是由react自动帮忙new出一个该类的实例,所以不知道这个实例是什么,也不能通过实例去调用。在render()的h1标签中,点击事件changeSize作为onClick的回调,不是实例调用,属于直接调用,所以changeSize事件里的this应该指向全局window,又因为类中的方法会自动开启局部严格模式,所以this指向undefined。

        接下来要做的事就是要改变点击事件changSize中this的指向,在construct中添加this.changeSize = this.changeSize.bind(this),将类中的方法指向实例中。

使用后:

        用原型上的changeSize生成一个新的changeSize挂载到实例上,实例上也有了这个方法。

(2)props

        props是react的又一个属性,它也放在react实例中。

<body>
    <div id="test"></div>

    <script type="text/babel">
        // 创建类式组件
        class Person extends React.Component {// 继承react中一个内置的类
            
            render() {
                // 可以解构
                const {name} = this.props
                return (
                    <ul>
                        <li>{name}</li>    
                        <li>{this.props.age}</li>    
                            
                    </ul>
                )
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Person name="zs" age="18"/>, document.getElementById('test'))
    </script>
</body>

         他的值在渲染页面的时候直接传进去。

        在进行开发时,数据应该是从后台传来的,一条数据中的属性可能会比较长,当我们拿到数据传值时应该用到拓展运算符:

        const person1 = {
            name: "zs",
            age: "18"
        }
        // 渲染组件到页面
        ReactDOM.render(<Person {...person1}/>, document.getElementById('test'))

        将其中的属性展开传进去。

props限制

        为了在开发中可以方便的处理数据,应该给数据添加一些限制,例如,姓名可以限制为string类型,年龄为number类型。

<script type="text/babel">
        // 创建类式组件
        class Person extends React.Component {// 继承react中一个内置的类

            render() {
                // 可以解构
                const {name} = this.props
                return (
                    <ul>
                        <li>{name}</li>    
                        <li>{this.props.age}</li>    
                        <li>{this.props.sex}</li>    
                    </ul>
                )
            }
        }
        // 对标签属性进行类型,必要性的限制
        /*
        Person.propTypes = {
            name: React.PropTypes.string,
        }
        */
        Person.propTypes = {
            // string类型  必传
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
        }
        // 指定默认标签属性值
        Person.defaultProps = {
            // 默认性别为男
            sex: '男',
            age: 18
        }
        // 渲染组件到页面
        ReactDOM.render(<Person name="zs" age={18}/>, document.getElementById('test'))

    </script>

        给类添加一个属性,propTypes,react在代码中找到这个属性,就知道里面的代码是添加的限制。在上面代码中注释了一种方法name: React.PropTypes.string,这种方法中的PropTypes是react中的一个内置的对象,但在React v15.5开始已经弃用了。在之后的版本中将这部分分出去了一个js库,用这个库进行限制。

        name: PropTypes.string.isRequired,中,string代表这个属性的值为string类型,isRequired代表为必传项。我们还能给其中一些属性设置默认值,如果没有传值,则使用默认值。

        自定义一个组件,希望它的业务代码都在组件的内部,所以应该把props的限制放到组件的内部。一个组件可以new多个实例,每个实例都需要用到限制,所以限制是加到类上的,用到关键字static。

class Person extends React.Component {// 继承react中一个内置的类
           
            // props是只读的,不能修改

            render() {
                // 可以解构
                const {name} = this.props
                return (
                    <ul>
                        <li>{name}</li>    
                        <li>{this.props.age}</li>    
                        <li>{this.props.sex}</li> 
                    </ul>
                )
            }

            // 对标签属性进行类型,必要性的限制
            // 给类加属性
            static propTypes = {
                // string类型  必传
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
            }
            // 指定默认标签属性值
            static defaultProps = {
                // 默认性别为男
                sex: '男',
                age: 18
            }
        }

(3)refs

字符串形式

        组件内的标签可以定义ref属性来标识自己。给元素添加的ref属性可以显示在实例中,如果有多个元素添加了ref属性,都会以 “ref的值:添加元素标签”  的形式存储在实例中。

<script type="text/babel">
        // 创建类式组件
        class Demo extends React.Component {// 继承react中一个内置的类
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮"/>
                        <button onClick={this.test1}>点击</button>  
                        <input ref="input2" type="text"/>     
                    </div>
                )
            }
            // 点击按钮事件
            test1 = () => {
                console.log(this)
                // 取到需要操作的节点
                const {input1} = this.refs
                // 显示节点input输入框中的值
                alert(input1.value)
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>

         这是最简单的一种使用方法,但官网不建议使用这种方法,可能会出现一些问题。这种使用方法已经过时并可能会在未来的版本移除。还有其他两中方法,回调函数或createRef的方法。

 

 回调函数形式

         这种直接在元素的ref属性位置写一个箭头函数,这种方法叫内联式

<script type="text/babel">
        // 创建类式组件
        class Demo extends React.Component {// 继承react中一个内置的类
            render() {
                // 回调形式的react会主动帮忙调用ref
                return (
                    <div>
                        <input ref={(currentNode) => {this.input1 = currentNode}} type="text" placeholder="点击按钮"/>
                        <button onClick={this.test}>点击按钮</button>      
                    </div>
                )
            }
            // 点击按钮事件
            test = () => {
                console.log(this)
                const {input1} = this
                alert(input1.value)
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>

        当代码运行到ref语句的时候,react会主动帮忙调用ref。react的实例上会多一个函数。

         回调函数还有一种写法,将 ref 的回调函数定义成 class 的绑定函数的方式

在元素上绑定一个函数,然后将函数的内容写到外面。

<script type="text/babel">
        // 创建类式组件
        class Demo extends React.Component {// 继承react中一个内置的类
            render() {
                // 回调形式的react会主动帮忙调用ref
                return (
                    <div>
                        <input ref={this.saveInput} type="text"/>
                        <button onClick={this.test}>点击按钮</button>        
                    </div>
                )
            }
            // 点击按钮事件
            test = () => {
                const {input1} = this
                alert(input1.value)
            }
            // class绑定函数的方式
            saveInput = (currentNode) => {
                this.input1 = currentNode;
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>

        这两种方法有一些区别,内联式在更新的过程中会被执行两次,有一个清空的过程,class绑定函数的方式只执行一次,官网上说大多数情况下它是无关紧要的。就是两种方法都能用,对代码没有影响。

         执行两次的这个结果只用上面写了的代码演示不出来,因为他们只在初始化的时候执行一次,而且在事件交互的时候没有更新render(),只在更新过程中才会被执行两次。

        上面在说组件第一个属性state的时候写到了  在切换状态时,调用了render 1+n次,1是初始化的那次,每次点击更新都会调用一次,给上面代码添加一个状态,可以进行render的更新。

<script type="text/babel">
        // 创建类式组件
        class Demo extends React.Component {// 继承react中一个内置的类
            state = {size: false}
            render() {
                // 回调形式的react会主动帮忙调用ref
                return (
                    <div>
                        <input ref={(currentNode) => {this.input1 = currentNode;console.log("内联式",currentNode)}} type="text" placeholder="点击按钮"/>
                        <button onClick={this.test}>点击按钮</button>   
                        <h1 onClick={this.changeSize}>{this.state.size ? '大' : '小'}</h1>   
                    </div>
                )
            }
            // 点击按钮事件
            test = () => {
                // console.log(this)
                const {input1} = this
                alert(input1.value)
            }
            // 状态的点击事件
            changeSize = ()=> {
                const size = this.state.size
                this.setState({size: !size})
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>

        点击切换时在控制台输出:

        第一次输出是初始化的时候输出 ,切换状态进行更新,每更新一次都会先传入null,再传入参数DOM元素。

createRef API形式

<script type="text/babel">
        // 创建类式组件
        class Demo extends React.Component {// 继承react中一个内置的类
            /*
                createRef调用后返回一个容器,这个容器可以存储被ref所标识的节点
                只能放一个,后放入的会将前面的覆盖
                用几个需要创建几个
            */
            myRef = React.createRef()
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮"/>
                        <button onClick={this.test}>点击按钮</button>       
                    </div>
                )
            }
            // 点击按钮事件
            test = () => {
                console.log(this)
                alert(this.myRef.current.value)
            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
    </script>

        用react调用createRef,调用后会返回一个容器,这个容器中存储被ref标识的节点。创建的myRef会放到实例中,自己有一个名字current,值为被标识的节点,render中this指向实例,使用this.myRef.current.value可以取到输入框中输入的值。

         但这个容器只能放一个,如果有两个节点都绑定了同一个容器,后面的会将前面的挤掉,只显示一个。如果要绑定多个节点,必须调用多次creatRef,需要几个创建几个,比较麻烦。所以经常使用绑定ref的方式是回调函数的方式。

二,函数式组件的三大属性

        在上面的内容中一直在强调实例,只有类才有实例,函数没有,所以在React16.8.0版本之前,函数式组件不能使用state和refs,但可以使用props,是因为函数本来就可以传递参数。

        Hook是React16.8.0版本增加的新特性,新语法,可以在函数组件中使用state,refs以及其他的React特性(生命周期钩子函数)。

        State Hook: React.useState()

import React from "react"
import  ReactDOM  from "react-dom"

function Component() {

    const [count, setCount] = React.useState(0)

    function add() {
        // 第一种
        // setCount(count+1)
        // 第二种  传入一个函数
        setCount((count)=>{return count+1})
    }

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={add}>+1</button>
        </div>
    )
}

export default Component

        State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

        const [xxx, setXxx] = React.useState(initValue)  

useState()说明:

        参数: 第一次初始化指定的值在内部作缓存

        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

setXxx()2种写法:

        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

        Ref Hook: React.useRef()

import React from "react"
import  ReactDOM  from "react-dom"

function Component() {

    const myRef = React.useRef()

    function show() {
        alert(myRef.current.value)
    }

    return (
        <div>
            <input type="text" ref={myRef} />
            <button onClick={show}>显示数据</button>
        </div>
    )
}

export default Component

        Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据。

        作用:保存标签对象,功能与React.createRef()一样。

        函数式组件可以使用state,refs是因为React16.8.0版本增加了新特性Hook,可以使用props是因为函数本来可以传递参数。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: React中的三大属性propsstaterefs。\[1\] props组件属性,可以通过this.props来访问。它可以用来传递数据给组件,并且可以对属性值进行类型限制和必要性限制。可以使用PropTypes来进行属性类型的限制,也可以设置默认属性值。\[1\] state组件的状态,可以通过this.state来访问。它用于存储组件内部的数据,并且可以通过setState方法来更新状态。状态的改变会触发组件的重新渲染。\[2\] refs是用来标识组件内部标签的引用。它可以通过字符串形式或者React.createRef()来定义。通过refs可以获取到标签的真实DOM节点或者组件实例。\[3\] 这三大属性React中非常重要,可以帮助我们管理组件的数据和交互。 #### 引用[.reference_title] - *1* [react三大属性](https://blog.csdn.net/weixin_30617797/article/details/102410491)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [React —— React组件三大属性state,props,ref)](https://blog.csdn.net/Bonsoir777/article/details/127568414)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值