企业网站建设模板多少钱,全网最稳最低价自助下单网站,建设网站的新闻,新公司注册资金多少较好文章目录 React介绍React开发环境搭建项目目录说明以及相关调整 JSX基础JSX介绍JSX中使用js表达式JSX列表渲染JSX条件渲染JSX样式处理JSX注意事项 组件基础组件的概念函数组件类组件事件绑定如何绑定事件获取事件对象传递额外参数 组件状态状态不可变表单处理受控表单组件非受控… 文章目录 React介绍React开发环境搭建项目目录说明以及相关调整 JSX基础JSX介绍JSX中使用js表达式JSX列表渲染JSX条件渲染JSX样式处理JSX注意事项 组件基础组件的概念函数组件类组件事件绑定如何绑定事件获取事件对象传递额外参数 组件状态状态不可变表单处理受控表单组件非受控表单组件 阶段性实践项目 参考课程地址 React入门到实战 React介绍 React是什么
React是一个用于构建用户界面的JavaScript库它主要用于构建UI很多人认为React是MVC中的V视图。React起源于Facebook的内部项目用来架设Instagram的网站并于2013年5月开源。React拥有较高的性能代码逻辑非常简单越来越多的人已开始关注和使用它。
React有什么特点
声明式UIJSX写UI就和写普通的HTML一样抛弃命令式的繁琐实现 组件化组件是react中最重要的内容组件可以通过搭积木的方式拼成一个完整的页面通过组件的抽象可以增加复用能力和提高可维护性 跨平台react既可以开发web应用也可以使用同样的语法开发原生应用react-native比如安卓和ios应用甚至可以使用react开发VR应用想象力空间十足react更像是一个 元框架 为各种领域赋能高效React通过对DOM的模拟最大限度地减少与DOM的交互提高渲染效率。单向数据流React实现了单向数据流即数据只能从父组件传递到子组件而不能反向传递这样可以避免数据的混乱和冲突也方便数据的管理和追踪。
React开发环境搭建
现在的前端开发环境已经趋于工程化我们一般使用脚手架来创建一个项目的初始环境
那么什么是脚手架呢 在这里我们使用的脚手架就是create react app
$ npx create-react-app react-basic说明
npx create-react-app 是固定命令create-react-app是React脚手架的名称react-basic表示项目名称可以自定义保持语义化npx 命令会帮助我们临时安装create-react-app包然后初始化项目完成之后会自自动删掉所以不需要全局安装create-react-app
启动项目
$ yarn start
or
$ npm start什么是npx他和npm有什么区别 项目目录说明以及相关调整
目录说明 src 目录是我们写代码进行项目开发的目录package.json 中俩个核心库react 、react-dom 目录调整 删除src目录下自带的所有文件只保留app.js根组件和index.js创建index.js文件作为项目的入口文件在这个文件中书写react代码即可
入口文件index.js说明
//react框架的核心包
import React from react
//专门做渲染方面的包
import ReactDOM from react-dom
//应用的全局样式文件
import ./index.css
// 引入根组件App
import App from ./App// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(React.StrictModeApp //React.StrictMode,document.getElementById(root)
)//如果是react18版本
//注意把严格模式去掉否则会影响useEffect的执行时间
const root ReactDOM.createRoot(document.getElementById(root));
root.render(App /
);这个index.css里面一般是做一些全局样式的初始化
JSX基础 JSX介绍
概念JSX是 JavaScript XMLHTML的缩写表示在 JS 代码中书写 HTML 结构
作用在React中创建HTML结构页面UI结构
优势
采用类似于HTML的语法降低学习成本会HTML就会JSX充分利用JS自身的可编程能力创建HTML结构
注意JSX 并不是标准的 JS 语法是 JS 的语法扩展浏览器默认是不识别的脚手架中内置的 babel/plugin-transform-react-jsx 包用来解析该语法
接比如下面的图片我们写的是左边其实编译的时候变成了右边
JSX中使用js表达式
语法
const name 柴柴h1你好我叫{name}/h1 // h1你好,我叫柴柴/h1可以使用的表达式
字符串、数值、布尔值、null、undefined、object [] / {} 1 2、‘abc’.split(‘’)、[‘a’, ‘b’].join(‘-’)fn()
特别注意 if 语句/ switch-case 语句/ 变量声明语句这些叫做语句不是表达式不能出现在 {} 中 技巧能够通过console.log打印出来的就是表达式 JSX列表渲染 页面的构建离不开重复的列表结构比如歌曲列表商品列表等我们知道vue中用的是v-forreact这边如何实现呢 实现使用数组的map 方法
// 来个列表
const songs [{ id: 1, name: 痴心绝对 },{ id: 2, name: 像我这样的人 },{ id: 3, name: 南山南 }
]function App() {return (div classNameAppul{songs.map(item li{item.name}/li)}/ul/div)
}export default App注意点需要为遍历项添加 key 属性提高diff性能
key 在 HTML 结构中是看不到的是 React 内部用来进行性能优化时使用key 在当前列表中要唯一的字符串或者数值String/Number如果列表中有像 id 这种的唯一值就用 id 来作为 key 值如果列表中没有像 id 这种的唯一值就可以使用 index下标来作为 key 值
JSX条件渲染
作用根据是否满足条件生成HTML结构比如Loading效果 实现可以使用 三元运算符 或 逻辑与()运算符
// 来个布尔值
const flag true
function App() {return (div classNameApp{/* 条件渲染字符串 */}{flag ? react真有趣 : vue真有趣}{/* 条件渲染标签/组件 */}{flag ? spanthis is span/span : null}/div)
}
export default App如果是复杂的条件渲染我们可以把整个逻辑封装成一个函数然后直接在{}中执行函数即可。
例如 JSX样式处理
行内样式
function App() {return (div classNameAppdiv style{{ color: red }}this is a div/div/div)
}export default App行内样式优化版
const styleObj {color:red
}function App() {return (div classNameAppdiv style{ styleObj }this is a div/div/div)
}export default App类名方式
.title {font-size: 30px;color: blue;
}function App() {return (div classNameAppdiv classNametitlethis is a div/div/div)
}export default App动态类名
import ./app.css
const showTitle true
function App() {return (div classNameAppdiv className{ showTitle ? title : }this is a div/div/div)
}
export default AppJSX注意事项
JSX必须有一个根节点如果没有根节点可以使用/幽灵节点替代所有标签必须形成闭合成对闭合或者自闭合都可以JSX中的语法更加贴近JS语法属性名采用驼峰命名法 class - classNamefor - htmlFor JSX支持多行换行如果需要换行需使用() 包裹防止bug出现
组件基础 组件的概念
React的组件概念是指将UI界面拆分成可复用的代码片段每个片段都是一个独立的模块可以有自己的状态和逻辑也可以接收外部传入的数据和事件。React的组件可以用函数或类的形式来定义也可以用JSX语法来描述组件的结构和样式。React的组件可以嵌套和组合形成复杂的应用界面。React的组件的优点是可以提高开发效率和代码质量也可以保证UI和数据的一致性。 函数组件
使用 JS 的函数或箭头函数创建的组件就叫做函数组件
接下来我们来看一个函数组件的定义和渲染的例子
// 定义函数组件
function HelloFn () {return div这是我的第一个函数组件!/div
}// 定义类组件
function App () {return (div classNameApp{/* 渲染函数组件 */}HelloFn /HelloFn/HelloFn/div)
}
export default App约定说明
组件的名称必须首字母大写react内部会根据这个来判断是组件还是普通的HTML标签函数组件必须有返回值表示该组件的 UI 结构如果不需要渲染任何内容则返回 null组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容对于函数组件来说渲染的内容是函数的返回值就是对应的内容使用函数名称作为组件标签名称可以成对出现也可以自闭合
类组件
使用 ES6 的 class 创建的组件叫做类class组件
// 引入React
import React from react// 定义类组件
class HelloC extends React.Component {render () {return div这是我的第一个类组件!/div}
}function App () {return (div classNameApp{/* 渲染类组件 */}HelloC /HelloC/HelloC/div)
}
export default App约定说明
类名称也必须以大写字母开头类组件应该继承 React.Component 父类从而使用父类中提供的方法或属性类组件必须提供 render 方法render 方法必须有返回值表示该组件的 UI 结构
事件绑定
如何绑定事件
语法 on 事件名称 { 事件处理程序 } 比如div onClick{ onClick }/div注意点 react事件采用驼峰命名法比如onMouseEnter、onFocus
在函数组件中
// 函数组件
function HelloFn () {// 定义事件回调函数const clickHandler () {console.log(事件被触发了)}return (// 绑定事件button onClick{clickHandler}click me!/button)
}类组件中的事件绑定整体的方式和函数组件差别不大唯一需要注意的是因为处于class类语境下所以定义事件回调函数以及写法上有不同
定义的时候: class Fields语法使用的时候: 需要借助this关键词获取
import React from reactclass CComponent extends React.Component {// class FieldsclickHandler (e, num) {// 这里的this指向的是正确的当前的组件实例对象 // 可以非常方便的通过this关键词拿到组件实例身上的其他属性或者方法console.log(this)}clickHandler1 () {// 这里的this 不指向当前的组件实例对象而指向undefined 存在this丢失问题console.log(this)}render () {return (divbutton onClick{(e) this.clickHandler(e, 123)}click me/buttonbutton onClick{this.clickHandler1}click me/button/div)}
}function App () {return (divCComponent //div)
}export default App为什么这里会出现this指向不明的问题 当然现在的主流写法都是函数组件无需过多考虑this的指向问题。 获取事件对象
事件对象是一个用来记录事件发生时的相关信息的对象它可以用来解决一些事件处理的问题比如
获取事件的类型、目标、阶段、时间等基本信息用于判断事件的性质和来源。获取事件的坐标、按键、按钮等细节信息用于实现一些交互效果比如拖拽、缩放、滚动等。阻止事件的默认行为或冒泡传播用于避免一些不期望的结果比如链接跳转、表单提交、事件重复触发等。传递一些自定义的数据或参数用于实现一些特定的功能比如传递状态、标识、回调函数等。
事件对象的属性和方法可能因为不同的浏览器或事件类型而有所差异所以在使用事件对象时需要注意兼容性和适用性的问题。
获取事件对象e只需要在 事件的回调函数中 补充一个形参e即可拿到
// 函数组件
function HelloFn () {// 定义事件回调函数const clickHandler (e) {console.log(事件被触发了, e)}return (// 绑定事件button onClick{clickHandler}click me!/button)
}传递额外参数
解决思路: 改造事件绑定为箭头函数在箭头函数中完成参数的传递 import React from react// 如何获取额外的参数
// onClick{ onDel } - onClick{ () onDel(id) }
// 注意: 一定不要在模板中写出函数调用的代码 onClick { onDel(id) } bad!!!!!!const TestComponent () {const list [{id: 1001,name: react},{id: 1002,name: vue}]const onDel (e, id) {console.log(e, id)}return (ul{list.map(item li key{item.id}{item.name}button onClick{(e) onDel(e, item.id)}x/button/li))}/ul)
}function App () {return (divTestComponent //div)
}export default App很多人这个地方都是自己硬背什么如果只传事件参数那就直接写回调参函数名如果还要传递额外参数那就要用箭头函数包一下。其实完全没必要只要理解了就都说通了这个地方我们怎么去理解 我们要知道我们不需要主动去调用事件处理函数我们只是把事件处理函数交出去换句话说我们只需要写一个声明语法而不是调用语法当事件被触发的时候会有监听器或者计时器去调用。 组件状态 一个前提在React hook出来之前函数式组件是没有自己的状态的所以我们统一通过类组件来讲解 初始化状态
通过class的实例属性state来初始化(必须是state属性)state的值是一个对象结构表示一个组件可以有多个数据状态
class Counter extends React.Component {// 初始化状态state {count: 0}render() {return button计数器/button}
}读取状态
class Counter extends React.Component {// 初始化状态state {count: 0}render() {// 读取状态return button计数器{this.state.count}/button}
}修改状态
语法 this.setState({ 要修改的部分数据 }) setState方法作用 修改state中的数据状态更新UI 思想 数据驱动视图也就是只要修改数据状态那么页面就会自动刷新无需手动操作dom 注意事项 不要直接修改state中的值必须通过setState方法进行修改 这里其实就是MVVM思想的体现vue也是这个原理其核心特点就是双向绑定也就是说当view变化的时候数据也会改变。当数据发生变化的时候view也会跟着改变。这里setState方法体现的就是后者。 class Counter extends React.Component {// 定义数据state {count: 0}// 定义修改数据的方法setCount () {this.setState({count: this.state.count 1})}// 使用数据 并绑定事件render () {return button onClick{this.setCount}{this.state.count}/button}
}状态不可变
概念不要直接修改状态的值而是基于当前状态创建新的状态值
错误的直接修改
state {count : 0,list: [1,2,3],person: {name:jack,age:18}
}
// 直接修改简单类型Number
this.state.count
this.state.count
this.state.count 1
this.state.count 1// 直接修改数组
this.state.list.push(123)
this.state.list.spice(1,1)// 直接修改对象
this.state.person.name rose基于当前状态创建新值
this.setState({count: this.state.count 1list: [...this.state.list, 4],person: {...this.state.person,// 覆盖原来的属性 就可以达到修改对象中属性的目的name: rose}
})表单处理
使用React处理表单元素一般有俩种方式
受控组件 推荐使用非受控组件 了解
受控表单组件 什么是受控组件 input框自己的状态被React组件状态控制 React组件的状态的地方是在state中input表单元素也有自己的状态是在value中React将state与表单元素的值value绑定到一起由state的值来控制表单元素的值从而保证单一数据源特性 实现步骤 以获取文本框的值为例受控组件的使用步骤如下
在组件的state中声明一个组件的状态数据将状态数据设置为input标签元素的value属性的值为input添加change事件在事件处理程序中通过事件对象e获取到当前文本框的值即用户当前输入的值调用setState方法将文本框的值作为state状态的最新值
说白了就是将表单的值交给react的状态来控制。
代码实现
import React from reactclass InputComponent extends React.Component {// 声明组件状态state {message: this is message,}// 声明事件回调函数changeHandler (e) {this.setState({ message: e.target.value })}render () {return (div{/* 绑定value 绑定事件*/}input value{this.state.message} onChange{this.changeHandler} //div)}
}function App () {return (div classNameAppInputComponent //div)
}
export default App非受控表单组件 什么是非受控组件 非受控组件就是通过手动操作dom的方式获取文本框的值文本框的状态不受react组件的state中的状态控制直接通过原生dom获取输入框的值 实现步骤
导入createRef 函数调用createRef函数创建一个ref对象存储到名为msgRef的实例属性中为input添加ref属性值为msgRef在按钮的事件处理程序中通过msgRef.current即可拿到input对应的dom元素而其中msgRef.current.value拿到的就是文本框的值
代码实现
import React, { createRef } from reactclass InputComponent extends React.Component {// 使用createRef产生一个存放dom的对象容器msgRef createRef()changeHandler () {console.log(this.msgRef.current.value)}render() {return (div{/* ref绑定 获取真实dom */}input ref{this.msgRef} /button onClick{this.changeHandler}click/button/div)}
}function App () {return (div classNameAppInputComponent //div)
}
export default App阶段性实践项目 练习说明
拉取项目模板到本地安装依赖run起来项目 https://gitee.com/react-course-series/react-component-demo完成tab点击切换激活状态交互完成发表评论功能完成删除评论功能
注意生成独立无二的id 可以使用 uuid 包 yarn add uuid
import { v4 as uuid } from uuid
uuid() // 得到一个独一无二的idapp.js代码如下
import ./index.css
import avatar from ./images/avatar.png
import React from react
import { v4 as uuid } from uuid// 时间格式化
function formatDate (time) {return ${time.getFullYear()}-${time.getMonth()}-${time.getDate()}
}class App extends React.Component {state {// hot: 热度排序 time: 时间排序tabs: [{id: 1,name: 热度,type: hot},{id: 2,name: 时间,type: time}],active: hot,list: [{id: 1,author: 刘德华,comment: 给我一杯忘情水,time: new Date(2021-10-10 09:09:00),// 1: 点赞 0无态度 -1:踩attitude: 1},{id: 2,author: 周杰伦,comment: 哎哟不错哦,time: new Date(2021-10-11 09:09:00),// 1: 点赞 0无态度 -1:踩attitude: 0},{id: 3,author: 五月天,comment: 不打扰是我的温柔,time: new Date(2021-10-11 10:09:00),// 1: 点赞 0无态度 -1:踩attitude: -1}],userComment:}//tab栏切换回调事件tabSwitch (type) {if (type hot) {this.setState({active: hot,list:this.state.list.sort((item1,item2) -(item1.attitude - item2.attitude))})}else {this.setState({active: time,list:this.state.list.sort((item1,item2) -(item1.time - item2.time))})}}//添加评论回调函数addComment () {//写法1//push方法的返回值是数组长度不是数组本身// const newList [...this.state.list]// newList.push(// {// id: uuid(),// author: 临时用户,// comment: this.state.userComment,// time: new Date(),// // 1: 点赞 0无态度 -1:踩// attitude: 0// }// )// this.setState(// {// list:newList,// userComment:// }// )//写法2解构赋值this.setState({list:[...this.state.list,{id: uuid(),author: 临时用户,comment: this.state.userComment,time: new Date(),// 1: 点赞 0无态度 -1:踩attitude: 0}],userComment:})}//评论框变化回调函数commentChange (e) {console.log(e.target.value)this.setState({userComment: e.target.value})}//删除评论的回调事件deleteComment (id) {this.setState({list:this.state.list.filter(item item.id ! id)})}render () {return (div classNameAppdiv classNamecomment-container{/* 评论数 */}div classNamecomment-headspan5 评论/span/div{/* 排序 */}div classNametabs-orderul classNamesort-container{this.state.tabs.map(tab (likey{tab.id}className{tab.type this.state.active ? on : }onClick{() this.tabSwitch(tab.type)}按{tab.name}排序/li))}/ul/div{/* 添加评论 */}div classNamecomment-senddiv classNameuser-faceimg classNameuser-head src{avatar} alt //divdiv classNametextarea-containertextareacols80rows5placeholder发条友善的评论classNameipt-txtvalue{this.state.userComment}onChange{this.commentChange}/button classNamecomment-submit onClick{this.addComment}发表评论/button/divdiv classNamecomment-emojii classNameface/ispan classNametext表情/span/div/div{/* 评论列表 */}div classNamecomment-list{this.state.list.map(item (div classNamelist-item key{item.id}div classNameuser-faceimg classNameuser-head src{avatar} alt //divdiv classNamecommentdiv classNameuser{item.author}/divp classNametext{item.comment}/pdiv classNameinfospan classNametime{formatDate(item.time)}/spanspan className{item.attitude 1 ? like liked : like}i classNameicon //spanspan className{item.attitude -1 ? hate hated : hate}i classNameicon //spanspan classNamereply btn-hover onClick{() this.deleteComment(item.id)}删除/span/div/div/div))}/div/div/div)}
}export default App
