React学习（一），2025.3.23,笔记记录

看晴天了
104 阅读3分钟

1、react的创建

创建一个 React 应用 – React 中文文档 npx create-react-app name

进入根目录npm strat image.png

2、jsx的本质

Babel官网 使用BABEL把H5转化为js代码

const count = 100000;

function test() {
  return 'jjjaaaccckkk'
}

function App() {
  return (
    <div className="App"> 
    红红火火恍恍惚惚
    {'this is a test'}
    {count}
    {test()}<br/>
    {new Date().getDate()}
    <div style={{color:'red'}}>啦啦啦啦啦啦啦</div>
    </div>
  );
}

export default App;

3、if条件语句的使用

const isLogin = 1;

function Login(){
  if(isLogin === 1){
    return <div>登录成功</div>
  }else if (isLogin === 0){
    return <div>请登录</div>
  } else{
    return <div>请登录</div>
  }
}

function App() {
  return (
    <div className="App"> 
    {Login()}
    </div>
  );
}

export default App;

4、基础事件绑定

function App() {
  const Login = (name,e) => {
  console.log('点击了按钮',name,'+++++',e.target);
  }
  return (
    <div className="App"> 
    <button onClick={(e) => Login('zhangsan',e)}>jhhhhhh</button>
    </div>
  );
}

export default App;

5、react组件基本使用

1、写在一个js中

function Test(){
  return <button>按钮</button>
}

function App() {
  return (
    <div className="App"> 
      <Test></Test>
    </div>
  );
}

export default App;

6、useState双向绑定数据，相当于vue的v-model

import { useState } from 'react'

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0)
  //  绑定的数据 改变数据的函数
  const handleClick = () => {
  //不能直接count++,要替换而不是修改
    setCount(count + 1)
  }
  return (
    <div>  
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

export default App;


复杂类型
function App() {
  const [from, setFrom] = useState({name: 'tom', age: 20})
  //  绑定的数据 改变数据的函数
  const handleClick = () => { 
    setFrom(
      {
        ...from,
        name: 'jerry',
      }
    )
  }
  return (
    <div>  
      <button onClick={handleClick}>{from.name}</button>
    </div>
  );
}

7、react的样式，类名使用className='name'

import './index.css';//引入外部css

const style = {
  color:"red",
  fontSize:"80px"
}

function App() { 
  return (
    <div>   
      <span style={style}> hello</span>
      <div className='foo'>哈哈哈哈</div>
    </div>
  );
}

export default App;

8、JS库Loadsh的使用

Lodash 简介 | Lodash中文文档 | Lodash中文网
yarn add loadsh
导入 import lodash from 'lodash'

9、（了解）JS库classnames切换类名控制

yarn add classnames按照命令

   // className={`nav-item ${type === item.type && 'active' }`}
   className={classNames('nav-item', { active: type === item.type })}

10、受控组件绑定及使用useState实现输入框，输入及更改双向绑定

import {useState} from 'react';

function App() { 
  const [count, setCount] = useState('');
  return (
    <div>    
      <input 
      value={count}
      onChange={e => setCount(e.target.value)}
      type='text'
      ></input>
    </div>
  );
}

export default App;

11、在React中获取DOM

image.png

import {useRef} from 'react'

function App() {
  const inputRef = useRef(null)
  const showDom = () => {
    console.dir(inputRef.current)
  }
  return (
    <div>    
      <input  
      type='text'
      ref={inputRef}
      ></input>
      <button onClick={showDom}>获取DOM</button> 
    </div>
  );
}

export default App;

12、uuid生成随机数，dayjs以当前时间为标准生成固定格式

//安装
yarn add ~~
//引入
import {v4 as uuidV4} from 'uuid'
import dayjs from 'dayjs'
//使用
rpid: uuidV4(),
ctime: dayjs(new Date()).format('MM-DD hh:mm'),

13、组件通讯

1、父传子

props是只读数据，不允许直接修改props中的数据

function Son (props) { 
  return (
    <div>    
      this is son {props.name}
    </div>
  );
}

function App() { 
  const name = "this is App"
  const age = 18
  return (
    <div>      
      <Son name={name} age={age} />
    </div>
  );
}

export default App;

2、父传子特殊的children属性

function Son (props) { 
  return (
    <div>    
      this is son ,{props.children}
    </div>
  );
}

function App() {  
  return (
    <div>      
      <Son  >
        <div>
          this is son son
        </div>
      </Son>
    </div>
  );
}

export default App;

3、子传父

image.png

4、兄弟组件传值，借助父组件，还是父子通信

import { useState } from 'react';

function Son ({onGet} ) {  
  const name = '1111111111111111111111';
  return (
    <div>     
      111111111111111111111
      <button onClick={() => {onGet(name)}}>点击</button>
    </div>
  );
}

function Son22(props) {
  return (
    <div>   
      2222222222222222222222 ,,,{props.name}
    </div>
  );
}

function App() {   
  const [name, setName] = useState('');
  const getAname = (name) => {
    console.log(name);
    setName(name);
  } 
  return (
    <div>       
      <Son onGet={getAname}></Son>
      <Son22 name={name}></Son22>
    </div>
  );
}

export default App;

5、使用Context机制跨层级组件通信，挂载在顶层组件上

import { createContext, useContext  } from "react";

const MyContext = createContext();

function A () {
  return (
    <div>
      <h1>Hello World</h1>
      <B></B>
    </div>
  );
}

function B () {
  const mas =  useContext(MyContext);
  return (
    <div>
      <h1>{mas}</h1>
      <h1>BBBBBBBBBBBBBB</h1>
    </div>
  );
}

function App() {    
  const mas = 'llllllllllllllllllllllllll'
  return (
    <div>      
      <MyContext.Provider value={mas}>
        zzzzzzzzzzzzzzzzzzzz
      <A></A>
      </MyContext.Provider>   
    </div>
  );
}

export default App;

14、useEffect的基础使用，用于发送AJAX请求,更新DOM列表数据

依赖项变化就会引发，副作用函数

import {  useEffect,useState } from "react";

const URL = "https://geek.itheima.net/v1_0/channels";

function App() {     
  const [list, setList] = useState([]);
  useEffect(() => { 
    async function getList() {
      const res = await fetch(URL);
      const list = await res.json();
      setList(list.data.channels)
    }
    getList()
  }, [])
  return (
    <div>    
      {list.map((item) => {
        return (
          <li key={item.id}>{item.name}</li>
        );
      }
      )} 
    </div>
  );
}

export default App;

15、useEffect[ ]依赖项的更改，类似vue生命周期

image.png

16、卸载时触发，清除useEffect副作用

import {  useEffect,useState } from "react";
 
function Son(){
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('子组件定时器')
    },1000)
    return () => {
      console.log('子组件销毁')
      clearInterval(timer)
    }
  },[])
  return (
    <div>
      son
    </div>
  )
}

function App() {      
  const [show,setShow] = useState(true)
  return (
    <div>
      {show && <Son />} 
      <button onClick={() => setShow(!show)}>按钮</button>
    </div>
  );
}

export default App;

17、自定义Hook函数就是需要服用的函数，及以use打头的函数

import {   useState } from "react";
  
function useToggle(initialValue) { 
  const [show,setShow] = useState(true)
  const taggle = () => setShow(!show)
  return {
    show,
    taggle
  }
}

function App() {      
  const {show,taggle} = useToggle(true)
  return (
    <div>
      {show && 'hhhhhhhhhhhhhhhhhhh'} 
      <button onClick={taggle}>按钮</button>
    </div>
  );
}

export default App;

18、ReactHooks函数使用规则

1、不可以在组件外使用
2、if for 组件内部函数不可使用

19、本地服务，yarn add json-server -D

"serve": "json-server db.json --port 3004"

image.png

20、Redux集中状态管理工具，可以独立于框架运行

image.png image.png

21、redux插件的安装yarn add @reduxjs/toolkit react-redux

yarn add @reduxjs/toolkit react-redux image.png

22、redux使用

image.png image.png 注入到跟组件中 image.png 在组件中使用 image.png

23、redux传参

1、先在counterStore中定义，action.payload固定用法传参 image.png 2、在组件中使用 image.png

24、异步操作

image.png

image.png

25、reactRoute路由的学习

yarn add react-router-dom安装项目包 Picking a Mode | React Router 四部配置

image.png

image.png

image.png

26、路由传参，导航栏传参

<button onClick={() => navigate("/article?id=1001&name=jack")}>跳转传参</button>

image.png image.png

image.png image.png

27、嵌套路由

image.png

image.png

28、配置404页面

image.png

29、路由模式

image.png

30、别名路径配置，把@/解析为src/

image.png

image.png

"配置三个文件"
//craco.config.js
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
};


//package.json修改webpake的配置
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  
//jsconfig.json这是vscode的联想提示配置
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

31、mock数据，前端数据接口模拟

image.png

image.png

image.png

32、Ant Design 组件使用

组件总览 - Ant Design TabBar 标签栏 - Ant Design Mobile

"主题色配置" image.png

33、dayjs的使用

dayjs( new Date()).format('YYYY-MM') image.png

34、scss安装学习

yarn add sass -D把scss安装在测试环境

35、antD学习

不要死记命令，记得看文档

yarn add antd 安装依赖包 组件总览 - Ant Design

36、token持久化

image.png

const userSlice = createSlice({
    name:'user',
    initialState: {
        token: localStorage.getItem('token') || '',
    },
    reducers:{
        setToken(state, action) {
            state.token = action.payload;
            localStorage.setItem('token', action.payload)
        }
    }
})

37、添加token到请求头

// 添加请求拦截器
request.interceptors.request.use((config) => {
  //添加请求头
  const token = getToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
          前端要求写法                后端要求写法
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

image.png

38、根据token控制路由的跳转

import { getToken } from "@/utils";
import { Navigate } from "react-router-dom";

export function AuthRoute ({ children }){
    const token = getToken()
    if(token){
        return <>{children}</>
    }else{
        return <Navigate to={'/login'} replace />
    }
}

image.png

39、样式reset(重置)

样式reset npm install normalize.css
在index.js中进行初始化import 'normalize.css'

html,
body {
  margin: 0;
  height: 100%;
}

#root {
  height: 100%;
}

40、获取当前路由，钩子useLocation()

使用钩子useLocation()

    const location = useLocation()
    console.log(location.pathname)

41、useSelector()从redux中获取数据

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(fetchUserInfo())
    },[dispatch])

    const name = useSelector(state => state.user.userInfo.name)

42、useDispatch()获取 Redux store 的 dispatch 方法

useDispatch() 是 React-Redux 提供的一个 Hook，用于在函数组件中获取 Redux store 的 dispatch 方法，从而允许你派发 action 来更新 Redux store 的状态。

43、处理token失效以及401跳转登入页

image.png

44、在react中使用第三方Echarts基础图表插件

import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

//柱状图
const BarChart = ({title}) => {
    const chart = useRef(null)
    useEffect(() => {
        //1、获取渲染的节点
        const chartDom = chart.current
        //2、图表初始化生成示例对象
        var myChart = echarts.init(chartDom);

        //3、准备图表参数
        const option = {
            title:{
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['vue','react','Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }
            ]
        };

        //4、使用图表参数完成图表的渲染
        option && myChart.setOption(option);
    }, [title])
    return <div ref={chart} style={{width: '500px', height: '400px'}}></div>
}

export default BarChart

45、富文本编辑器react-quill

npm i react-quill@2.0.0-beta.2

import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'

const Publish = () => {
  return (
    // ...
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 16 }}
    >
      <Form.Item
        label="内容"
        name="content"
        rules={[{ required: true, message: '请输入文章内容' }]}
      >
        <ReactQuill
          className="publish-quill"
          theme="snow"
          placeholder="请输入文章内容"
        />
      </Form.Item>
    </Form>
  )
}

安装后如果出现两个把严格模式关了即可 image.png

46、自定义hooks函数

image.png

47、Popconfirm气泡确认框

气泡确认框 Popconfirm - Ant Design

48、项目打包和本地预览

image.png

49、打包优化-配置路由懒加载

image.png image.png

50、打包优化-包体积分析

通过可视化的方式，直观的体现项目中各种打包后的体积大小，方便优化 image.png image.png

51、打包优化-CDN优化

image.png

avatar
文章
阅读
粉丝