React

Hooks优先的，React核心内容

使用框架 React18 + Redux + ReactRouter + AntD React由Meta公司开发，用于构建Web和原生交互界面的库 可以用来开发网站和原生应用

开发环境搭建

使用 create-react-app 快速搭建开发环境 底层由 Webpack 构建，封装了配置细节，开箱即用

执行命令：

npx create-react-app react-basic

说明：

1. npx Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包(固定写法)，用于创建React项目
3. react-basic React项目的名称(可以自定义)

项目结构：

react - basic/
├── node_modules/		//依赖包
├── public/				//公共文件
├── src/				//源代码
│ ├── App.js			//根组件
│ └── index.js			//项目入口
├── package - lock.json	//锁定依赖版本
└── package.json		//可执行命令与依赖

index.js的说明

//项目入口

//React依赖的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入根组件
import App from './App';

//将App跟组件渲染到id为root的dom节点上
//位置在public.index.html
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

App.js

//根组件
function App() {
  return (
    <div className="App">
      this is App
    </div>
  );
}

export default App;

JSX概念

JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式 优势：HTML的声明式模板写法、JS的可编程能力

JSX并不是标准的JS语法，他是JS的语法拓展，浏览器本身不能识别，需要通过解析工具（BABEL）解析之后才能在浏览器中运行。

JSX中使用JS表达式

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

1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象

const count = 'React';
function App() {
  return (
    <div className="App">
      this is App
      {/* 使用引号传递字符串 */}
      {"this is message"}
      {/* 识别JS变量 */}
      {count}
      {/* 函数调用 */}
      {getName()}
      {/* 方法调用 */}
      {new Date().getDate()}
      {/* 使用JS对象 */}
      <div style={ {color : 'red'} }>this is a div</div>
    </div>
  );
}
function getName() {
  return "this is name";
}
export default App;

JSX列表渲染

语法：使用JS中的map方法遍历渲染列表

const hobby = [{key: 1 ,name: "sing"}, {key: 2 ,name: "dance"}, {key: 3 ,name: "rap"}];
function App() {
  return (
    <div className="App">
      this is App
      {/* 渲染列表 */}
      {/* 需要加上key否则会报错,key由React框架内部使用 提升更新性能 */}
      <ul>{ hobby.map(item => <li key={item.key}>{item.name}</li>) }</ul>
    </div>
  );
}
export default App;

JSX条件渲染

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

{flag && <span>this is span</span>}
{loading ? <span>loading...</span> : <span>this is span</span>}

复杂情况下的条件渲染： 案例：列表中需要根据文章的状态适配三种情况，单图，三图，无图三种模式。 解决方案：自定义函数 + if 判断语句

const articleType = 3
function getArticleTem() {
    if (articleType === 0) {
        return <div>无图文案</div>
    } else if (articleType === 1) {
        return <div>单图文章</div>
    } else {
        return <div>三图文章</div>
    }
}

function App() {
    return (
    	<div className="Aoo">
            {/*调用函数渲染不同的模板*/}
        	{getArticleTem()}
        </div>
    )
}

export default App

React基础事件绑定

语法：on + 事件名称 = {事件处理程序}，遵循驼峰命名 例如：点击事件为 on + click = onClick

function App(){
    const clickButton = () => {
        console.log("按钮被点击了")
    }
    return (
        <div>
            <button onClick={clickButton}></button>
        </div>
    );
}
export default App;

在事件回调函数中设置参数e

function App() {
	const clickHandler = (e) => {
		console.log('button按钮点击了', e)
	}
    return <button onClick={clickHandler}>click me</button>
}
export default App;

传递自定义参数

function App() {
    const clickHandler = (name) => {
        console.log(name);
    }
    // 注意不能直接写函数调用，这里事件绑定需要一个函数引用
    return <button onClick={() => clickHandler('name')}>click me</button>
}
export default App;

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

function App(){
	const clickHandler = (name,e) => {
		console.log(name,e);
	}
	return <button onClick={(e) => clickHandler('name', e)}></button>
}
export default App;

React中的组件

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

//定义组件：
function Button() {
    //组件内部逻辑
    return <button>click me</button>
}

//也可以使用箭头函数
const Button = () => {
    return <button>click me</button>
}

//使用组件
function App() {
    return (
    	<div>
        	<Button />
            <Button></Button>
        </div>
    )
}
export default App;

useState概念

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

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

const [count, setCount] = useState(0)

1. useState是一个函数，返回值是一个数组
2. 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值

案例：实现按钮累加器

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  
  const buttonClick = () => {
    setCount(count + 1);
  }
  
  return (
    <div className="App">
      <h1>Counter: {count}</h1>
      <button onClick={buttonClick}>{count}</button>
    </div>
  );
}

export default App;

修改状态的规则

修改基本数据类型

状态不可变：在React中，状态被认为是只读的，应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

let [count, setCount] = useState(0)

const handleClick = () => {
	// 直接修改无法引发视图更新
	count++
	console.log(count)
	
	//用传入的值修改count，重新使用新的count渲染UI
	setCount(count +1)
}

修改对象

规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改。

const [form, setForm] = useState({name: 'jack'})

const changeForm = () => {
	setForm({
		...form,
		name: 'john'
	})
}