位置: IT常识 - 正文

React初体验-Hello React的组件化方式-React入门小案例(react+go)

编辑:rootadmin
React初体验-Hello React的组件化方式-React入门小案例 文章目录React初体验Hello React案例演练Hello React案例升级Hello React的组件化组件化的方式数据依赖事件绑定其他案例练习电影列表展示计数器的案例React初体验

推荐整理分享React初体验-Hello React的组件化方式-React入门小案例(react+go),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react 1,react+go,react 1,react .then,react+,react .then,react rem,react rem,内容如对您有帮助,希望把文章链接给更多的朋友!

接下来我们通过Hello React的案例, 来体验一下React开发模式, 以及jsx的语法

Hello React案例演练

第一步: 先引入React开发依赖

<!-- crossorigin用来解决跨域 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

第二步: 这里我们编写React的script代码中,必须添加 type="text/babel",作用是可以让babel解析jsx的语法

<script type="text/babel"> // jsx语法编写react代码</script>

第三步: 创建元素渲染到页面

React18之前的做法: 通过ReactDOM.render()函数进行渲染的, 需要传入两个参数

参数一: 要渲染的内容

参数二: 渲染的内容要挂载到的HTML元素

<!-- 挂载的HTML元素 --><div id="app"></div><!-- crossorigin用来解决跨域 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- jsx语法编写react代码 --><script type="text/babel"> // React18之前的做法 ReactDOM.render(<h2>Hello World</h2>, document.querySelector("#app"))</script>

React18之后的做法: 通过ReactDOM. createRoot()函数进行渲染, 传入一个参数, 创建一个React根,之后渲染的内容会包含在这个根中(可以有多个根, 一般是一个根)

<!-- 挂载的元素 --><div id="app"></div><div id="root"></div><!-- crossorigin用来解决跨域 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- jsx语法编写react代码 --><script type="text/babel"> // React18之后的做法 const app = ReactDOM.createRoot(document.querySelector("#app")) const root = ReactDOM.createRoot(document.querySelector("#root"))</script>

再通过root.render()函数向根组件中渲染元素, 参数传要渲染的元素

<!-- 挂载的元素 --><div id="app"></div><div id="root"></div><!-- crossorigin用来解决跨域 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- jsx语法编写react代码 --><script type="text/babel"> // React18之后的做法 const app = ReactDOM.createRoot(document.querySelector("#app")) app.render(<h2>Hello React</h2>) const root = ReactDOM.createRoot(document.querySelector("#root")) root.render(<h2>Hello React18</h2>)</script>

Hello React案例升级

为了演练React,我们可以提出一个小的需求:

在界面显示一个文本:Hello World

点击下方的一个按钮,点击后再将文本改变为Hello React

第一步: 将元素渲染到页面

jsx中是通过{}绑定变量, 大家先对jsx语法有个体验即可, 后面会详细讲解jsx语法

<!-- 挂载的元素 --><div id="app"></div><!-- crossorigin用来解决跨域 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- jsx语法编写react代码 --><script type="text/babel"> const app = ReactDOM.createRoot(document.querySelector("#app")) // 将文本定义成变量 let message = "Hello World" // 第二个小括号表示括号内容是一个整体 app.render(( <div> <h2>{message}</h2> <button>改变文本</button> </div> ))</script>

第二步: 监听按钮点击, 改变message的值

监听按钮点击jsx是通过onClick绑定一个函数, 注意C一定是大写的

const app = ReactDOM.createRoot(document.querySelector("#app"))// 将文本定义成变量let message = "Hello World"// 定义一个函数, 处理按钮点击事件function btnClick() { // 修改数据 message = "Hello React" // 修改完成后需要重新渲染界面 app.render(( <div> <h2>{message}</h2> <button onClick={btnClick}>改变文本</button> </div> ))}// 第二个小括号表示括号内容是一个整体app.render(( <div> <h2>{message}</h2> <button onClick={btnClick}>改变文本</button> </div>))

第三步: 简化代码, 上面代码中明显有重复代码, 我们可以抽取到一个函数中

const app = ReactDOM.createRoot(document.querySelector("#app"))// 将文本定义成变量let message = "Hello World"// 定义一个函数, 处理按钮点击事件function btnClick() { // 修改数据 message = "Hello React" // 修改完成后需要重新渲染界面 rootRander()}rootRander()// 封装一个渲染函数function rootRander() { // 第二个小括号表示括号内容是一个整体 app.render(( <div> <h2>{message}</h2> <button onClick={btnClick}>改变文本</button> </div> ))}Hello React的组件化组件化的方式

Hello React这整个逻辑其实可以看做一个整体,那么我们就可以将其封装成一个组件:

root.render()函数的参数可以是一个HTML元素, 也可以是一个组件;

所以我们可以先将之前的业务逻辑封装到一个组件中,然后传入到 root.render 函数中的第一个参数;

在React中,如何封装一个组件呢?

React的组件分为两种: 类组件和函数式组件

React初体验-Hello React的组件化方式-React入门小案例(react+go)

这里我们暂时使用类的方式封装组件:

定义一个类(类名大写,组件的名称是必须大写的,小写会被认为是HTML元素),继承自React.Component

// 类继承自React.Component, 才是组件class App extends React.Component{}

实现当前组件的render函数, render当中返回的jsx内容,就是之后React会帮助我们渲染的内容

class App extends React.Component { // 类中render函数的返回值, 就是要渲染到页面的内容 render() { return ( <div> <h2>Hello World</h2> <button>改变文本</button> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)数据依赖

组件化问题一:数据在哪里定义?

在组件中的数据,我们可以分成两类:

参与界面更新的数据:当数据变量时,需要更新组件渲染的内容;

不参与界面更新的数据:当数据变量时,不需要更新将组建渲染的内容;

参与界面更新的数据我们也可以称之为是参与数据流,这个数据是定义在当前对象的state中(这个名字是固定的)

我们可以通过在类的构造器中 this.state = {定义的数据}

当我们的数据发生变化时,我们可以调用 this.setState 来更新数据,并且通知React进行update操作;

在进行update操作时,就会重新调用render函数,并且使用最新的数据,来渲染界面

class App extends React.Component { constructor() { super() this.state = { message: "Hello World" } } // 类中render函数的返回值, 就是要渲染到页面的内容 render() { return ( <div> <h2>{this.state.message}</h2> <button>改变文本</button> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)事件绑定

组件化问题二:事件绑定中的this

在类中直接定义一个函数,并且将这个函数绑定到元素的onClick事件上,那么问题来了当前这个函数中的this指向的是谁呢?

默认情况下是undefined

很奇怪,居然是undefined;

因为在正常的DOM操作中,监听点击,监听函数中的this其实是节点对象(比如说是button对象);

这次因为React并不是直接渲染成真实的DOM,我们所编写的button只是一个语法糖,它的本质React的Element对象;

那么在这里发生监听的时候,react在执行函数时并没有绑定this,默认情况下就是一个undefined;

我们在绑定的函数中,可能想要使用当前对象,比如执行 this.setState 函数,就必须拿到当前对象的this

我们就需要在传入函数时,需要给这个函数直接绑定this

类似于这种写法: <button onClick={this.changeText.bind(this)}>改变文本</button>

class App extends React.Component { constructor() { super() this.state = { message: "Hello World" } } btnClick() { // setState内部会做两件事情: 1.将state中的值改掉 2.自动执行render函数渲染页面 this.setState({ message: "Hello React" }) } render() { return ( <div> <h2>{this.state.message}</h2> <button onClick={this.btnClick.bind(this)}>改变文本</button> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)

如果有多个按钮, 每次都需要编写this.btnClick.bind(this)是比较麻烦的, 因此React中还有另一种常见的写法, 在constructor在提前绑定this, 这样就可以直接使用方法

这也是官方文档在的做法

class App extends React.Component { constructor() { super() this.state = { message: "Hello World" } // 为方法提前绑定this this.btnClick = this.btnClick.bind(this) } btnClick() { this.setState({ message: "Hello React" }) } render() { return ( <div> <h2>{this.state.message}</h2> <button onClick={this.btnClick}>改变文本</button> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)其他案例练习电影列表展示

定义一个数组中存放电影, 再对电影列表进行展示

class App extends React.Component { constructor() { super() this.state = { movies: ["大话西游", "黑话律师", "独行月球"] } } render() { return ( <div> <h2>电影列表</h2> <ul> <li>{this.state.movies[0]}</li> <li>{this.state.movies[1]}</li> <li>{this.state.movies[2]}</li> </ul> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)

但是显然目前这种方法是好的, 我们最好对movies进行遍历展示, 而遍历的方式又有很多种, 先将下面两种方式

方式一: 对movies数组遍历放入一个新数组中

class App extends React.Component { constructor() { super() this.state = { movies: ["大话西游", "黑话律师", "独行月球"] } } render() { const liEls = [] for (let item of this.state.movies) { const liEl = <li key={item}>{item}</li> liEls.push(liEl) } return ( <div> <h2>电影列表</h2> <ul> {liEls} </ul> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)

方式二: 使用map直接生成一个新数组, 直接将这个数组放入ul元素中

class App extends React.Component { constructor() { super() this.state = { movies: ["大话西游", "黑话律师", "独行月球"] } } render() { return ( <div> <h2>电影列表</h2> <ul> {this.state.movies.map(item => <li key={item}>{item}</li>)} </ul> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)计数器的案例

接下来再使用React做一个熟悉的计数器案例

class App extends React.Component { constructor() { super() this.state = { conter: 0 } // 为方法绑定this this.increment = this.increment.bind(this) this.decrement = this.decrement.bind(this) } increment() { this.setState({ conter: this.state.conter + 1 }) } decrement() { this.setState({ conter: this.state.conter - 1 }) } render() { return ( <div> <h2>{this.state.conter}</h2> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> </div> ) }}const app = ReactDOM.createRoot(document.querySelector("#app"))app.render(<App/>)
本文链接地址:https://www.jiuchutong.com/zhishi/299184.html 转载请保留说明!

上一篇:react实现路由跳转(react路由exact)

下一篇:数字图像处理课程设计-疲劳检测系统(数字图像处理课后题答案)

  • 出口退税附加税分录怎么写
  • 未到账的银行存款怎么取
  • 如何在金蝶算季度利润表发生额
  • 保险公司收车船使用税吗
  • 存货占营业收入的意义
  • 销售软件怎么做账
  • 收到的房租增值税专用发票可以抵扣吗
  • 房地产中心
  • 公司过桥贷款怎么贷
  • 租赁公司运输费计入什么科目
  • 电子发票如何查询发票代码
  • 小规模企业所得税税率多少
  • 商业保险可以报税吗
  • 无形资产和固定资产计提折旧的时间
  • 按适用税率计税销售额是什么意思
  • 还有主营业务收入这个科目
  • 工程施工方安全责任
  • 收据是否当月入帐
  • 咨询费的税费
  • win10禁止使用网络
  • w10系统搜索
  • 在win7系统中,怎么把D盘里的文件移到C盘里?
  • 固定资产报废怎么处理
  • 苹果电脑怎么快速
  • 收到保险公司车辆保险发票会计分录
  • php实现的三个常数是什么
  • qconsvc.exe - qconsvc是什么进程 有什么作用
  • 以前年度应付账款做到制造费用如何改账
  • 主板BIOS无法更改显存
  • 研发费用加计扣除是什么意思啊
  • 变更营业执照中心怎么改
  • 公司的清洁费用是什么科目
  • rtp webrtc
  • PHP:zip_entry_compressedsize()的用法_Zip函数
  • 解决本地浏览器的方法
  • 税务新政策解读
  • 微信开发获取位置
  • 非正常损失如何处理
  • 应收账款如何做会计分录
  • 支付产品运输费怎么入账
  • 小公司不交社保违法吗
  • 小规模未达起征点免税分录
  • html与js之间如何配合
  • 新成立公司建账
  • php 解压
  • 采矿权如何进行融资
  • 材料暂估入库如何进行账务处理
  • 与上级往来的会计科目的题目
  • 工会收到单位拨款的会计分录
  • 在access中,数据库对象导出到另一数据库中
  • 合作社收到政府补贴会计分录
  • 支付稿费需要发票吗
  • 补交增值税税款怎么做账
  • 其他应收款与其他应付款对冲分录
  • 租房发票如何做分录
  • 经营性应付项目减少对经营活动现金
  • 企业购入树木花草如何入账
  • 去年未做账的发票怎么查
  • sqlserver合并脚本工具
  • 老毛桃u盘启动制作工具如何把原来的win7改xp系统图文教程
  • win10预览版21390
  • win10 下一代
  • xp系统怎么取消自动关机
  • WINDOWS系统中删除放入回收站的文件占用什么空间
  • macbook怎么开hdr
  • Centos安装dig命令
  • linux mount -o remount
  • 笔记本拔掉硬盘开机没反应
  • win8安装步骤
  • elementtree修改节点属性
  • js数组如何定义
  • 安卓自定义ui
  • 使用chrome浏览器打开
  • js中dom的用法
  • unity3d从入门到精通
  • android ListView之——ArrayAdapter使用
  • js中new一个函数
  • jquery跨域请求有哪些方式
  • 广东etc政策
  • 如何查询医院是否有怀孕建档名额
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设