React初体验-Hello React的组件化方式-React入门小案例
文章目录
- React初体验
- Hello React案例演练
- Hello React案例升级
- Hello React的组件化
- 组件化的方式
- 数据依赖
- 事件绑定
- 其他案例练习
- 电影列表展示
- 计数器的案例
React初体验
接下来我们通过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的组件分为两种:
类组件
和函数式组件
这里我们暂时使用类的方式封装组件:
定义一个类(类名大写,组件的名称是必须大写的,小写会被认为是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"}// 为方法提前绑定thisthis.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}// 为方法绑定thisthis.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/>)
React初体验-Hello React的组件化方式-React入门小案例相关推荐
- 风变编程有c语言吗,风变编程Python小课初体验:用有趣好玩的方式学编程
原标题:风变编程Python小课初体验:用有趣好玩的方式学编程 经过约一个月时间的学习,今天,我终于学完风变编程Python小课的Python基础语法课程啦!从零基础的"小白"到现 ...
- Android 组件化,从入门到不可自拔
文章目录 写在前面 谈谈模块化 什么是模块化 模块化的好处 模块化的弊端 聊聊组件化 什么是组件化 组件化的好处 组件化实践 组件化架构 统一配置文件 基础公共组件 业务组件 组件化必须要关注的几个问 ...
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
- react初体验之小小的细节大大的坑--致被公司赶鸭子上架的react萌新
太久,太久,是否过了太久... 一晃眼从合肥来北京都有两个月了,总是有各种理由偷懒不整理,赶项目.准备面试.赶项目... 行吧回归正题 来到北京这边公司的技术栈是react,可是我没用过啊,不对,我也 ...
- React全家桶(二)组件化编程
- Centos8 初体验 (二)最小化安装下查看已安装的软件包列表,并尝试dnf安装vim软件,以及dnf常用的一些操作
目录 通过dnf list 查看最小化安装的软件包都有哪些 用dnf 安装软件 dnf 下载源查看: dnf 下载包到当前目录,或指定目录 查看所有包或指定包的依赖关系 检查包文件所依赖的前置条件和配 ...
- 小程序AI初体验 | 做一款实时识别车辆报价的小程序
- 微信小程序学习第8天——自定义组件的数据监听器Observer小案例
一.案例需求 使用自定义组件的数据监听实现:通过点击下方三个按钮,上方颜色变化(效果如下) 二.自定义组件代码 自定义组件为test test.wxml文件代码 <view class=&quo ...
- Vue初体验(七)使用Vue实现一个简单的聊天框
1.实践是检验真理的唯一标准,现在我们做一个简易的聊天窗口,有一个input框,用于用户输入,一个按钮button,用于把用户的输入提交上去,然后又一个列表ul,用于展示我们每次提交的消息. 2.通过 ...
最新文章
- conda install和pip install的区别
- [Recompose] Pass a React Prop to a Stream in RxJS
- 摄像头自建html直播,html5调用摄像头实现拍照
- opensplice dds v6.3.2_DDS生态社区带你解读|Filecoin创始人胡安:数据存储需求未来会增长3倍...
- node.js中的文件系统
- 基于持续集成的轻量级接口自动化测试 【持续更新...】
- 撤销工作表保护密码忘记了怎么办?
- vue 点击a链接 实现url下载文件
- iPad2 3G版 5.1.1降级到4.3.3(需要4.3.3SHSH备份)
- solidworks有限元分析_新手学习心得体会
- linux系统挂载光盘镜像ISO的方法
- 把图标变成圆形的html_css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局...
- PDF文件怎么转换成Word文档
- Quartus之仿真错误#** Error (suppressible): (vsim-19) Failed to access library ‘ ‘ at “ “
- 【 C++ 】日期计算器
- 2017 闰秒 linux,闰秒为什么会导致Linux出现问题
- 音乐艺考生的视唱练耳小技巧
- ngrok域名申请使用外网访问
- UNIX和Linux Shell正则表达式语法介绍
- 小功能⭐️Unity快捷键、路径及常用特性
热门文章
- 测试手机双摄的软件,盘点主流单双摄手机,实际测试哪一款拍照更成熟?
- JS原型与原型链详细解释
- 2022年秋季PAT线上考试总结
- 考研英语 长难句训练day38
- 记录一次美团+小米+VIPKId+CVTE的Java后台开发面试经历
- android充电器给mac充电,[实测]哪些Android手机充电器也可以给iPhone 12快充?
- 如何给kali安装中文输入法_中文用户名如何安装SU插件SUAPP
- wps宏编辑器Api接口js事件讲解
- 分层双向链表+ 哈希表 实现LFU
- 电源符号:VCC、VDD、VEE、VSS、VBAT各表示什么意思?