react的三大属性 state props  refs

  • props 来自外部属性
  • states 来自内部状态
  • refs 用于表示组件内某个元素

state基础（最重要的属性）

  • state是组件对象最重要的属性，其值是对象，即可以包含多个数据
  • 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）

state 操作　　

　　初始化状态　

constructor(props){

    super(props)

    this.state = { //this是一个组件对象

        stateProp1: value1,

        stateProp2: value2

    }

}

　　　

　　读取某个状态值

this.state.statePropertyName

　　

　　更新状态，组件界面更新

this.setState({

    stateProp1: value1,

    stateProp2: value2

})

state属性示例–监听点击事件，然后状态改变

定义组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

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

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">

       class Myname extends React.Component {

        constructor (props) {

                //调用父类的构造函数

                super(props)

                //1、初始化状态——固定写法

                this.state = {

                    isMyname: true

                  }

                //[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法

                this.change = this.change.bind(this)

            }

            //新增自定义方法:内部的this默认不是组件对象，而是undefined

            change () {

                //3、更新状态，需要让this指向组件对象

               this.setState({

                isMyname: !this.state.isMyname

              })

            }

            //重写组件类方法

            render () {

                const text = this.state.isMyname ? '我是ImagineCode' : '哈哈哈'

                return <h2 onClick={this.change}>{text}</h2>

              }

        }

        ReactDOM.render(<Myname />, document.getElementById('test'))

    </script>

</body>

</html>

props 属性

作用：复用

案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="test1"></div>

    <div id="test2"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

    //    1、定义组件:方式1

    function Person(props) {

        return (

            <ul>

                <li>name：{props.name}</li>

                <li>age：{props.age}</li>

                <li>sex：{props.sex}</li>

            </ul>

        )

    }

    //方式2：使用类方式定义组件（运行时请将其中一个方式注释）

    class Person extends React.Component {

        render() {

            return (

                <ul>

                <li>name：{this.props.name}</li>

                <li>age：{this.props.age}</li>

                <li>sex：{this.props.sex}</li>

            </ul>

            )

        }

    }

    //指定默认值

    Person.defaultProps = {

        name:'imaginecode',

        age: 17,

        sex:'woman'

    }

    //指定属性值的类型和必要性--使用prop-types.js库

    Person.propTypes = {

        name:PropTypes.string.isRequired,

        age:PropTypes.number.isRequired,

    }

    // 2、渲染组件标签

    const p1 = {

        name:'imaginecode',

        age: 19,

        sex:'man'

    }

    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));

    const p2 = {

        name:'imaginecode2'

    }

    ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2'));

    </script>

</body>

</html>

　　为组件指定默认属性值，组件属性defaultProps：

Person.defaultProps = {name:''}

　　

　　对props中的属性值进行类型限制和必要性限制,组件属性propTypes：

Person.propTypes = {

    name:PropTypes.string.isRequired,

    age:PropTypes.number.isRequired

}

　

refs 属性

（1）ref用于标识组件内部某个元素

（2）refs 是标识集合

　示例　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="text1"></div>

    <div id="text2"></div>

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script src="../js/prop-types.js"></script>

    <script type="text/babel">

        //1、先定义组件

        class InputComp extends React.Component {

            constructor(props) {

                super(props)

                //先对自定义函数进行bind操作

                this.showInput = this.showInput.bind(this);

                this.handleBlur = this.handleBlur.bind(this);

            }

            showInput(event) {

                console.log(this);

                alert(this.inputVal.value);

            }

            handleBlur(event) {//利用所有的事件均有一个event属性

                alert(event.target.value);

            }

            render() {

                return(

                    //this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素

                    <div>

                        <input type="text" ref={input => this.inputVal=input}/>

                        <button onClick={this.showInput}>点击获取值</button>

                        <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>

                    </div>

                )

            }

        }

        //2、渲染组件标签

        ReactDOM.render(<InputComp />,document.getElementById('text1'));

    </script>

</body>

</html>

react的三大属性的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  5. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  6. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

  9. React Native声明属性和属性确认

    属性声明 因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候 ...

随机推荐

  1. 关于在pycharm上使用git（保姆级别教程）

    文件 → 设置 先在pycharm上面登录github账号,版本控制 → GitHub → '+' → 通过GitHub登录 会自动跳转至浏览器,然后点击"Authorize in GitH ...

  2. [Java] Spring 使用

    背景 JavaEE 应用框架 基于IOC和AOP的结构J2EE系统的框架 IOC(反转控制):即创建对象由以前的程序员自己new 构造方法来调用,变成了交由Spring创建对象,是Spring的基础 ...

  3. Docker------Idea连接远程并生成和上传镜像

    1.Docker开启远程访问连接 备注: 1)Linux是CentOS7版本 2)安装Docker可参考: https://www.cnblogs.com/tianhengblogs/p/125202 ...

  4. CentOS 7系统启动后怎么从命令行模式切换到图形界面模式

    CentOS 7系统启动后怎么从命令行模式切换到图形界面模式原创传智播客官方博客 最后发布于2020-04-08 15:44:43 阅读数 88 收藏展开一.存在问题 在VMware虚拟机中成功安装c ...

  5. Ansible命令行方式执行

    Ansible ad-hoc 什么是ad-hoc? 临时命令,执行完不会保存,类似于批量执行命令. ansible的选项 -i # 指定主机清单 ansible rsync -m ping -i 1. ...

  6. SpringBoot使用protobuf格式的接口

    SpringBoot使用protobuf格式的接口 建立SpringBoot项目,pom.xml内容如下: <?xml version="1.0" encoding=&quo ...

  7. 2.2 CPU 上下文切换是什么意思？（下）

    怎么查看系统的上下文切换情况 过多的上下文切换,会把 CPU 时间消耗在寄存器.内核栈以及虚拟内存等数据的保存和恢复上,缩短进程真正运行的时间,成了系统性能大幅下降的一个 元凶. 使用 vmstat ...

  8. STM32低功耗总结

    之前自己做过一个项目的低功耗大约11ua,那时总结下有几点: 1.外设时钟必须切换为内部时钟: 2.不用的外设全部关闭,要用再开就是了: 3.浮空引脚必须配置为下拉: 4.硬件上的上拉.下拉电阻切记不 ...

  9. Python数学建模-01.新手必读

    Python 完全可以满足数学建模的需要. Python 是数学建模的最佳选择之一,而且在其它工作中也无所不能. 『Python 数学建模 @ Youcans』带你从数模小白成为国赛达人. 1. 数学 ...

  10. GO学习-(7) Go语言基础之流程控制

    流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的"经脉". Go语言中最常用的流程控制有if和for,而switch和goto主要是为了简化代码. ...