React_5 React组件

React组件的创建

1、使用函数创建组件

函数组件：使用JS的函数（或箭头函数）创建的组件；

function Hello(){
    return (
        <div>这个是一个函数组件</div>
    )
}
//或
const Hello=()=>{
    return <div>这个是一个函数组件</div>
}
ReactDOM.render(<Hello/>,document.getElementById('root'));

以上便是一个简单的函数组件；

函数组件的创建有一些注意项：

1. 函数名称必须以大写字母开头；

2. 函数组件必须有返回值return，表示该组件结构；

3. 返回值可以为 null ，表示不渲染任何内容；

4. 渲染函数组件时，使用函数名作为组件标签名；

2、使用类创建组件

类组件：使用ES6的class创建的组件；

class Hello extends React.Component{
    render(){
        return <div style={{color:'red'}}>这个是一个类组件</div>
    }
}
ReactDOM.render(<Hello/>,document.getElementById('root'));

类组件的创建也有一些注意项：

1. 函数名称必须以大写字母开头；

2. 类组件应继承(extends)  React.Compontent父类，从而可以使用父类中提供的方法或属性；

3. 类组件必须必须提供render()方法；

4. render()方法必须有返回值，表示该组件的结构；

5. 返回值可以为 null ，表示不渲染任何内容；

3、将组建抽离至单独JS文件

一般一个项目中会用到很多组件，这时我们一般不可能将这些组件放在同一个js文件内，所以我们需要将组件按照功能模块抽离至单独js文件中；

步骤：

1.创建一个新的js文件；

2.导入React；

3.创建组件；

4.导出该组件；

import React from "react";
class Hi extends React.Component {
    render(){
        return <div>这个一个单独的组件</div>
    }
}
// 导出该组件
export default Hi;

5.在使用该组件的页面引入该组件并渲染到页面

import Hi from './view/hi';
ReactDOM.render(<Hi/>,document.getElementById('root'));