二,react组件

使用react就是在使用react的组件

组件：可复用性，独立性，可组合性

函数组件

注意：
1.函数名必须大写字母开头
2.函数组件必须有返回值,表示组件结构

function Fn(){
    return(
        <div>函数组件</div>
    )
}

//es6写法:
const Fn = ()=><div>函数组件</div>

ReactDOM.render(<Fn></Fn>,document.getElementById('root'))//函数名作为标签  渲染

例

---

类组件

使用es6语法的class创建的组件

注意:
1.类组件应该继承React.Compontent父类
2.类组件必须提供render（）方法
3.render方法里必须用return（）返回值

class Fn extends React.Component{
   render(){
       return(
            <div>类组件</div>
       )
          
       
   }
}

一般我们一个组件写一个js文件,然后需要用那个组件的时候导入那个组件

image.png 例

区别	函数组件	类组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

类组件的性能消耗比较大因为需创建实例