类组件

    1. import React from 'react'; // 组件必须导入
    3. // 使用es6的class实现react的组件，组件的首字母大写
    4. // 要实现组件，必须继承React的Component
    5. // 必须调用super()方法 ---- 类的构造方法中调用 ----- 如果组件中使用this
    6. // 子类必须在constructor方法中调用super方法，否则新建实例时会报错
    7. // 这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
    8. class Com extends React.Component {
    9.   constructor (props) { // 父类可以调用的所有的属性和方法都在props值中
    10.     super(props)
    11.   }
    13.   // render 函数 继承自父类，是react生命周期的一部分
    14.   // 返回一段HTML代码，表示当前组件的结构(相当于vue中的template)，HTML代码一般使用()包裹
    15.   // 返回的HTML结构的代码的语法 ---- jsx语法 --- javascript xml - 类xml语言
    16.   // 只有一个顶级标签
    17.   render () {
    18.     return (
    19.       <div>
    20.         hello world
    21.       </div>
    22.     )
    23.   }
    24. }
    26. // 暴露组件
    27. export default Com;

    函数组件

    1. import React from 'react'; // 组件必须导入
    3. // 箭头函数返回一段HTML代码
    4. // const Com = () => {
    5. //  业务逻辑  
    6. //   return (
    7. //     <div>
    8. //       hello react函数式组件
    9. //     </div>
    10. //   )
    11. // }
    13. // 箭头函数的自带返回值，返回()表示直接返回HTML代码
    14. const Com = () => (
    15.   <div>
    16.     hello react函数式组件-简写
    17.   </div>
    18. )
    20. // 暴露组件
    21. export default Com;