【React】归纳篇(四)组件的三大属性之 state | props | refs 属性

在这里插入图片描述
再次来回顾下 :
组件化编码两步走:

  • 1、定义组件(两种方式)
  • 2、渲染组件标签

组件的三大属性之 state 属性(最重要的属性)

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属性示例–监听点击事件,然后状态改变

1、定义组件

<!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'));   
    /* ...的作用,一种语法糖(简洁写法)
        1、打包
        如,function fn(...as) {} fn(1,2,3); //将1,2,3放入as作为数组
        2、解包
        const arr1 = [2,3,4]; const arr2 = [1,...arr1,5]; 
    */
    // 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:
    15.5版本后需要引入prop-types库
Person.propTypes = {
	name:PropTypes.string.isRequired,
	age:PropTypes.number.isRequired
}

组件的三大属性之 refs 属性

  • ref用于标识组件内部某个元素
  • 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="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、定义组件
        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('test1'));
    </script>
</body>
</html>

小结组件属性

props 和 state 对于一个组件来讲都是数据的来源,而 state 又可以通过 props 传递给子组件,这像是一个鸡生蛋蛋生鸡的问题:到底谁是数据的源头 ?答案是 state,而且是广义的 state:它可以是 react 组件树中各级组件的 state,也可以是 react 组件树外部由其他 js 数据结构表示的 state。归根结底,props 是用来传导数据的,而 state 是数据改变的源泉。

  • props 来自外部属性
  • states 来自内部状态
  • refs 用于表示组件内某个元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值