• Day08React——第八天

    useEffect

    概念：useEffect 是一个 React Hook 函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送AJAx请求，更改daom等等

    需求：在组件渲染完毕后，立刻从服务器获取频道列表数据并显示到页面

    语法：useEffect( ()=>{},[] )

    参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作

    操作2是一个数组(可选参)，在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

    React 18 中的 useEffect hook 没有依赖项时，表示该 effect 不依赖于任何状态或 props 的变化，只在组件挂载和卸载时执行一次。这与 React 17 中的类式组件中 componentDidMount 和 componentWillUnmount 生命周期方法的功能类似。

    当 useEffect hook 中传入一个空数组作为依赖项时，表示该 effect 只在组件挂载时执行一次，类似于 React 17 中的 componentDidMount 生命周期方法。

    而当 useEffect hook 中传入特定的依赖项时，表示该 effect 会在这些依赖项发生变化时执行。这与 React 17 中类式组件中 componentDidUpdate 生命周期方法的功能类似，可以根据特定的依赖项来触发 effect 的执行。

    1. export default function App() {
    2.   const [count, updateCount] = useState(0);
    3.   // 空数组依赖项 componentDidMount 只在初始化渲染一次
    4.   useEffect(() => {
    5.     async function getList() {
    6.       const res = await fetch(URL);
    7.       const jsonRes = await res.json();
    8.       console.log(jsonRes);
    9.     }
    10.  
    11.     getList();
    12.   }, []);
    13.  
    14.   //没有依赖项 componentDidMount  初始渲染和组件更新时执行
    15.   useEffect(() => {
    16.     console.log(99999);
    17.   });
    18.  
    19.   // 添加特点依赖项 componentDidUpdate
    20.   useEffect(() => {
    21.     console.log("couont 更新了");
    22.   }, [count]);
    23.  
    24.   return (
    25.     <div>
    26.       App
    27.       <div>{count}div>
    28.       <button
    29.         onClick={() => {
    30.           updateCount(count + 1);
    31.         }}
    32.       >
    33.         +1
    34.       button>
    35.     div>
    36.   );
    37. }

    清除副作用

    在useEffect 中编写的由渲染本身引起的对接组件外部的操作，叫做副作用模式，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器卸载掉，这个过程就是清理副作用

    1. //清除副作用
    2. function Zi() {
    3.   useEffect(() => {
    4.     const timer = setInterval(() => {
    5.       console.log("打印中......");
    6.     }, 1000);
    7.     return () => {
    8.       clearInterval(timer);
    9.     };
    10.   }, []);
    11.  
    12.   return <div>this is Zi componentdiv>;
    13. }
    14.  
    15. export default function App() {
    16.  
    17.   const [show, ifShow] = useState(true);
    18.  
    19.   return (
    20.     <div>
    21.       App
    22.       {show && <Zi />}
    23.       <button
    24.         onClick={() => {
    25.           ifShow(false);
    26.         }}
    27.       >
    28.         卸载组件
    29.       button>
    30.     div>
    31.   );

    自定义 hook

    概念：自定义Hook 是use打头的函数，通过自定义hook函数实现逻辑的封装复用

    封装自定义hook思路：

    1. 声明一个以use打头的函数
    2. 把函数体内可复用的逻辑(只要是可复用的逻辑)
    3. 把组件中用到的状态或方法回调return出去
    4. 组件调用结构赋值
    1. function useShow() {
    2.   const [show, updateShow] = useState(true);
    3.   const ifShow = () => {
    4.     updateShow(!show);
    5.   };
    6.  
    7.   return {
    8.     show,
    9.     ifShow,
    10.   };
    11. }
    12.  
    13. export default function App() {
    14.   const { show, ifShow } = useShow();
    15.   console.log(show);
    16.   return (
    17.     <div>
    18.       {show && <div>this is appdiv>}
    19.       <button onClick={ifShow}>clickbutton>
    20.     div>
    21.   );
    22. }

    Redux

    Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行 作用：通过集中管理的方式管理应用的状态

    基本使用

    子模块

    1. import {createSlice} from '@reduxjs/toolkit'
    2.  
    3. const counterStore = createSlice({
    4. // 模块名
    5.   name: "counter",
    6. // 初始数据
    7.   initialState: {
    8.     count: 0,
    9.   },
    10. // 修改数据的同步方法
    11.   reducers: {
    12.     addCount(state) {
    13.       state.count++;
    14.     },
    15.     saveCount(state) {
    16.       state.count--;
    17.     },
    18.   },
    19. });
    20.  
    21. //  结构出actionCreater
    22. const { addCount, saveCount } = counterStore.actions
    23.  
    24. //获取redcer 函数
    25. const reducer = counterStore.reducer;
    26. // 导出
    27. export {addCount,saveCount}
    28. export default reducer;

    index.js 模块总入口

    1. import { configureStore } from "@reduxjs/toolkit";
    2.  
    3. import counterReducer from "./modules/counterStore";
    4.  
    5. export default configureStore({
    6.   reducer: {
    7.     // 注册子模块
    8.     counter: counterReducer,
    9.   },
    10. });

    index.js 将store注入react中

    1. import React from "react";
    2. import ReactDOM from "react-dom/client";
    3. import App from "./App";
    4. import { Provider } from "react-redux";
    5. import store from "./store";
    6.  
    7. const root = ReactDOM.createRoot(document.getElementById("root"));
    8. root.render(
    9.     // 使用中间件链接 将store注入 react中
    10.   <Provider store={store}>
    11.     <App />
    12.   Provider>
    13. );
    14.

    app.js 页面组件使用

    1. import React from 'react'
    2. import { useSelector, useDispatch } from "react-redux";
    3. import { addCount, saveCount } from "./store/modules/counterStore.js";
    4.  
    5. export default function App() {
    6.   // 通过useSelector获取 store上的数据
    7.   const { count } = useSelector((state) => state.counter);
    8.   //   提交action传参
    9.   const actions = useDispatch();
    10.   return (
    11.     <div>
    12.       <button
    13.         onClick={() => {
    14.           actions(saveCount());
    15.         }}
    16.       >
    17.         -
    18.       button>
    19.       <div>{count}div>
    20.       <button
    21.         onClick={() => {
    22.           actions(addCount());
    23.         }}
    24.       >
    25.         +
    26.       button>
    27.     div>
    28.   );
    29. }

    redux 同步方法参数

    在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对象payload属性上

    1. const counterStore = createSlice({
    2.   // 模块名
    3.   name: "counter",
    4.   // 初始数据
    5.   initialState: {
    6.     count: 0,
    7.   },
    8.   // 修改数据的同步方法
    9.   reducers: {
    10.     addCount(state, options) {
    11.       state.count += options.payload;
    12.  
    13.     },
    14.     saveCount(state, options) {
    15.       state.count -= options.payload;
    16.     },
    17.   },
    18. });

    异步方法

    创建模块

    1. import { createSlice } from "@reduxjs/toolkit";
    2. import axios from "axios";
    3.  
    4. const channeStore = createSlice({
    5.   // 模块名
    6.   name: "channe",
    7.   // 初始数据
    8.   initialState: {
    9.     list: [],
    10.   },
    11.   reducers: {
    12.     getList(state, options) {
    13.       state.list = options.payload;
    14.     },
    15.   },
    16. });
    17.  
    18. //  结构出actionCreater
    19. const { getList } = channeStore.actions;
    20.  
    21. async function asyncGetList(actions) {
    22.   const {
    23.     data: {
    24.       data: { channels },
    25.     },
    26.   } = await axios.get("http://geek.itheima.net/v1_0/channels");
    27.   actions(getList(channels));
    28. }
    29.  
    30. //获取redcer 函数
    31. const reducer = channeStore.reducer;
    32. // 导出
    33. export { asyncGetList };
    34.  
    35. export default reducer;

    app页面上使用

    1. export default function App() {
    2.   const actions = useDispatch();
    3.   useEffect(() => {
    4.     asyncGetList(actions);
    5.   }, []);
    6.  
    7.   return (
    8.       <div>
    9.         <ul>
    10.           {list.map((i) => {
    11.             return <div key={i.id}>{i.name}div>;
    12.           })}
    13.         ul>
    14.       div>
    15.
  • );
  • }

  • 相关阅读:
    前端环境搭建指南-自用
    实验1：Arduino的nRF24L01单向收发实验
    docker 命令
    5 - 1 判断题
    android 在java中执行命令的方法
    IEJoin: 提高 Databend range join 性能
    两个不起眼的站内小细节，决定你的独立站转化率
    java8 LocalDate、LocalTime、LocalDateTime
    Cyberdog GPTS建立过程笔记
    MCU通过KT6368A用SPP透传发送1K左右的数据，手机APP显示是3个包或者4个包，但是我看手册说最大一个包是512，理论应该是两个包吧，请问这正常吗？
  • 原文地址：https://blog.csdn.net/gu644335363/article/details/137853864