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

最新推荐文章于 2024-05-15 23:34:55 发布

掉头发类型的选手

最新推荐文章于 2024-05-15 23:34:55 发布

阅读量702

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/h360583690/article/details/123024976

版权

一，组件实例三大属性

（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
评论
组件三大属性，state,props,refs

一，组件实例三大属性（1）state查看状态：在写好的组件实例上有一个属性，state，就代表这个组件的状态。接下来我们写一个有状态的组件：<body> <div id="test"></div> <script type="text/babel"> // 创建组件 class Component extends React.Component { // 初始化,调
复制链接

扫一扫