前端开发react框架 - 组件

组件介绍：

1. 组件表示页面中的部分功能
2. 页面由组件组成
3. 组件特性：复用、独立、组合

组件创建方法：

• 函数式 函数名称必须以大写字母开头，必须有返回值表示该组件的结构，如果不返回值为null，表示不渲染任何内容

const Fn1 = function(){

return <div>我是新的组件</div>

}

const Fn2 = () => {

return <div>我是新的组件</div>

}

渲染组件用函数名作为组件标签名，组件可以是单标签也可以是双标签

ReactDOM.render(<Fn1/>, document.getElementById("#app"))

ReactDOM.render(<Fn2/>, document.getElementById("#app"))

• 类创建 使用ES6的class创建组件，类名也必须首字母大写，类组件应该继承React.component父类

class Fn extends React.Component{

render(){

return <div>class component</div>

}

}

• 创建独立的组件

import React from 'react' //引包

class Fn extends React.Component{ //定义组件

render(){

return <div>component demo</div>

}

}

export default Fn //导出组件

• 应用组件

import Fn from '@/component/Fn'

ReactDOM.render(<Fn/>,document.getElementById('#app'))