您现在的位置是:首页 > Javascript
当前栏目
React入门四:React组件的使用
2023-02-25 18:16:23 时间
这是我参与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'))
相关文章
- 软件测试|微服务集成测试策略
- 写Hudi异常:'Not an Avro data file' 解决方法
- 赵云叫化冻?曹操叫变巨?一文带你读懂字符编码那些事儿
- React 渲染的未来,你想知道吗?
- 网络又超时了......怎么办?
- React和Next.js已死,真的要被取代了?
- 11 个你应该知道的JavaScript 字符串的基础知识
- 每个开发人员都应该知道的 JavaScript 字符串操作技术
- 用 Charles 断点调试 HTTPS 请求,原理揭秘
- 图解 CSS Grid 布局
- 排查死锁的四种工具,你学会了吗?
- 如何在 JavaScript 中使用数组归约器实现 SQL 聚合函数
- 一文精通如何使用二叉树
- 【动态规划】LeetCode 题解:416-分割等和子集
- 关于 JavaScript 中的 Promise,你应该知道的五件事
- Css3的attr函数使用,加载unicode图标
- 秒懂散列表和散列函数
- 需要避免的七个YAML陷阱
- 15 个你应该知道的JavaScript 对象基础知识
- 快速了解 Inert 属性,你明白了吗?