React速成

useRef获取DOM

组件通讯

子传父

function Son({ onGetMsg }){
  const sonMsg = 'this is son msg'
  return (
    <div>
      {/* 在子组件中执行父组件传递过来的函数 */}
      <button onClick={()=>onGetMsg(sonMsg)}>send</button>
    </div>
  )
}


function App(){
  const getMsg = (msg)=>console.log(msg)
  
  return (
    <div>
      {/* 传递父组件中的函数到子组件 */}
       <Son onGetMsg={ getMsg }/>
    </div>
  )
}

兄弟组件------状态提升

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B

import { useState } from "react"

function A ({ onGetAName }) {
  // Son组件中的数据
  const name = 'this is A name'
  return (
    <div>
      this is A compnent,
      <button onClick={() => onGetAName(name)}>send</button>
    </div>
  )
}

function B ({ name }) {
  return (
    <div>
      this is B compnent,
      {name}
    </div>
  )
}

function App () {
  const [name, setName] = useState('')
  const getAName = (name) => {
    setName(name)
  }
  return (
    <div>
      this is App
      <A onGetAName={getAName} />
      <B name={name} />
    </div>
  )
}

export default App

爷孙组件

// App -> A -> B

import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext()

function A () {
  return (
    <div>
      this is A component
      <B />
    </div>
  )
}

function B () {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B compnent,{msg}
    </div>
  )
}

function App () {
  const msg = 'this is app msg'
  return (
    <div>
      {/* 2. 在顶层组件 通过Provider组件提供数据 */}
      <MsgContext.Provider value={msg}>
        this is App
        <A />
      </MsgContext.Provider>
    </div>
  )
}

export default App

useEffect

React中useEffect钩子-CSDN博客

自定义hook

自定义 Hook 是一种在 React 函数组件中重用状态逻辑的方式。它们可以让你将组件逻辑提取到可重用的函数中,从而提高代码的可读性和可维护性。自定义 Hook 的命名通常以 use 开头,并且它们必须接受一个函数参数并返回 React 的状态和函数(例如 useStateuseEffect 所返回的内容)。

以下是如何创建和使用自定义 Hook 的一个简单示例:

1. 创建一个自定义 Hook

假设我们要创建一个自定义 Hook 来处理用户的登录状态。我们可以创建一个名为 useUserAuth 的 Hook。

import { useState, useEffect } from 'react';  
  
function useUserAuth() {  
  const [isAuthenticated, setIsAuthenticated] = useState(false);  
  
  useEffect(() => {  
    // 这里可以添加一些逻辑,比如检查本地存储、调用 API 等  
    // 假设我们从本地存储中获取登录状态  
    const storedIsAuthenticated = localStorage.getItem('isAuthenticated');  
    if (storedIsAuthenticated === 'true') {  
      setIsAuthenticated(true);  
    }  
  
    // 清理函数(可选)  
    return () => {  
      // 组件卸载时执行的逻辑,比如清除定时器、取消网络请求等  
    };  
  }, []); // 空数组作为依赖项,表示这个 effect 只在组件挂载和卸载时运行一次  
  
  const login = () => {  
    setIsAuthenticated(true);  
    localStorage.setItem('isAuthenticated', 'true');  
  };  
  
  const logout = () => {  
    setIsAuthenticated(false);  
    localStorage.setItem('isAuthenticated', 'false');  
  };  
  
  return { isAuthenticated, login, logout };  
}  
  
export default useUserAuth;

2. 使用自定义 Hook

现在,我们可以在任何组件中使用这个自定义 Hook。

import React from 'react';  
import useUserAuth from './useUserAuth'; // 假设 useUserAuth 在同一个目录下  
  
function App() {  
  const { isAuthenticated, login, logout } = useUserAuth();  
  
  return (  
    <div>  
      <h1>User Authentication</h1>  
      {isAuthenticated ? (  
        <button onClick={logout}>Logout</button>  
      ) : (  
        <button onClick={login}>Login</button>  
      )}  
      <p>You are {isAuthenticated ? 'logged in' : 'logged out'}</p>  
    </div>  
  );  
}  
  
export default App;

注意事项

  1. 命名规范 :自定义 Hook 的命名应该以 use 开头,这有助于 React 和其他开发者识别出这是一个 Hook。
  2. 避免在类组件中使用:自定义 Hook 只能在函数组件和自定义 Hook 中使用,不能在类组件中使用。
  3. 副作用 :在自定义 Hook 中使用 useEffect 来处理副作用,比如数据获取、订阅或手动更改 React 组件中的 DOM。
  4. 状态提升:当多个组件需要共享状态时,可以将这些状态提升到一个共同的父组件中,或者使用全局状态管理解决方案(如 Redux)。自定义 Hook 可以帮助封装和重用这些状态逻辑。

通过自定义 Hook,你可以更好地组织你的代码,使其更具可读性和可维护性。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt