React中的Props和State

• 引言：React作为状态驱动的前端框架，十分注重数据和状态的管理。React的状态管理和组件通信，主要包括：
• 变与不变：不可变的属性（Props)和可变的状态(State）
• 组件间通信：基于Props的父子组件间的数据传递
• 上下文（Context），组件间不直接相互依赖的数据传递
• 复杂状态管理解决方案：Redux及Mobx

Props与State简介

Props

• 在实际开发需求中，可以确定的只有Article组件的DOM结构和样式，其文字内容应该随数据源不同而不同。此时，就需要使用React组件的Props。
• 如下展示父组件向子组件传递Props的过程
• Father.js

class Father extends React.Component {
	render() {
		return (
			<div>
				<Son name='Jack' age={25}/>
			</div>
		)
	}
}

• Son.js

class Son extends React.Component {
	render() {
		return (
			<div>
				I am {this.props.name} and I am {this.props.age} years old!
			</div>
		)
	}	
}

• 使用ES6 Class方式定义的组件，可以通过this.props获取父组件传入的Props。
• 注意：对于React组件，Props是只读的，也就是说，不要尝试去修改Props，如果在组件的代码中对Props进行修改会出现警告信息

State

• Props不可变，所以对数据进行任何修改，我们需要了解React另一个重要概念：状态（State)。
• 示例如下

class Article extends React.Component {
	constructor() {
		super();
		this.state = {
			/* 声明like属性，并赋值false */
			like: false
		}
	}
	handleLike = () => {
		/* 变更like属性的值 */
		this.setState({
			like: !this.state.like
		});
	}
	render() {
		return (
			<div>
				<h3>{this.props.title}</h3>
				<h3>{this.props.title}</h3>
				<h3>{this.props.title}</h3>
				<br/>
				/* 按钮让文字在like和unlike之间切换 */
				<button onClick={thishandleLike} {this.state.like ? "like" : "unlike"}
				</button>
			</div>
		)
	}
}	

• 组件中通过this.state获取State，而更新State使用的是React组件的内置方法setState()
• 注意：

1. 不要直接修改State。直接修改State可以给组件的State重新赋值，但是无法触发组件的重新渲染。
2. **更新State可能是异步的。**这意味着setState()不会立即改变State的值。示例如下

class Count extends React.Component {
	constructor() {
		super();
		this.state = {
			count: 0
		}
	}
	
	incrementMultiple  = () => {
		/* 
		看似对count进行了3次加1运算，但实际运行结果只进行了一次加1运算 
		为了实现进行3次加1操作，可以向setState()方法中传入函数。传入函数
		可以强制合并之前的异步修改结果
		this.setState((state, props) => {return {count: state.count + 1}})
		this.setState((state, props) => {return {count: state.count + 1}})
		this.setState((state, props) => {return {count: state.count + 1}})
		这里的合并时浅合并，只会更新修改的状态，其他状态保持不变
		*/
		this.setState({ count: this.state.count + 1});
		this.setState({ count: this.state.count + 1});
		this.setState({ count: this.state.count + 1});
	}

	render() {
		return (
			<div>
				{this.state.count}
				<button onClick={this.incrementMultiple.bind(this)}>
					increment
				</button>
			</div>
		)
	}
}

• 摘取自《React + Node.js 开发实战》