React

React的props,state,ref三大属性详解

Posted by Zhang Tuanjie on 2019-07-10

React的三大属性详解(ref,state,props)

第一大属性–ref

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

  2. 在组件中可以通过this.refs.refName来得到对应的真实DOM对象

  3. 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)

    1
    2
    <input ref='username' />
    this.refs.username //返回input对象
  • 使用示例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    class Test extends React.Component {
    	  constructor (props) {
    	   super(props);
    	  }
    	  showMsg = () => { // 当点击 按钮 时，触发该事件 
    		const input = this.refs.msg;
    		alert(input.value);
    	  }
    	  blurMethod = (event)=> { //当失去焦点时，触发该事件，event.target的使用
    		const input = event.target;
    		alert(input.value);
    	  }
    	  render () {
    		return (
    		  <div>
    			<input type="text" ref="msg"/>
    			<button onClick={this.showMsg}>alert数据</button>
    			<input type="text" placeholder="失去焦点alert数据" onBlur={this.blurMethod}/>
    		  </div>
    		);
    	  }
    }

第二大属性–state

  1. state是什么
    • React 的核心思想是组件化，而组件中最重要的概念是State, State是一个组件的UI数据模型，是组件渲染时的数据依据。
  2. state的使用和更新
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    export default class Test extends React.Component {
    	constructor(props){
    		super(props)
    		this.state = { // 此处定义组件所需的所有state状态
    			name : props.name, // 在此处使用props,不必加this
    			addr : 'beijing',
    			habit : ['eat','sleep','bit doudou']
    		}
    	}
    	changeState = ()=>{ // 更改 state中的值
    		let {name, addr} = this.state;
    		name = 'xiaoming';
    		addr = 'shanghai';
    		this.setState({name,addr}) // 使用this.setState()方法更改state中的值
    	}
    	render(){
    		let {name, addr, habit} = this.state;
    		return(
    				<div>
    					<div>姓名:{name}</div>
    					<div>地址:{addr}</div>
    					<div>爱好:
    						<ul>
    							{
    								habit.map((item,i)=>{
    									return <li key={i}>{item}</li>
    								})
    							}
    						</ul>	
    					</div>
    					<button onClick={this.changeState}>改变状态</button>	
    				</div>
    			)
    	}	
    }

第三大属性–props

  • 每个组件对象都会有props(properties的简写)属性

  • 组件标签的所有属性都保存在props中

  • 内部读取某个属性值: this.props.propertyName

  • 作用: 通过标签属性从组件外向组件内传递数据(只读)

  • 可以对props中的属性值进行类型限制和必要性限制

  • 使用示例

    1
    <Person {...person}/> //父组件 {...person} 是ES6中的属性扩散
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // 导入对props属性值限制的包
    import ReactTypes from 'prop-types'
    export default class Child extends React.Component {
    	constructor(props){
    		super(props)
    	}
    	static defaultProps = { // 默认的属性值
    	  name: 'lisi',
    	  addr: 'beijing'
    	}
    	static propTypes = { // 对props的属性值进行限制
    	  name: ReactTypes.string,
    	  addr: ReactTypes.string
    	}
    	render(){
    		return(
    			<div>
    				{this.props.name} ---- {this.props.addr} // 通过this.props.XXXX来使用
    			</div>
    		
    		)
    	}
    }

    ** props还可以进行路由的编程式跳转和获取相匹配路径的值，请见之后的blog， react-router 的学习 **

state和props的区别

  • State是可变的，是一组用于反映组件UI变化的状态集合；
  • Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
  • 在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。



Tags
React
FRIENDS