React中的三大属性

一、前言：

　　属性1：state

　　属性2：props

　　属性3：ref 与事件处理

二、主要内容：

属性1：state

　　1，认识：

　　　　1) state 是组件对象中最重要的属性，值是一个对象（可以包含多个数组，有点像vue中的data属性）

　　　　 2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示

　　2，操作state通常要经历三个状态

1) 初始化状态:
constructor (props) {
   super(props)
   this.state = {
        stateProp1 : value1,
        stateProp2 : value2
   }
}

2) 读取某个状态值
this.state.statePropertyName

3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})

　　3，案例演示

　　　　 React中的三大属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="obj"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
                //自定义Like组件
        class Like extends React.Component{
                   //定义初始化状态
            constructor(props){
            super(props)  //交给父类去执行
            this.state={  //定义state属性，并添加一个isLikeMe数据
            isLikeMe:false

           }
                   
                   //强制绑定，让函数handleClick等于当前组件
           this.handleClick= this.handleClick.bind(this)

           }
                   //定义操作函数，注意函数里面的this是undefined
 
           handleClick(){
                   //更新state状态
           const isLikeMe = !this.state.isLikeMe  
           this.setState({
           isLikeMe
           })

           }

           render(){
                   //读取状态
           const {isLikeMe} = this.state
           return <h1 onClick={this.handleClick}>{isLikeMe ? '我喜欢你':'你喜欢我'}</h1>

           }

        }


          //渲染
        ReactDOM.render(<Like />, document.getElementById('obj'))
    </script>
</body>
</html>

　　　4，注意点：

　　　　　1）更新 state 状态定义的函数里面的 this 不是指向当前对象的，需要用 bind 强制绑定this为当前组件

　　　　　2）强制绑定 this ： this.handleClick = this.handleClick.bind(this)

属性1：props

　　1，理解：

　　　　1) 每个组件对象都会有 props 属性

　　　　2）组件标签中所以的属性都保存在 props 中

　　2，作用：

　　　1）通过标签属性从组件外向组件内传递变化的数据

　　　 2）组件内部不需要修改 props 数据

　　3，props 的操作：

//1）内部读取某个属性值

this.props.propertyName


//2) 对props中的属性值进行类型限制和必要性限制

方法一：新版本中已经被弃用
Person组件名：
Person.propTypes={

       name: React.PropTypes.string.isRequired,
       age:React.PropTypes.number.isRequired
}

方法二：
需要用到prop-types.js文件
Person.propTypes={
         name:PropTypes.string.isRequired

        }

//3）扩展属性：对象的所有属性通过props传递
<Person {...person} />   //默认传递了所有属性


//4)默认属性值
Person.defaultProps = {

     name:"Mary"

}


//5)组件类的构造函数，
constructor(props){

     super(props)
    console.log(props)//里面存放所有属性


}

　　4，举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="ul"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
        function List(props){

        return (
        <ul>
        <li>姓名：{props.name}</li>
        <li>年龄: {props.age}</li>
        <li>性别:{props.sex}</li>
        </ul>

        )

        }
        
        const person ={
        name:'xxm',
        age:18,
        sex:'女'
        }
    
       //设置默认属性    
        List.defaultProps={

        age:55,
        sex:"男"

        }

        //对类型进行限制和必要性限制
         List.propTypes={
         name:PropTypes.string.isRequired

        }
         //使用扩展属性
        ReactDOM.render(<List {...person}/>, document.getElementById('ul'))
    </script>
</body>
</html>

属性3：ref与事件处理

　　1，理解：

　　　　1）组件内的标签都可以定义 ref 属性来标识自己

　　　　　2）在组件中可以通过 this.msglnput 来的到真实的 DOM 元素

　　　　　3）作用：通过 ref 获取组件特定的标签对象，进行读取相关数据

//ref使用方式一：

<input type="text" ref="content"/>


//ref使用方式二：
<input type="text" ref={input=>this.input=input}/>

//input=>this.input=input 的含义是将当前的input 赋值给组件里面的input

　　　2，事件处理　　

　　　 1）通过onXxx属性指定组件的事件处理函数

　　2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

　　3）通过event.target可以得到发生事件的DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="obj1"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/prop-types.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        
        class MyComponent extends React.Component{

        constructor(props){
        super(props)
                 //给处理函数强制绑定this
        this.handleClick=this.handleClick.bind(this)
        this.handleBlur = this.handleBlur.bind(this)

        }


        handleClick(){

        alert(this.input.value)


        }

        handleBlur(event){

          alert(event.target.value)
        }

        render(){

        return (
              <div>
                  <input type="text" ref="content"/>
                  <input type="text" ref={input=>this.input=input}/>
                  <button onClick={this.handleClick}>点击按钮</button>
                  <input  type="text" placeholder="请输入数据" onBlur={this.handleBlur} />
              </div>
        )

        }

        }

        

        ReactDOM.render(<MyComponent />, document.getElementById("obj1"))
    </script>
</body>
</html>

三，总结

　　React中props和state都是存储数据的区别如下

　　　　1）state: 组件自身内部可变化的数据

　　　　2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改

　　注意点：

　　　　1）组件内置的方法中的this为组件对象，z

　　　　2) 在组件类中自定义的处理函数方法的this默认为null 所以需要强制绑定

React中的三大属性

相关推荐