React 面向组件编程 (组件定义方式,重要属性[state,props,])

React 面向组件编程 (组件定义方式,重要属性[state,props,])
组件定义
方式一: ES6语法 类组件(复杂组件)

class MyComponent extends React.Component{
	render(){
		console.log(this)// MyComponent 实例对象
		return <h2>类组件(复杂组件)</h2>
	}
}

方式二: 工厂函数组件(简单组件)

function MyComponent(){
	return <h2>工厂函数组件(简单组件)</h2>
}

组件的渲染方式

• 语法: ReactDOM.render(虚拟DOM组件,真实dom)

ReactDOM.render(<MyComponent/>,domcument.getElementById('idValue'))

React 渲染组件dom基本套路(render就是干这个的)

a.React 内部会创建主键实例对象
b.得到包含虚拟DOM 并解析为真实DOM 
c.插入到指定的页面元素内部

React 中的三个重要属性
State(“状态机”)//简单粗暴的翻译

理解: 
1) state 是组件对象的最主要的属性, 值使对象
eg:
state{

}
2) 通过更新组件的state来更新对页面的显示(重新渲染组件)
eg :
事件中设置state的值 (React 固定套路)
例如点击事件触发渲染值 
class MyComponent extends React.Component{
	state {
		numDate: ''
	}

	testOnClick = () => {
		this.setState({
			numDate: numDate + 1;
		})
	}
}