React笔记06——React 的Props, State 属性与 render 函数

创建一个新的组件Counter.js以及其子组件Child.js来理解这些概念。

例子：实现点击增加按钮，下面的数字跟着增加的效果。

组件在第一次渲染时（也就是Counter组件被js调用渲染到页面中时），render函数会被默认执行一次；当state或props数据变更的时候，render函数会被重新执行。

//Counter.js
import React,{ Component,Fragment } from 'react';
import Child from './Child'

class Counter extends Component{
	constructor(props) {
		super(props);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.state = {
			counter:1
		}
	}
	handleBtnClick(){
		const newCounter = this.state.counter + 1;
		this.setState({
			counter:newCounter
		});
	}
	render() {
		return (
			<Fragment>
				<button onClick = {this.handleBtnClick}>增加</button>
				<Child number = {this.state.counter}/>
			</Fragment>
		)
	}
}

export default Counter;

//Child.js
import React,{ Component,Fragment } from 'react';

class Child extends Component{
	render() {
		return (
				<div>{ this.props.number}</div>
		)
	}
}

export default Child;