React的三大属性state、props、refs

最新推荐文章于 2022-05-29 17:45:22 发布

er2025166

最新推荐文章于 2022-05-29 17:45:22 发布

阅读量88

点赞数

文章标签： react

本文链接：https://blog.csdn.net/er2025166/article/details/119894762

版权

本文详细探讨了React中的三个核心属性：state、props和refs。针对state，介绍了其在组件状态管理中的作用；props则作为组件间传递数据的方式被讨论；接着讲解了如何使用refs，特别是推荐使用回调型，以应对未来可能的弃用变化；同时强调避免过度使用refs，并提到了createRef的用法；最后，简述了函数组件中如何利用这些属性。

摘要由CSDN通过智能技术生成

1.state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        //创建组件
        class Weather extends React.Component{
            state = {isHis:true}
            render(){
                const {isHis} = this.state
                return <h1 onClick={this.dome}>今天天气很{isHis ? '炎热' : '凉爽'}</h1>
            }
            //自定义方法 要用赋值语句的形式+箭头函数
            //因为写成普通方法this会成defined,箭头函数它本身没有对象他会找他的上级，就会找到 Weather 的实例化
            dome =()=>{
                //状态不能直接修改，必须要通过setState API进行修改
                this.setState({isHis:!this.state.isHis})
            }
        }
        //渲染组件到页面--
        ReactDOM.render(<Weather/>,document.getElementById('text'))
    </script>
</body>
</html>

2.props

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        //创建组件
        class Person extends React.Component{
            //对属性进行类型，必要性的限制
            static propTypes = {                   //这里的p是小写
                name:PropTypes.string.isRequired,  //这里的P是大写
                age:PropTypes.number,              //限制age为number
                speak:PropTypes.func               //限制speak为函数
            }
            //设置默认值
            static defaultProps = {
                age:18
            }
            render(){
                console.log(this)
                const {name,age} = this.props
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{age}</li>
                    </ul>
                )
            }
        }

        //渲染到页面
        const p = {name:'小红'}
        //这里 ... 扩展运算符 ReactDOM.render(<Person name = '小兰' age = '12'/>,document.getElementById('text')) 的语法糖
        ReactDOM.render(<Person {...p} speak={speak}/>,document.getElementById('text'))
        function speak(){
            console.log("说话")
        }
    </script>
</body>
</html>

3.refs 推荐使用回调型，虽然更新过程中会执行两次，但官方已经说名无关紧要，而字符串型再未来的版本中可能会被弃用

不要过度使用refs能避免尽量避免

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Dome extends React.Component{
            showDate = ()=>{
                const {input1} = this
                console.log(input1.value)
            }
            showDate1 = ()=>{
                const {input2} = this
                console.log(input2.value)
            }
            
            render(){
                return(
                    <div>
                        {/*字符串型
                        <input ref='input1' type='text' placeholder='点击按钮提示数据'/>&nbsp;
                        <button onClick={this.showDate}>点我提示左侧的数据</button>&nbsp;
                        <input ref='input2' onBlur={this.showDate1} type='text' placeholder='失去交点提示数据'/>
                        */}

                        {/*
                        回调型
                        完整写法{(c)=>{this.input1=c}}
                        简写{c => this.input1 = c}
                        内联方式写时会出现问题,再更新过程中会被执行2次,第一次会是null
                        <input ref={c => this.input1 = c} type='text' placeholder='点击按钮提示数据'/>&nbsp;
                        <button onClick={this.showDate}>点我提示左侧的数据</button>&nbsp;
                        <input ref={c => this.input2 = c} onBlur={this.showDate1} type='text' placeholder='失去交点提示数据'/>
                        */}
                        
                        
                    </div>
                )
            }

            
            render(){
                return(
                    <div>
                        
                    </div>
                )
            }

        }
        ReactDOM.render(<Dome/>,document.getElementById('text'))
    </script>
</body>
</html>

4.createRef

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component{
            /*
                React.createRef调用后可以返回一个容器,该容器可以存储被ref所标注的节点,该容器是 '专人专用'
            */
            ondome = ()=>{
                alert(this.myRef.current.value)
            }
            myRef = React.createRef()
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text"/>
                        <button onClick={this.ondome}>点我</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('text'))
    </script>
</body>
</html>

5. 函数组件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="text"></div>
    <!-- React核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        function Str(props){
            const {name,age} = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                </ul>

            )
        }
        Str.propTypes = {                      //这里的p是小写
            name:PropTypes.string.isRequired,  //这里的P是大写
            age:PropTypes.number,              //限制age为number
            speak:PropTypes.func               //限制speak为函数
        }
        //设置默认值
        Str.defaultProps = {
            age:18
        }
        ReactDOM.render(<Str name='小兰' age='12'/>,document.getElementById('text'))
    </script>
</body>
</html>

er2025166

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的三大属性state、props、refs

1.state<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫