react入门到实战-day1

这react门课我是学习b站黑马的课程，不是打公告哈，我只是过一遍，让自己对学过的知识有印象，所以笔记是有很大部分直接复制总结过来的，方便后面的我进行复习。如有冒犯，联系必删

React介绍以及创建方式

React由Meta公司研发，是一个用于构建Web和原生交互界面的库

react优势：

相较于传统基于DOM开发的优势-组件化开发方式、不错的性能

相较于其它前端框架的优势-丰富的生态、跨平台的支持

create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用

执行命令：

npx create-react-app react-basic

1. npx Node.js工具命令，查找并执行后续的包命令

2. create-react-app 核心包（固定写法），用于创建React项目

3. react-basic React项目的名称（可以自定义）

创建React项目的更多方式

https://zh-hans.react.dev/learn/start-a-new-react-project

两大核心包：react、react-dom

src中保留index.js、App.js文件，其他创建文件删掉

index.js

// 项目的根组件
// APP=>index.js->public/index.html(root)function App() {return (<div className="App">this is</div>);
}export default App;

App.js

// 项目的根组件
// APP=>index.js->public/index.html(root)function App() {return (<div className="App">this is</div>);
}export default App;

JSX基础

JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式

优势：

1. HTML的声明式模版写法 2. JS的可编程能力

但是但是

JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

左边是程序员编写的代码中间是解析工具右边是浏览器运行的代码

JSX基础-高频场景

JSX中使用JS表达式

在JSX中可以通过大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

const message = 'this is message'function getAge(){return 18
}function App(){return (<div><h1>this is title</h1>{/* 字符串识别 */}{'this is str'}{/* 变量识别 */}{message}{/* 函数调用 渲染为函数的返回值 */}{getAge()}{/* 方法的调用 */}{new Date().getDate()}{/* 使用js对象 */}<div style={{ color: 'red' }}>wo sai </div></div>)
}

JSX高频场景-列表渲染

const list = [{id:1001, name:'Vue'},{id:1002, name: 'React'},{id:1003, name: 'Angular'}
]// map循环哪个结构，return就是哪个结构 要加上key 字符串 提高性能
function App(){return (<ul>{list.map(item=><li key={item.id}>{item}</li>)}</ul>)
}

JSX高频场景-条件渲染

语法：在React中，可以通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染

const flag = true
const loading = falsefunction App(){return (<div className="App">//真则显示，假则不显示{flag && <span>this is span</span>}//假则显示loading...,真则显示this is span{loading ? <span>loading...</span>:<span>this is span</span>}</div>)
}

JSX高频场景-复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式

解决方案：自定义函数 + if判断语句

const type = 1  // 0|1|3function getArticleJSX(){if(type === 0){return <div>无图模式模版</div>}else if(type === 1){return <div>单图模式模版</div>}else(type === 3){return <div>三图模式模版</div>}
}function App(){return (<div className="App">{ getArticleJSX() }</div>)
}

React的事件绑定

基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

使用事件参数

传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

React组件基础使用

组件是什么

概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次

组件基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

// 1. 定义组件
function Button(){return <button>click me</button>
}//或者
const Button=()=>{return <button>click me</button>
}// 2. 使用组件
function App(){return (<div>{/* 自闭和 */}<Button/>{/* 成对标签 */}<Button></Button></div>)
}

组件状态管理-useState

基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

本质：与普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

useState是一个函数，返回值是一个数组

数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量

useState的参数将作为count的初始值

//项目的根组件
import { useState } from 'react'function App() {const [count, setCount] = useState(0)const y = () => {setCount(count + 1)}return (<div className='App'><button onClick={y}>{count}</button></div>)
}
export default App

或者

function App(){const [ count, setCount ] = React.useState(0)return (<div><button onClick={()=>setCount(count+1)}>{ count }</button></div>)
}

状态的修改规则

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新，后台会变化，但是视图不会发生改变

修改对象状态

总代码：

组件的基础样式处理

classnames优化类名控制

使用前还是要引入命令npm install classnames

然后还是要导入 import classnames from 'classnames',然后改写