【第2节 React面向组件编程】自定义组件

自定义组件

第一步，定义组件

/*方式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'))
ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))

3、 注意

• 组件名必须首字母大写
• 虚拟DOM元素只能有一个根元素
• 虚拟DOM元素必须有结束标签

4、render()渲染组件标签的基本流程

1. React内部会创建组件实例对象
2. 得到包含的虚拟DOM并解析为真实DOM
3. 插入到指定的页面元素内部