类组件继承自React的Component类，具有一个组件的完整生命周期
以下生命周期适用于React0.14.9版本，以上版本生命周期发生较大变化
componentDidMount:组件初次挂载到页面时执行，只会在组件挂载时执行一次
挂载的含义以后再进行解释，现在我也理解的不是很清除，也希望大神们可以给我留言教教我
组件的数据来源
组件的数据来源有两种：Props，State
Props来源于实例化组件时传递给组件的参数
<SimpleComponent
title = "Simple Component"
defaultText = "Type here"
/>
State
State以对象的形式保存在组件上,通常是调用方法setState方法去改变组件的state。
setState(updater,[,callback])方法接受两个参数，返回的是一个要更新this.state的对象，或者返回改对象的函数，callback是更新完成后的执行的回调函数。
setState是一个批量异步的操作，react会在短时间内批量更新，callback函数调用时才会访问到更新后的state
组件方法
setState():更新组件的State，有机会触发render()执行
forceUpdate():强制执行一次render()
数据传递
先上一段代码
import * as React from 'react'
import * as ReactDOM from 'react-dom'
class SimpleComponent extends React.Component {
state = {}
componentDidMount() {
this.setState({text: this.props.defaultText})
}
render() {
return (
<div>
<h1>{
this.props.title
}
</h1>
<div>
<input
type="text"
value={this.state.text}
onChange={(event) =>this.updateText(event.target.value)}
/>
</div>
<div>
{this.state.text }
</div>
</div>)
}
updateText(text)
{
this.setState({text: text})
}
}
class App extends React.Component {
state = {
title: 'initial title'
}
componentDidMount() {
setTimeout(() => {
this.setState({title: "title changed"})
}, 1000)
}
render(){
return(<SimpleComponent
title={this.state.title}
defaultText="Type here"
/>)
}
}
ReactDOM.render(
<div>
{/*<SimpleComponent*/}
{/*title = "iiii"*/}
{/*defaultText = 'iuiuiihi'*/}
{/*/>*/}
<App />
</div>,
document.querySelector("#root")
)
运行的最终结果如图：
image.png
在
App挂载时，界面显示initial title，随后会触发一个定时器，1s之后显示title changed。写代码时要注意，render()函数一定要有return语句，不然运行后界面无内容
子组件与子元素
子组件是指在一个组件的render()函数中使用到的另一个组件，比如App中使用了SimpleComponent，则SimpleComponent是App的子组件。
子元素是JSX中组件的嵌套关系,input是div的子元素
<div>
<input
type="text"
value={this.state.text}
onChange={(event) =>this.updateText(event.target.value)}
/>
</div>
无状态组件
通常为纯函数形式，返回JSX片段。无状态组件没有state，接受props作为函数参数,通常进行一些数据展示的功能
