/*方式 1: 工厂函数组件(简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/*方式 2: ES6 类组件(复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return <h2>ES6 类组件(复杂组件)</h2>
}
}
ReactDOM.render(<MyComponent />, document.getElementById('example1'))
// 1) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
// 2) 读取某个状态值
this.state.statePropertyName
// 3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
// 1) 内部读取某个属性值
this.props.propertyName
// 2) 对 props 中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
// 3) 扩展属性: 将对象的所有属性通过 props 传递
<Person {...person}/>
// 4) 默认属性值
Person.defaultProps = {
name: 'Mary'
}
5) 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
handleFocus(event) {
event.target // 返回 input对象
}