React组件封装中三大核心属性详细介绍

更新时间：2022年09月15日 10:14:20 作者：雨橄

这篇文章主要为大家介绍了React组件实例三大属性state props refs使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1、介绍

React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。

2、state

概念

state是类组件的一个默认属性，用于标识类组件的状态，负责更新UI，让页面动态变化，当state变化时，组件将被重新渲染。

函数组件没有对象属性（babel默认开启了局部严格模式，函数内部this指向undefined），所以函数组件没有state属性，因此函数组件只负责展示静态页面。

state的值是json对象类型，可以维护多个key-value的组合。

演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>state属性</title>
    </head>
    <body>
        <div id="container"></div>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
        <script type="text/babel" >
            class ClassComponet extends React.Component{
                count = 0;
                //初始化state状态属性，值必须为对象
                state = {now: new Date()};
                //state对象里面的任何值变化，render都会被重新调用
                render(){
                    console.log(this.count++);
                    return (
                        <div>
                            <h1>当前时间：{this.state.now.toString()}</h1>
                            <button onClick={this.changeTime}>时间开始动起来</button>
                        </div>
                    );
                }
                changeTime = ()=>{
                    clearInterval(this.timer);
                    this.timer = setInterval(()=>{
                        //注意：状态必须通过setState进行更新，否则无效
                        this.setState({now: new Date()});
                    },1000);
                }
            }
            ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
        </script>
    </body>
</html>

3、props

概念

props是组件的一个默认属性，用于组件外部向组件内部传值，或者组件之间相互进行传值。

每个组件都有props属性（原理：函数组件通过参数往内部传值，类组件通过构造器往内部传值）。

props属性值是只读的，组件自身不能修改props属性值。

组件的props属性值可以进行类型、必要性限制，也可以设置属性默认值。

props与state区别

props是组件对外的，state是组件对内的。
state属性值是可变的，props属性值是只读的。

演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>props属性</title>
    </head>
    <body>
        <div id="container"></div>
        <div id="container2"></div>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
        <!-- 使用PropTypes需要引入prop-types -->
        <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
        <script type="text/babel" >
            class Person extends React.Component{
                render(){
                    //解构赋值取出props内部属性
                    const {name,age,gender} = this.props;
                    return (
                        <div>
                            <ul>
                                <li>姓名：{name}</li>
                                <li>性别：{age}</li>
                                <li>年龄：{gender}</li>
                            </ul>
                        </div>
                    );
                }
                //对props属性值进行类型、必要性的限制(此属性针对类层面，所以定义为static)
                //使用PropTypes需要引入prop-types
                static propTypes = {
                    name:PropTypes.string.isRequired, //限制name必传，且为字符串
                    sex:PropTypes.string,//限制sex为字符串
                    age:PropTypes.number,//限制age为数值
                    speak:PropTypes.func,//限制speak为函数
                }
                //对props属性值设置默认值，当外部未传递时就会采用默认值
                static defaultProps = {
                    sex:'男',//sex默认值为男
                    age:100 //age默认值为18
                }
            }
            //通过组件标签属性向组件对象内部传递props属性值
            ReactDOM.render(<Person name="张三" age={18} gender="男"/>,document.getElementById('container'))
            //通过展开运算向组件对象内部传递props属性值
            const person = {'name':'李四','age':20,'gender':'女'};
            ReactDOM.render(<Person {...person}/>,document.getElementById('container2'))
        </script>
    </body>
</html>

4、refs

概念

组件内的标签，可以在标签上定义ref属性，用于标识标签自身，组件内便可以通过ref属性值获取到操作页面的真实DOM。

refs种类

字符串形式的ref
回调函数形式的ref
React.createRef形式的ref

演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>refs属性</title>
    </head>
    <body>
        <div id="container"></div>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
        <script type="text/babel" >
            class ClassComponet extends React.Component{
                //React.createRef调用后可以返回一个容器，该容器仅能存储一个被ref所标识的节点
                msg3 = React.createRef()
                render(){
                    return (
                        <div>
                            输入框1：<input ref="msg1" type="text"/> <br/> {/*字符串形式的ref*/}
                            输入框2：<input ref={this.setInput2Ref} type="text"/> <br/> {/*回调函数形式的ref*/}
                            输入框3：<input ref={this.msg3} type="text"/> <br/> {/*React.createRef形式的ref*/}
                            <button onClick={this.showData1}>点击弹出输入框1内容</button> <br/>
                            <button onClick={this.showData2}>点击弹出输入框2内容</button> <br/>
                            <button onClick={this.showData3}>点击弹出输入框3内容</button> <br/>
                        </div>
                    );
                }
                showData1 = ()=>{
                    alert(this.refs.msg1.value);
                }
                //传递的参数就是标签位于页面的真实DOM，保存到组件中后续使用
                setInput2Ref = (realDOM)=>{
                    this.msg2 = realDOM;
                }
                showData2 = ()=>{
                    alert(this.msg2.value);
                }
                showData3 = ()=>{
                    //React.createRef创建的容器存储被ref所标识的节点，需要通过current属性获取
                    alert(this.msg3.current.value);
                }
            }
            ReactDOM.render(<ClassComponet/>,document.getElementById('container'))
        </script>
    </body>
</html>

5、父子组件

什么是父子组件

当组件之间嵌套使用时，外层组件就被称为父组件，内层组件就被称为子组件。

父子组件之间传值

这里借助state、props两大组件属性进行父子组件之间传值。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>父子组件间传值</title>
    </head>
    <body>
        <div id="container"></div>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
        <script type="text/babel" >
            //父组件
            class FatherComponet extends React.Component{
                name = "小头爸爸";
                state = {sonName:""}
                getSonName = (sonName)=>{
                    this.setState({sonName})
                    return sonName;
                }
                render(){
                    return (
                        <div>
                            <h2>我是父组件：{this.name}，我的儿子是：{this.state.sonName}</h2>
                            <SonComponet name={this.name} getSonName={this.getSonName}/> {/*引入子组件，且通过props属性给子组件传值*/}
                        </div>
                    );
                }
            }
            //子组件
            class SonComponet extends React.Component{
                name = "大头儿子";
                render(){
                    const {name:fatherName} = this.props;
                    return (
                        <div>
                            <h3>我是子组件：{this.name}，我爸爸是：{fatherName}</h3>
                            <button onClick={this.myNameSendFather}>子组件传值给父组件</button>
                        </div>
                    );
                }
                myNameSendFather = ()=>{
                    const {getSonName} = this.props;
                    //子组件调用父组件的函数，通过参数将值传递给父组件
                    getSonName(this.name);
                }
            }
            ReactDOM.render(<FatherComponet/>,document.getElementById('container'))
        </script>
    </body>
</html>

到此这篇关于React组件封装中三大核心属性详细介绍的文章就介绍到这了,更多相关React核心属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React forwardRef的使用方法及注意点
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧
2021-06-06
react-redux的connect与React.forwardRef结合ref失效的解决
这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React如何利用Antd的Form组件实现表单功能详解
这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
图文示例讲解useState与useReducer性能区别
这篇文章主要为大家介绍了useState与useReducer性能区别图文示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍
这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
React中使用react-player 播放视频或直播的方法
这篇文章主要介绍了React中使用react-player 播放视频或直播，本文教大家如何使用react框架及创建实例的代码,本文内容简短给大家介绍的非常详细，需要的朋友可以参考下
2022-01-01
React Native提供自动完成的下拉菜单的方法示例
这篇文章主要为大家介绍了React Native提供自动完成的下拉菜单的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react 实现图片正在加载中加载完成加载失败三个阶段的原理解析
这篇文章主要介绍了react 实现图片正在加载中加载完成加载失败三个阶段的,通过使用loading的图片来占位，具体原理解析及实现代码跟随小编一起通过本文学习吧
2021-05-05
React中useState的理解和使用案例
Hook是React16.8的新增特性,它可以让你在不编写class的情况下使用state以及其他的React特性,本文中讲解的useState就是React中的其中一个Hook,这篇文章主要给大家介绍了关于React中useState理解和使用的相关资料,需要的朋友可以参考下
2024-03-03
react-native之ART绘图方法详解
本篇文章主要介绍了react-native之ART绘图方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08