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，案例演示
<!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 所以需要强制绑定
