React快速入门（一）基础与语法
- 用于构建用户界面的JavaScript库
- 目前国内外最流行的三大框架：Vue，React，Angular
React的介绍和特点
- 声明式
- 只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面
- 组件化
- 组件化开发页面是目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件
- 跨平台
- React开发Web页面
- ReactNative用于开发移动端跨平台
- ReactVR开发虚拟现实Web应用程序
React开发依赖分析
必须依赖的三个库
- react：包含react所必须的核心代码
- react-dom：react渲染在不同平台所需要的核心代码
- babel：将jsx转换成React代码的工具
添加三个依赖的方式
- 方式—：直接CDN引入
- 方式二：下载后，添加本地依赖
- 方式三：通过npm管理(后续脚手架再使用)
React组件化的封装
<script type="text/babel">
//用于创建一个React根，之后渲染的内容会包含在这个根中
const root =ReactDOM.createRoot(document.querySelector("#root"))
root.render(<h2>Hello World</h2>)
</script>
- 重构
const root = ReactDOM.createRoot(document.querySelector("#root"))
// 1.将文本定义成变量
let message = "Hello World"
// 2.监听按钮的点击
function btnClick() {
// 1.1.修改数据
message = "Hello React"
// 2.重新渲染界面，否则状态修改无法生效！
rootRender()
}
// 3.封装一个渲染函数
function rootRender() {
root.render((
<div>
<h2>{message}</h2>
<button onClick={btnClick}>修改文本</button>
</div>
))
}
rootRender()
//定义一个类，类名大写，组件的名称必须是大写，小写会被认为是HTML元素，继承自React.Component
class App extends React.Component {
// 组件数据
constructor() {
super()
this.state = {
message: "Hello World",
name: "why",
age: 18
}
// 对需要绑定的方法, 提前绑定好this
this.btnClick = this.btnClick.bind(this)
}
// 组件方法(实例方法)
btnClick() {
// 内部完成了两件事情:
// 1.将state中message值修改掉 2.自动重新执行render函数函数
this.setState({
message: "Hello React"
})
}
// 渲染内容 render方法
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick}>修改文本</button>
</div>
)
}
}
// 将组件渲染到界面上
const root = ReactDOM.createRoot(document.querySelector("#root"))
// App根组件
root.render(<App/>)
React数据事件处理
- 数据定义
- 参与界面更新的数据(参与数据流)：当数据(定义在当前对象的state中)变化时，需要更新组件渲染的内容
- 在构造函数中this.state ={定义的数据}
- 调用this.setState 来更新数据，并且通知React进行update操作;在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
- 不参与界面更新的数据：当数据变化时，不需要更新组件渲染的内容
- 参与界面更新的数据(参与数据流)：当数据(定义在当前对象的state中)变化时，需要更新组件渲染的内容
- 事件绑定
- 类中定义函数，将函数绑定到事件上
- this指向默认情况下是undefined，因为React不是直接渲染真实DOM，发生监听时，react在执行函数时并没有绑定this，默认情况下就是undefined
- 在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
JSX语法
- JSX是一种JavaScript的语法扩展（eXtension)，也在很多地方称之为JavaScript XML，因为看起来就是一段XML语法;
- 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；它不同于Vue中的模块语法，需要专门学习模块语法中的一些指令(比如v-for、v-if、v-else、v-bind) ;
- JSX的书写规范:
- JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment) ;
- 为了方便阅读，我们通常在jsx的外层包裹一个小括号)，这样可以方便阅读，并且jsx可以进行换行书写;JSX中的标签可以是单标签，也可以是双标签;
- JSX的注释：
{ */\* JSX的注释写法 \*/*}
// 1.定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
counter: 100,
message: "Hello World",
names: ["abc", "cba", "nba"],
aaa: undefined,
bbb: null,
ccc: true,
friend: { name: "kobe" },
firstName: "kobe",
lastName: "bryant",
age: 20,
movies: ["流浪地球", "星际穿越", "独行月球"]
}
}
render() {
// 1.插入标识符
const { message, names, counter } = this.state
const { aaa, bbb, ccc } = this.state
const { friend } = this.state
// 2.对内容进行运算后显示(插入表示)
const { firstName, lastName } = this.state
const fullName = firstName + " " + lastName
const { age } = this.state
const ageText = age >= 18 ? "成年人": "未成年人"
const liEls = this.state.movies.map(movie => <li>{movie}</li>)
// 3.返回jsx的内容
return (
<div>
{/* 1.当变量是Number/String/Array直接显示出来 */}
<h2>{counter}</h2>
<h2>{message}</h2>
<h2>{names}</h2>
{/* 2.当变量是undefined/null/Boolean类型时，内容为空 */}
<h2>{String(aaa)}</h2>
<h2>{bbb + ""}</h2>
<h2>{ccc.toString()}</h2>
{/* 3.Object类型不能作为子元素进行显示*/}
{/*<h2>{friend}</h2> ×*/}
<h2>{friend.name}</h2>
<h2>{Object.keys(friend)[0]}</h2>
{/* 4.可以插入对应的表达式*/}
<h2>{10 + 20}</h2>
<h2>{firstName + " " + lastName}</h2>
<h2>{fullName}</h2>
{/* 5.可以插入三元运算符*/}
<h2>{ageText}</h2>
<h2>{age >= 18 ? "成年人": "未成年人"}</h2>
{/* 6.可以调用方法获取结果*/}
<ul>{liEls}</ul>
<ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
<ul>{this.getMovieEls()}</ul>
</div>
)
}
getMovieEls() {
const liEls = this.state.movies.map(movie => <li>{movie}</li>)
return liEls
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
- JSX绑定属性
// 1.定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
title: "哈哈哈",
imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
href: "https://www.baidu.com",
isActive: true,
objStyle: {color: "red", fontSize: "30px"}
}
}
render() {
const { title, imgURL, href, isActive, objStyle } = this.state
// 需求: isActive: true -> active
// 1.class绑定的写法一: 字符串的拼接
const className = `abc cba ${isActive ? 'active': ''}`
// 2.class绑定的写法二: 将所有的class放到数组中
const classList = ["abc", "cba"]
if (isActive) classList.push("active")
// 3.class绑定的写法三: 第三方库classnames -> npm install classnames
return (
<div>
{ /* 1.基本属性绑定 */ }
<h2 title={title}>我是h2元素</h2>
{/*<img src={imgURL} alt=""/>*/}
<a href={href}>百度一下</a>
{ /* 2.绑定class属性: 最好使用className */ }
<h2 className={className}>哈哈哈哈</h2>
<h2 className={classList.join(" ")}>哈哈哈哈</h2>
{ /* 3.绑定style属性: 绑定对象类型 */ }
<h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
<h2 style={objStyle}>呵呵呵呵</h2>
</div>
)
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
- createElement需要传递三个参数:
- 参数一: type：当前ReactElement的类型;
如果是标签元素，那么就使用字符串表示“div” ;如果是组件元素，那么就直接使用组件的名称; - 参数二: config：所有jsx中的属性都在config中以对象的属性和值的形式存储;比如传入className作为元素的class;
- 参数三:children：存放在标签中的内容，以children数组的方式进行存储;如果是多个元素React内部有对它们进行处理，处理的源码在下方
- 参数一: type：当前ReactElement的类型;
React事件绑定
- React事件的命名采用小驼峰式(camelCase) ，而不是纯小写;
- 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行;
this的绑定问题
- 方案一: bind给btnClick显示绑定this
- 方案二: 使用ES6 class fields语法
- 方案三: 事件监听时传入箭头函数（个人推荐)
事件参数传递
- 获取event对象
{/* 1.event参数的传递 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={(event) => this.btnClick(event)}>按钮2</button>
- 获取更多对象
{/* 2.额外的参数传递 */}
<button onClick={this.btnClick.bind(this, "kobe", 30)}>按钮3(不推荐)</button>
<button onClick={(event) => this.btnClick(event, "why", 18)}>按钮4</button>
React条件渲染
- 条件判断语句：适合逻辑较多的情况
- 三元运算符：适合逻辑比较简单
- 与运算符&&：适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染
<div>
{/* 1.方式一: 根据条件给变量赋值不同的内容 */}
<div>{showElement}</div>
{/* 2.方式二: 三元运算符 */}
<div>{ isReady ? <button>开始战斗!</button>: <h3>赶紧准备</h3> }</div>
{/* 3.方式三: &&逻辑与运算 */}
{/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}
<div>{ friend && <div>{friend.name + " " + friend.desc}</div> }</div>
</div>
React列表渲染
- 如何展示列表呢?在React中，展示列表最多的方式就是使用数组的map高阶函数;
- 很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理:比如过滤掉—些内容: filter函数
比如截取数组中的一部分内容: slice函数 - key主要的作用是为了提高diff算法时的效率
<div>
<h2>学生列表数据</h2>
<div className="list">
{
students.filter(item => item.score > 100).slice(0, 2).map(item => {
return (
<div className="item" key={item.id}>
<h2>学号: {item.id}</h2>
<h3>姓名: {item.name}</h3>
<h1>分数: {item.score}</h1>
</div>
)
})
}
</div>
</div>
// 1.定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],
currentIndex: 0
}
}
itemClick(index) {
this.setState({ currentIndex: index })
}
render() {
const { movies, currentIndex } = this.state
return (
<div>
<ul>
{
movies.map((item, index) => {
return (
<li
className={ currentIndex === index ? 'active': '' }
key={item}
onClick={() => this.itemClick(index)}
>
{item}
</li>
)
})
}
</ul>
</div>
)
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
// 1.定义App根组件
class App extends React.Component {
constructor() {
super()
this.state = {
movies: ["星际穿越", "盗梦空间", "大话西游", "流浪地球"],
currentIndex: 0
}
}
itemClick(index) {
this.setState({ currentIndex: index })
}
render() {
const { movies, currentIndex } = this.state
const liEls = movies.map((item, index) => {
return (
<li
className={ currentIndex === index ? 'active': '' }
key={item}
onClick={() => this.itemClick(index)}
>
{item}
</li>
)
})
return (
<div>
<ul>{liEls}</ul>
</div>
)
}
}
// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)
扫一扫
5057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
