react笔记之state(状态)

责编:menVScode 2017-07-09 21:48 阅读(751)

        state(状态):这里是指组件的内部状态。

QQ截图20170709213143

        比如上图所显示的一些个人信息不能成为状态,这些只是props传递过来的数据并渲染在页面上,没有做任何变化。其中,点击"红心"的图标,会显现处两种不同的状态。这意味着其内部状态,可以通过某些交互动作,将其改变。现在来实现这种行为:

import React,{Component} from 'react';
import PropTypes from 'prop-types';
let propTypes = {
	imgSrc:PropTypes.string,
	name:PropTypes.string.isRequired,//isRequired代表一定要有值传进来
	meta:PropTypes.string,
	desc:PropTypes.string,
	joined:PropTypes.number,
	likeNum:PropTypes.number
}

let contextTypes = {
	nick:PropTypes.string
}
export default class Card extends Component{
	constructor(props){
		super(props);
		this.state = {
			isHeartOn:false,
			year:props.joined
		}
		this.doChange = this.doChange.bind(this);
		this.doYearAdd = this.doYearAdd.bind(this);
	}
	doYearAdd(){
		let {year} = this.state;
		this.setState({
			year:year+1
		})
	}
	doChange(){
		let {isHeartOn} = this.state;
		this.setState({
			isHeartOn:!isHeartOn
		})
	}
	render(){
		//获取定义好的跨组件数据
		let {nick} = this.context;
		//console.log(nick)
		let {imgSrc,name,meta,desc,joined,likeNum} = this.props;

		let heartClass = this.state.isHeartOn ? '' : 'empty';

		let {year} = this.state
		return(
			<div className='ui card'>
				<div className='image'>
					<img src={imgSrc} />
				</div>
				<div className='content'>
					<div className='header'>{name}</div>
					<div className='meta'>
						<a href=''>{meta}</a>
					</div>
					<div className='description'>{desc}</div>
				</div>
				<div className='extra content'>
					<span onClick={this.doYearAdd} className='right floated'>{nick} in {year}</span>
					<span>
						<i onClick={this.doChange} className={`${heartClass} heart icon`}></i>{`${likeNum}  Like`}
					</span>
				</div>
			</div>
		)
	}
}
//挂载到组件上
Card.propTypes=propTypes;
Card.contextTypes=contextTypes;

        首先在constructor()构造函数中,用this.state初始化状态,通过doChange函数内部的this.setState改变初始化的值。

        探究组件内this指向问题

        组件内render()方法是组件实例去调用的,因此render()方法里面的this还是组件;箭头函数内的this指向是根据上下文来判断的。如果this.doChange.bind(this)不绑定this的话,就会出错。

        state更新可能会存在异步,官网解读:https://facebook.github.io/react/docs/state-and-lifecycle.html

        可以按如上代码方式来解决可能会发生的异步问题,也可以官网的方式来决解:

// es6的写法
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
We used an arrow function above, but it also works with regular functions:

// es5的写法
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});
标签: state react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码