React入门四:React组件的使用

324 阅读2分钟

这是我参与8月更文挑战的第三天

1.组件介绍

  • 使用React就是在使用组件
  • 组件表示页面中的部分功能
  • 组合多个组件实现完整的页面功能
  • 特点:可复用、独立、可组合 在这里插入图片描述

2. 组件的两种创建方式

2.1 使用函数创建组件

  • 使用js的函数(箭头函数)创建的组件

  • 约定1:函数名称必须以大写字母开头              如果是小写字母开头则报错 在这里插入图片描述

  • 约定2:函数组件必须有返回值,表示该组件的结构 (return null 也可以 只是什么都不渲染,但是不会报错) 在这里插入图片描述

  • 渲染函数组件:用函数名作为组件标签名

  • 组件标签也可以是双标签

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

2.2 使用类创建组件

  • 类组件:使用ES6 的class创建的组件
  • 约定1:类名称必须以大写字母开头
  • 约定2:类组件继承自React.Component父类,从而可以使用父类中提供的方法或属性
  • 约定3:类组件必须提供render() 方法
  • 约定4:render()方法必须有返回值 表示该组件的结构
class Hello extends React.Component{
	render(){
	  return <div>Hello class Component!</div>
	}
}
ReactDOM.render(<Hlello/>,document.getElementById('root'))

2.3 抽离为独立的JS文件

思考:项目中的组件多了后,该如何组织这些组件那? 选择1:将所有组件都写在一个js文件中 选择2:将所有组件都放到单独的js文件中 组件作为一个独立的个体,一般会放到一个单独的js文件中。

  • 创建Hello.js
  • 在Hello.js中导入React
  • 创建组件(函数 或 类)
  • 在Hello.js中导入该组件
  • 在index.js中导入Hello组件
  • 渲染组件

hello.js

import React from 'react'
class Hello extends React.Component{
  render(){
    return(
      <div>这是第一个组件</div>
    )
  }
}
// 导出
export default Hello;

index.js

// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// 导入Hello组件
import Hello from './Hello'
ReactDOM.render(<Hello/>,document.getElementById('root'))