React入门四:React组件的使用
2023-06-13 09:16:41 时间
这是我参与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'))
相关文章
- vue组件——富文本编辑器
- [译]使用React.memo()来优化React函数组件的性能
- unity 的Cinemachine组件运用
- react中父组件向子组件传值
- React路由 及 React 路由中核心组件
- react的jsx和React.createElement是什么关系?面试常问
- angularjs子组件向父组件传值_react子组件传值
- 面试官:你是怎样进行react组件代码复用的
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
- React 组件进阶
- 2022 年超棒的 React 组件库,是时候拿出来分享啦
- React源码学习入门(十二)DOM组件更新流程与Diff算法
- 全新的 React 组件设计理念 Headless UI
- React--3: 组件和模块及函数式组件
- webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载
- Spring Cloud Stream核心组件Channel(二)
- jQuery File Upload v9.14.1 发布,一个非常优秀的上传组件详解编程语言
- Java多线程20:多线程下的其他组件之CountDownLatch、Semaphore、Exchanger详解编程语言
- Ansible-Playbook核心元素以及组件
- 探索React框架中MySQL数据库的应用(react mssql)
- HarmonyOS实战—Image组件的剪切和缩放