React 面向组件化编程

React 面向组件化编程

面向对象----> 面向模块 ----> 面向组件

套路：

注意:

组件名必须大写开头；

只能有一个根标签；

<input />虚拟DOM 元素必须有结束标签

方式1. 工厂函数组件 (简单组件)

• function MyComponent(){    // 只能 大写开头，区别于普通函数
      return <h2>工厂函数组件(简单组件)</h2>
  }
  
  // 渲染函数组件标签
  // 内部直接调用 工厂组件函数 得到虚拟组件函数
  ReactDOM.render(<MyComponent/>, document.getElementById("outer"))

方式2： ES6 类组件 (复杂组件)

• class MyComponent2 extends React.Component {
      // 1. 必须继承
      // 2. 必须大写开头
      // 3. 必须重写 render 方法, 指定 return 返回值
      render (){
          return <h2>ES6类组件(复杂组件)</h2>
      }
  }
  
  // 渲染类组件标签
  // 内部会自动创建类的实例，并调用其 render() 方法得到需要渲染的虚拟 DOM
  React.render(<MyComponent/>, document.getElementById("outer"));

5

500

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5

5