React篇-关于React的简简单单了解~
创始人
2025-06-01 21:58:14
0次
一.简介
1.介绍
用于构建用户界面的 JavaScript 库
2.创建项目
(1)手动创建
Document
(2)使用脚手架创建及启动项目
npx create-react-app 项目名称
cd 项目名称
npm start
二.基本使用
1.JSX
(1)简介
const element = Hello, world!
;既不是字符串也不是 HTML。它被称为 JSX,是一个 JavaScript 的语法扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式,具有 JavaScript 的全部功能。
(2)简单使用
在JSX中嵌入表达式
JSX 也是一个表达式
特定属性
JSX 防止注入攻击
JSX 表示对象
2.元素渲染
React 只更新它需要更新的部分, 局部刷新, Diff算法
这里的代码在'3.组件&Props'中一起写着哦~
3.组件&Props
(1)组件
a.函数组件
// App.js
import './App.css';
import ClassComponets from './components/ClassComponents';
import SonComponets from './components/SonComponents'
// 函数组件
function App() {return (// 可使用空标签, <> 相当于 将标签包裹起来 <>- app1
- app2
- app3
b.Class类组件
//ClassComponents
//引入react
import { Component } from 'react'
// 创建类组件 必须继承react中的Component(导入) 如果未导入react, 直接继承React.Component即可
class ClassComponets extends Component{// 渲染函数render(){return(<>哈喽a, 空空子!!!
)}
}
// 导出组件
export default ClassComponets(2)Props
组件决不能修改自身的 props
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改 (纯函数: 不修改传递进来的参数,且多次调用下相同的入参始终返回相同的结果)
//SonComponents.js
// 元素渲染
//引入react
import { Component } from 'react'
import SonSonComponents from './SonSonComponents'
// 创建类组件 必须继承react中的Component
class SonComponets extends Component{// 构造器 参数props, 用于接收父组件传递的值 props是只读的,不可修改constructor(props){super(props)// state 局部私有 但值可修改this.state = {time : new Date().toLocaleTimeString()}// 为了在回调中使用 `this`，这个绑定是必不可少的 this.updateTime = this.updateTime.bind(this); }// 更新状态updateTime(){this.setState({time : new Date().toLocaleTimeString()})}// 渲染函数render(){// 如果想在本组件的子组件中获取到本组件的父组件的值, 可使用解构const { title } = this.propsreturn(<>Son哈哈哈
现在时间: { this.state.time }
{/* 父组件(App)向子组件传值 */}App传递的值: {this.props.title}
{/* title2是本组件的父组件的值,传递给本组件的儿子 */}儿子传" title2={title}> )}
}
// 导出组件
export default SonComponets// SonSonComponents.js
//引入react
import { Component } from 'react'
// 创建类组件 必须继承react中的Component
class SonSonComponets extends Component{// 构造器 参数props, 用于接收父组件传递的值constructor(props){super(props)}// 渲染函数render(){return(<>SonSon哈哈哈
{/* 父组件(App)向子组件传值 */}{this.props.title1}
{this.props.title2}
)}
}
// 导出组件
export default SonSonComponets4.State&生命周期
// 元素渲染
//引入react
import { Component } from 'react'
// 创建类组件 必须继承react中的Component
class TimeComponets extends Component{// 构造器 参数props, 用于接收父组件传递的值 props是只读的,不可修改constructor(props){super(props)this.state = {time : new Date().toLocaleTimeString()}}// 钩子函数// 挂载完成后, 已有dom元素componentDidMount(){// 挂载完成后执行, 只执行一次console.log('componentDidMount');//更新 statethis.timeTnterval = setInterval(()=>{this.setState({time : new Date().toLocaleTimeString()})},1000)}// 组件卸载之前 可进行清理内存,清除定时器componentWillMount(){clearInterval(this.timeTnterval)}// 渲染函数render(){return(<>~~~时间~~~
timeComponents---现在时间: { this.state.time }
)}
}
// 导出组件
export default TimeComponets三.Hook
// Hook 组件
// Hook不能在class组件中使用, 可以在函数组件中使用
// Hook只能在函数最顶层调用, 不要在循环,条件判断或子函数中调用 在React函数的最顶层以及任何 return之前调用import React,{useEffect, useState} from 'react'function HookComponent(){// 声明一个叫fruits的state变量 返回一对值: 当前状态和让更新它的函数 数组解构 const [fruits, setFruits] = useState('qqq') // const fruit = '' setFruits("abc")const [num,setNum] = useState(0)// 将componentDidMount, componentDidUpdate, componentWillUnMount 合并成一个Hook函数 [依赖项] 如果有依赖项(可有多个),当其中至少有一个依赖项发生变化时,才页面更新, 没有依赖项则每次数据变化页面都更新useEffect(()=>{document.title = `click-${num}-times`},[fruits])// 当页面首次渲染以及有更新的时候, 就先执行清理函数, 再执行函数内容(定时器)useEffect(()=>{let timer = setInterval(()=>{console.log('在Hook中创建定时器')},1000)return ()=>{console.log('在Hook中清理定时器')// 清理副作用clearInterval(timer)}})return (<>{ fruits }
)}export default HookComponent/* 使用箭头函数直接默认导出
export default ()=>{} */参考官方文档: https://react.docschina.org/
wo放了好多代码, 是不是因为描述太少, 官方提醒改进质量, 一些注释基本都在代码里边, 偷个小懒不想再单独写出来了呜呜呜, 在这废言凑凑字数叭~~~ 不得不说, 前端的官方文档还是写的都还是挺好的, 大家可以多参考参考文档哦~~~也帮我加加阅读量点赞量什么的呗( 求求~~~ )
相关内容
热门资讯
经销商要“分手”，“极核”厂家...
最近，盐城市民王先生向我们荔枝新闻中心求助说，去年他加盟销售一款品牌电动车，后来由于销量惨淡，他自行...
A股低开：稳定币概念股活跃，翠...
中新经纬6月3日电 3日早盘，A股三大指数小幅低开。上证指数跌0.22%，报3340.07点；深...
恒生指数开盘涨0.53%，恒生...
6月3日，恒生指数开盘涨0.53%，恒生科技指数涨0.54%。翰森制药涨近4%，与Regeneron...
科创板人工智能ETF（5889...
6月3日，三大指数集体低开，科技方向震荡走高。截至发稿，相关ETF方面，科创板人工智能ETF（588...
烧掉一半净利润，拼多多想培育怎...
当外部不确定性日益增加，为中小商家提供“避风港”和“助推器”，助力其度过周期波动，这种“授人以渔”的...
“苏超”霸屏，中国可以靠江苏搞...
01 经济独立，城市人格独立最近一段时间，无相君的朋友圈和微信群都被“苏超”霸屏了。几乎每天一个热搜...
【开盘】A股三大股指集体低开，...
6月3日，A股三大股指集体低开。其中，沪指跌0.22%报3340.07点，深成指跌0.34%报100...
刚刚！深交所宣布：调整→ 深交...
6月3日，深交所发布公告，根据指数编制规则，深圳证券交易所和深圳证券信息有限公司决定于2025年6月...
两宗券商“老鼠仓”曝光→ 股市...
地方证监局最新披露的罚单，让两起券商从业人员“老鼠仓”案件浮出水面，2家龙头券商中信证券、华泰证券牵...
大热IP经济难“包治百病”，明...
近日，IP经济、黄金概念股表现活跃，明牌珠宝股价涨停。5月29日，明牌珠宝发布公告称，公司股票连续两...
银河证券：港股市场情绪仍需观察...
银河证券发布港股策略研报称，港股市场情绪仍需观察关税政策走向。近期国际贸易局势反复无常，前景仍然不明...
银河证券：短期内A股市场或仍维...
银河证券发布A股策略研报称，近期板块轮动速度加快，行情震荡格局尚未改变，市场成交额未出现明显放量，仍...
哪吒汽车，注定掉队 哪吒汽车，...
定焦One（dingjiaoone）原创特约作者 | 胡锟编辑 | 魏佳从登顶新势力销量冠军，到几乎...
牛市早报｜端午假期预计全社会跨...
【市场数据】截至5月30日收盘，上证综指跌0.47%，报3347.49点；科创50指数跌0.94%，...
黄酒真的雄起了？ 黄酒真的雄起...
斑马消费 杨伟2025年A股酒水板块“冰火两重天”，白酒承压，啤酒失速，黄酒却异军突起！Wind 5...
一台不到600元，魅族新机大火...
对于整个手机市场来说，华米OV等国产手机的市场大战已经日渐稳定，各家手机企业都处于平淡化的状态，就在...
港股稳定币概念暴涨！刘煜辉：人...
6月2日，在港股市场上，数字货币概念股集体拉升，连连数字盘中一度上涨80%，移卡一度涨近50%，欧科...
又现百万罚单 消金合作机构管理...
北京商报讯（记者 岳品瑜 董晗萱）消费金融机构的一张新罚单，又指向合作业务管理。6月2日，北京商报记...
国际金价重返高位 炒金是否卷土...
6月2日，国际金价重返3300美元/盎司高位，截至北京商报记者发稿，金价涨幅超过2%，盘中突破336...
股价翻倍基金霸屏 创新药否极泰...
证券时报记者 裴利瑞今年以来，中国创新药行业正经历了一场前所未有的价值重估，而且在近期呈现加速趋势。...