react入门 笔记 -- 自定义组件

自定义组件（Component）

方式1：工厂函数组件（简单组件）

<script type="text/babel">
    // 1.定义组件
    //     方式1：工厂函数组件（简单组件）
    function MyComponent() {
        return <h2>方式1：工厂函数组件（简单组件）</h2>
    }
    // 2.渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example1'))
</script>

方式2：ES6类组件（复杂组件）

  class MyComponent2 extends React.Component{
        render(){
            return <h2>方式2：ES6类组件（复杂组件）</h2>
        }

理解：
state 是组件对象最重要的属性,值是对象(可以包含多个数据)
组件被称为"状态机",通过更新组件的state来更新对应的页面显
示(重新渲染组件)
操作：
初始化状态

constructor (props) {
	super(props)
	this.state = {
		stateProp1 : value1,
		stateProp2: value2
	}
}

2)读取某个状态值

this.state.statePropertyName

3)更新状态—>组件界面更新

this.setState({
	stateProp1 : value1,
	stateProp2 : value2
}