<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
</head>
<body>
了解React
<!-- React是一个用于构建web和原生态交互界面的库
相对于传统DOM开发优势：组件化开发方式，还有不错的性能
相较于其他前端框架的优势：有丰富的生态和跨平台支持
-->
<!-- 使用create-react-app快速搭建开发环境
create-react-app是一个快速创建React开发1环境的工具，底层由Webpack构建，封装了配置细节，开箱即用
执行命令：
npx create-react-app react-basic
1.npx Node.js工具命令，查找执行后续的包命令
2.creat-react-app 核心包（固定写法），用于创建React项目
3.react-basic React项目的名称（可以自定义）
在创建好的项目里可以看到package.json文件
里面的主要依赖是
"react": "^18.2.0",
"react-dom": "^18.2.0",
核心命令是：
"start": "react-scripts start",
"build": "react-scripts build",
刚开始学习建议先把src里的文件清理，只需保留app.js和index.js
-->
组件
<!--
概念：一个组件就是用户界面的一部分，它可以由自己的逻辑外观，组件之间可以相互嵌套，也可以复用多次
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用
在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可（在App内）
// 1. 定义组件
const Button = () => {
// 业务逻辑组件逻辑
return <button>click me!</button>
}
// 箭头函数定义
function Button(){
return <button>click me!</button>
}
// 常规函数定义
function App() {
return (
<div className="App">
{/* 2. 使用组件（渲染组件） */}
{/* 自闭和（单标签） */}
<Button />
{/* 成对标签 */}
<Button></Button>
</div>
)
}
-->
useState基础使用
<!-- useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）
const [count,setCount] = useState(0)
// 数组接收useState
1.useState是一个函数，返回值是一个数组
2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3.useState的参数将作为count的初始值
// useState实现一个计数器按钮
import { useState } from 'react'
//引入useState
// const是不能改变值，但现在是复杂数据类型，修改的是引入地址里面的值，不是修改了引入地址
function App () {
// 1. 调用useState添加一个状态变量
// count 状态变量
// setCount 修改状态变量的方法
const [count, setCount] = useState(0)
// 2. 点击事件回调
const handleClick = () => {
// 作用:
// 1. 用传入的新值修改count
// 2. 重新使用新的count渲染UI
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
}
-->
useState修改规则
<!-- 在React中，状态被认为是只读，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新
function App () {
let [count, setCount] = useState(0)
const handleClick = () => {
// 直接修改 无法引发视图更新
// count++
// console.log(count)
setCount(count + 1)
}
return (
<div>
<button onClick={handleClick}>{count}</button>
</div>
)
-->
<!-- 修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
const [form, setForm] = useState({ name: 'jack' })
const changeForm = () => {
// 错误写法：直接修改
// form.name = 'john'
// 正确写法：setFrom 传入一个全新的对象（新值替换老值）
setForm({
...form,
// 展开原本有的字段
name: 'john'
})
}
return (
<div>
<button onClick={changeForm}>修改form{form.name}</button>
</div>
)
-->
组件基础样式方案
<!--
1.行内样式（不推荐）
2.class类名控制
// 在js文件里导入样式（css）
import './index.css'
// 通过类名控制才需要导入
const style = {
color: 'red',
fontSize: '50px'
}
function App () {
return (
<div>
{/* 行内样式控制 */}
<span style={style}>this is span</span>
{/* <span style={color: 'red'，fontSize: '50px'}>this is span</span> */}
{/* 这样写也行 */}
{/* 通过class类名控制 */}
<span className="foo">this is class foo</span>
{/* className是规定好的名字，不能用class */}
</div>
)
}
-->
</body>
</html>
