一、React简介
React由Meta公司研发，是一个用于 构建Web和原生交互界面的库
优势：组件化开发、不错的性能、丰富生态（所有框架中最好）、跨平台（web、ios、安卓）
开发环境搭建
打开相应文件夹 新建终端并输入
npx create-react-app react1就可以得到一个名为react1 的项目
运行一下↓
在package.json中，这是两个核心依赖包
"react": "^18.2.0",
"react-dom": "^18.2.0",下面是可以执行的命令，开发阶段执行start，开发完毕打包执行build
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},所有的开发工作在src中执行，最开始只保留App.js和index.js即可
然后精简一下App.js和index.js
//index.js
//项目入口
//导入必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目根组件
import App from './App';
//把App根组件渲染到index.html中id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);//App.js
//项目根组件
function App() {
return (
<div className="App">
this is react
</div>
);
}
export default App;
二、JSX基础
JSX基础和概念
JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写 UI模版的方式
既具有HTML声明式写法，又有JS的可编程能力
JSX在原生JS中无法被识别，那如何渲染到浏览器中？
JSX本质
是js语法扩展，需要解析工具（babel）才能在浏览器中运行
Babel · Babel (babeljs.io)
JSX场景
jsx可以通过{}识别js表达式，有以下四种情况：
1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象
function printName(){
return 'Rose'
}
function App() {
const count = 1000
return (
<div className="App">
{/*1 使用引号传递字符串 */}
{'this is react project'}
{/* 2 识别js变量 */}
{count}
{/* 3 函数调用 */}
{printName()}
{/* 4 方法调用 */}
{new Date().getDate()}
{/* 5 使用js对象 */}
{/* 外层花括号是识别表达式的语法，内层是对象结构 */}
<div style={{color : 'red'}}>this is red color</div>
</div>
);
}
export default App;
JSX列表渲染
核心方法是map，循环哪个结构就在map里return哪个结构，不要忘记每个循环元素都要有唯一标识key
const list = [
{
name:'Alice',
id:1001
},
{
name:'Bob',
id:1002
},
{
name:'Candy',
id:1003
}
]
function App() {
return (
<div className="App">
this is a list
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
);
}
JSX条件渲染
基础情况
可以通过逻辑与&&（控制一个元素）和三元表达式：？（两个元素）实现基础的条件渲染
const showSpan = true
function App() {
return (
<div className="App">
{/* 逻辑& */}
{showSpan && <span>hello</span>}
{/* 三元表达式 */}
{showSpan ? <span> showSpan为true</span> : <span>showSpan为false</span>}
</div>
);
}复杂情况
用if-else
const type = 1
function getType(){
if(type === 1){
return <div>我是1</div>
}else if(type === 2){
return <div>我是2</div>
}else{
return <div>我是3</div>
}
}
function App() {
return (
<div className="App">
{/* 逻辑& */}
{getType()}
</div>
);
}三、事件绑定
on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名
function App() {
let count = 0
const handleClick = () => {
count ++
console.log('button被点击了'+count)
}
return (
<div className="App">
<button onClick={handleClick}> click </button>
</div>
);
}如果是自定义参数，要写成箭头函数
<button onClick={() => handleClick(1)}> click </button>事件对象e和自定义参数都需要
<button onClick={(e) => handleClick(e, 1)}> click </button>四、React组件
在不同的前端框架，组件是通用概念，组件之间可以嵌套也可以复用
const Button = () => {
return <button>Click</button>
}
function App() {
return (
<div className="App">
<Button></Button>
<Button/>
</div>
);
}五、useState
useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果
即数据驱动视图
下面是一个典型自增按钮
import { useState } from "react";
function App() {
//count是状态变量， setCount是修改变量的方法 每次修改count必须调用setCount
const [count, setCount] = useState(0)
const handleClick = () => {
setCount(count + 1)
}
return (
<div className="App">
<button onClick={handleClick}>{count}</button>
</div>
);
}
react中的状态只读，每次应该通过修改状态的函数来替换，直接修改不能引发视图更新
修改对象属性
import { useState } from "react";
function App() {
const [student, setStu] = useState({name:'Jack',age:20})
const handleClick2 = () => {
setStu({
...student, //这一行保留，那么只修改name一个属性，反之原有属性都会被覆盖掉
name:'XiaoMing'
})
console.log(student)
}
return (
<div className="App">
<button onClick={handleClick2}>{student.name}</button>
</div>
);
}六、组件样式处理
行内样式
const style = {
color:'pink',
fontWeight:'700',
fontSize:'20px'
}
function App() {
return (
<div className="App">
<span style={style}> 11 </span>
</div>
);
}class类名控制
//index.css
.fc-lightblue{
color: lightblue;
}
//index.js
import './index.css'
function App() {
return (
<div className="App">
<span className='fc-lightblue'> 11 </span>
</div>
);
}案例应用
lodash数组排序
Lodash Documentation
npm i lodash
_.orderBy(collection, [iteratees=[_.identity]], [orders])
//参数分别是 要排序的数组 排序参照属性 排序方法(asc/desc)classnames动态控制类名
npm i classnames
import classNames from 'classnames'
<span className={classNames('class1', {class2: type === item.type})}>
{item.text}
</span>
