黑马react-Day02

最新推荐文章于 2025-04-03 15:45:51 发布

是谁住在深海的大菠萝里！

最新推荐文章于 2025-04-03 15:45:51 发布

阅读量918

点赞数 12

分类专栏： React--黑马文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_53777282/article/details/139095405

版权

React--黑马专栏收录该内容

2 篇文章

订阅专栏

7.1useEffect-概念理解和基础使用

一.表单受控绑定

二.React中获取DOM

三.发表评论

3.1核心功能实现

3.2id和时间处理

3.3清空内容和聚焦实现

四.组件通信

4.1父传子

4.1.1父传子-基础实现

4.1.2父传子-props说明

4.1.3父传子-chilren说明

4.2父子组件通信-子传父实现

五.使用状态提升实现兄弟组件通信

import { useState } from "react";

function A({onGetAName}){
  const name = 'A'
  return (
    <div>
      this is A compoment
      <button onClick={()=> onGetAName(name)}>send</button>
    </div>
  )
}

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

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

export default App;

六.使用context机制跨层传递数据

//App -> A -> B
import { createContext, useContext } from 'react';
//1.createContext方法创建一个上下文对象

const MsgContext = createContext()

//2.在顶层组件 通过Provider组件向组件树中注入数据

//3.在底层组件 通过useContext钩子函数使用数据
function A(){
  return (
    <div>
      this is A compoment
      <B />
    </div>
  )
}

function B (){
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B compoment,{msg}
    </div>
  )
}

function App() {
  const msg = 'this is app msg'
  return (
    <div>
      <MsgContext.Provider value={msg}>
      this is App
      <A />
      </MsgContext.Provider>      
    </div>
  );
}

export default App;

七.useEffect

7.1useEffect-概念理解和基础使用

import { useEffect, useState } from 'react'

const URL = "http://geek.itheima.net/v1_0/channels";
function App() {
  //创建一个状态函数
  const [list,setList]=useState([])
  useEffect(() => {
    //获取频道列表
    async function getList(){
      const res = await fetch(URL)
      const jsonRes = await res.json()
      console.log(jsonRes);
      setList(jsonRes.data.channels)
    }
    getList()
  },[])
  return(
    <div>
      this is App
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App

7.2useEffect-不同依赖项说明

1.没有依赖项（初始 + 组件更新）

import { useEffect, useState } from 'react'

function App() {
  //没有依赖项 初始+组件更新
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函数执行了');
  })
  return(
    <div>
      this is App
      <button onClick={()=>{setCount(count+1)}}>+{count}</button>
    </div>
  )
}

export default App

2.空数组依赖（初始执行一次）

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
//传入空数组依赖 初始执行一次
  useEffect(()=>{
    console.log('副作用函数被调用');
  },[])
  return(
    <div>
      this is App
      <button onClick={()=>{setCount(count+1)}}>+{count}</button>
    </div>
  )
}

export default App

3.添加特定依赖项（初始 + 依赖项变化时执行）

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  useEffect(()=>{
    console.log('副作用函数被调用');
  },[count])
  return(
    <div>
      this is App
      <button onClick={()=>{setCount(count+1)}}>+{count}</button>
    </div>
  )
}

export default App

7.3useEffect-清除副作用

import {useEffect, useState} from 'react'
function Son(){
  //1.渲染时开启一个定时器
  useEffect(()=>{
    const timer = setInterval(()=>{
      console.log('定时器执行中...');
    },1000)

    return ()=>{
      //清除副作用（组件卸载时）
      clearInterval(timer)
    }
  },[])
  return <div>this is Son</div>
}

function App(){
  //通过条件渲染模拟组件卸载
  const [show, setShow]=useState(true)
  return <div>
    {show && <Son/>}
    <button onClick={()=>{setShow(false)}}>卸载Son组件</button>
  </div>
}
export default App

八.自定义Hook实现

问题：布尔切换逻辑当前组件耦合在一起不方便复用

//封装自定义Hook
//问题： 布尔切换逻辑 当前组件耦合在一起 不方便复用
import {useState} from 'react'
function App () {
  const [show , setShow] = useState(true)
  const toggle = () => { setShow(!show) }
  return (
    <div>
      {show && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App

解决思路：自定义Hook

//封装自定义Hook
//解决：组件复用，状态共享
import {useState} from 'react'

function useToggle(){
  //可复用的逻辑代码
  const [show , setShow] = useState(true)
  const toggle = () => { setShow(!show) }
  //哪些状态和回调函数需要在其他组件中使用 return
  return {show , toggle}
}
function App () {
  const {show,toggle}=useToggle()
  return (
    <div>
      {show && <div>this is div</div>}
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

export default App