中卫市网站开发制作,免费友情链接网,网站建设营销技巧,做网站详细步骤说明#xff1a;react版本为 18.3.1
React是什么
React由Meta公司研发#xff0c;是一个用于构建Web和原生交互界面的库。#xff08;开发基于浏览器的web应用和基于mac和android的移动应用#xff09;React的优势
1.相较于传统基于DOM开发的优势#xff1a;组件化的开…说明react版本为 18.3.1
React是什么
React由Meta公司研发是一个用于构建Web和原生交互界面的库。开发基于浏览器的web应用和基于mac和android的移动应用React的优势
1.相较于传统基于DOM开发的优势组件化的开发方式、不错的性能。
2.相较于其他前端框架的优势丰富的生态、跨平台支持。开发环境搭建: 使用create-react-app快速搭建开发环境
create-react-app是一个快速创建React开发环境的工具底层由Webpack构建封装了配置细节开箱即用。
执行命令npx create-react-app react-basic
1. npx Node.js工具命令查找并执行后续的包命令
2. create-react-app 核心包固定写法用于创建React项目
3. react-basic React项目的名称可以自定义其他创建方式https://zh-hans.react.dev/learn/start-a-new-react-project
JSX
什么是JSX
概念JSX是JavaScript和XML(HTML)的缩写表示在js代码中编写HTML模板结构它是React中编写UI模板的方式。
优势1.HTML的声明式模板写法2.JS的可编程能力JSX的本质
JSX并不是标准的JS语法他是JS的语法扩展浏览器本身不能识别需要通过解析工具做解析后才能在浏览器中运行。JSX中使用JS表达式
在JSX中可以通过大括号语法{}识别JavaScript中的表达式比如常见的变量、函数调用、方法调用等。
1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象const name macyfunction getName () {return name;
}function App() {return (divhello react{/*使用引号传递字符串*/}{}{/*识别js变量*/}{name}{/*函数调用*/}{getName()}{/*方法调用*/}{new Date().getFullYear()}{/*使用js对象*/}div style{{color: red}}看看/div/div);
}JSX实现列表渲染
const list [{id: 1, name: 张三, age: 32},{id: 2, name: 李四, age: 30},{id: 3, name: 王五, age: 28},
]function App() {return (div{/*列表渲染*/}ul{list.map(item li key{item.id}{item.name}/li)}/ul/div);
}JSX实现条件渲染
语法在React中可以通过逻辑与运算符、三元表达式?:实现基础的条件渲染。
1. 逻辑与运算符{flag spanxxx/span}
2. 三元表达式?:{flag ? spanxxx/span : divyyy/div}const loading true;function App() {return (div{/* 条件渲染*/}{loading span加载中/span}{loading ? span加载中/span : span加载成功/span}/div);
}JSX实现复杂的条件渲染
多if语句const type 1; // 类型 0, 1 ,2function getTempByType(type){if(type 0){return div天气晴/div}else if(type 1){return div天气雨/div}else if(type 2){return div天气雪/div}
}function App() {return (div{/* 复杂的条件渲染*/}{getTempByType(type)}/div);
}React中的事件绑定
语法on 事件名称 {事件处理程序}整体上遵循驼峰命名法如onClick、onMouseOver。function App() {const change () {console.log(---点击按钮 )}return (divbutton onClick{change}按钮/button/div);
}1.使用事件对象参数语法在事件回调函数中设置形参efunction App() {const change (e) {console.log(---点击按钮,e )}return (divbutton onClick{change}按钮/button/div);
}2.传递自定义参数语法事件绑定的位置改造成箭头函数的写法在执行实际处理业务函数的时候传递实参(注意不能直接写成函数调用这里事件绑定需要一个函数引用)function App() {const change (name) {console.log(---传递的参数,name)}return (divbutton onClick{() change(macy)}按钮/button/div);
}3.同时传递事件对象和自定义参数语法在事件绑定的位置传递实参e和自定义参数在处理函数中声明形参注意顺序对应function App() {const change (name,e) {console.log(---传递的参数,name,e)}return (divbutton onClick{(e) change(macy,e)}按钮/button/div);
}React组件
组件是什么组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
概念一个组件就是用户界面的一部分它可以有自己的逻辑和外观组件之间可以互相嵌套也可以复用多次
在react中一个组件就是首字母大写的函数内部存放了组件的逻辑和视图UI渲染组件只需要把组件当成标签书写即可//1.定义组件
// function MyComponent() {
// return div这是自定义组件内容/div
// }
// 或者箭头函数方式
const MyComponent () {return div这是自定义组件内容/div
}
function App() {return (div{/* 2.使用组件/渲染组件*/}{/*自闭和*/}MyComponent /{/* 成对标签*/}MyComponent/MyComponent/div);
}useState
useState基础使用
useState是一个React Hook函数它允许我们向组件添加一个状态变量从而控制影响组件的渲染结果
本质和普通JS变量不同的是状态变量一旦发生变化组件的视图UI也会跟着变化数据驱动视图
语法const [状态变量, 设置状态的函数] useState(初始值)
例如cosnt [count, setCount] useState(0);1.useState是一个函数返回值是一个数组2.数组中第一个参数是状态变量第二个参数是set函数用来修改状态变量3.useState的参数将作为初始值// useState实现一个计数器按钮
import { useState } from react;
function App() {// 1.调用useState添加一个状态变量// count: 状态变量// setCount: 更新状态变量的函数const [count, setCount] useState(0);// 2.点击事件回调const handleClick () {// 作用1.用传入的新值修改count 2.重新使用新的count值渲染UIsetCount(count 1);}return (divbutton onClick{handleClick}{count}/button/div);
}修改状态的规则
状态不可变在react中状态被认为是只读的我们应该始终替换它而不是修改它直接修改状态不能引发视图更新
const handleClick () {// 1.不能触发视图更新// count // 2.可以触发视图更新setCount(count 1);
}
修改对象状态
规则对于对象类型的状态变量应该始终传给set方法一个全新的对象来进行修改import { useState } from react;
function App() {// 1.调用useState添加一个状态变量const [user, setUser] useState({name: macy, gender: 男});// 2.点击事件回调const handleClick (gender) {// 1.错误写法// user.gender gender// 2.正确写法setUser({...user,gender,})}return (divdiv{user.name} --- {user.gender}/divbutton onClick{() handleClick(女)}点击/button/div);
}组件的样式处理
组件基础样式方式
react组件基础的样式控制有两种方式1.行内样式不推荐 2. css类名控制/*index.css文件内容*/
.my-style{color: green;font-size: 50px;
}
.new-style{color: pink;
}
.foo{font-weight: bold;
}//导入样式
import ./index.cssconst style {color: blue,fontSize: 28px
}
const flag true
function App() {return (div{/* 行内样式控制 */}div style{{color: red,fontSize: 18px}}hello react/divdiv style{style}hello react!!!/div{/* 通过class类名控制*/}div classNamemy-stylehello world/div{/* 通过条件控制类名*/}div className{my-style ${flag new-style}}hello world/div/div);
}引入classnames库
地址https://github.com/JedWatson/classnames 代码片段 {/*引入classnames库*/}div className{classNames(my-style, {new-style:flag, foo: flag})}hello world/div受控表单绑定
概念使用React组件的状态useState控制表单的状态React(state) input/ (value) 1.state绑定到input的value属性2.把input最新的value值设置给state准备一个react状态值 const [value, setValue] useState()通过value属性绑定状态通过onChange属性绑定状态同步的函数
input typetext value{value} onChange{(e) setValue(e.target.value)}/demo:
import {useState} from react;function App() {// 通过value属性绑定react状态const [value, setValue] useState();return (divp 状态值{value}/p{/*绑定onChange事件通过参数e拿到输入框最新的值反向修改到react状态*/}input typetext value{value} onChange{(e) setValue(e.target.value)}//div);
}React中获取DOM
在React组件中获取/操作DOM需要使用useRef钩子函数分为两步
使用useRef创建ref对象并于jsx绑定 const inputRef useRef(null) 在DOM可用时通过inputRef.current拿到DOM对象 console.loginputRef.current
import {useRef} from react;function App() {// useRef生成ref对象并绑定到dom标签上const inputRef useRef(null)// dom可用时ref.current获取dom// 渲染完毕之后dom生成之后才可用const handleClick () {console.dir(inputRef.current)}return (divinput typetext ref{inputRef}/button onClick{handleClick}点击/button/div);
}
