react入门:组件通信、父子组件、兄弟组件、跨层组件、Hook 函数、useEffect 函数

1.组件通信

1.1 父传子

1.给子组件标签绑定属性
2.子组件接收数据 props的参数,通过props.什么来使用传入的数据
样例如下:

父传子–props 说明

特殊的 prop children
场景:当我们把内容嵌套在子组件标签中时,父组件会自动在名为 children 的 prop 属性中接收该内容

<Son>
<span>this is span</span>
</Son>

1.2 子传父

核心思路:在子组件中调用父组件中的函数并传递参数

1.3 兄弟组件通信

兄弟组件通信

使用状态提升实现兄弟组件通信
1.A 组件通过子传父给父组件
2.父组件通过父传子给 B 组件

1.4 跨层组件通信

实现步骤:
预备:引入方法

import {createContext,useContext} from "react"

1.使用 creatContext 方法创建一个上下文对象 Ctx

const MsgContext=createContext()

Context Provider 作用域解释:

该把 const MsgContext = createContext() 写在 JS 文件的顶部，在所有组件函数（比如 App）的外部,如果放在组件内部：每当 App 组件因为状态或属性变化而重新渲染时，function App() 函数体内的代码就会重新执行一次。这意味着 createContext() 会被反复调用，每次都生成一个全新的、不同的 MsgContext 对象。这不仅效率低下，还可能导致 React 应用出现意外的错误，因为依赖该 Context 的子组件会因为 Context 对象本身的引用发生变化而进行不必要的重新渲染。

2.在顶层组件 APP 中通过 Ctx.provide 组件提供数据

<div>
<MSgContext.Provider value={msg}>
<A/>
</MSgContext.Provider>
</div>

3.在底层组件(B)中通过 useContext 钩子函数获取消费数据

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

2. Hook 函数

2.1自定义ReactHook

为了复用逻辑,使用自定义的 Hook 函数

复用逻辑前,实现控制一个标签的显示与隐藏

复用逻辑后:

ReactHooks 使用规则
1.只能在组件中或者其他自定义 Hook 函数中调用
2.只能在组件的顶层调用,不能嵌套在 if,for,其他函数中

2.2 useEffect的基础使用(react 自带的钩子函数)

useEffect是一个 React Hook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作,比如AJAX请求,修改DOM等等

假如说,你的DOM视图变化了,useEffect 可以监测到变化,每变化一次,就执行一次内部函数

useEffect(()=>{},[])

参数 1 是一个函数,可以把它叫做副作用函数,在函数内部可以放置执行的操作
参数 2 是一个数组(可选参),在数组放置依赖项,不同依赖项会影响第一个参数函数的执行
参数如下:
没有依赖项  组件初始渲染+组件更新时执行
空数组依赖 只在初始渲染时执行一次
添加特定依赖性 组件初始渲染+特性依赖项变化时执行

清除副作用:
在 useEffect 中编写的由渲染本身引起的对接组件外部的操作,社区也经常把它叫做副作用操作,比如在 useEffect 中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用

useEffect(()=>{
//实现副作用操作逻辑
return ()=>{
//清除副作用逻辑
}
},[])

说明:清除副作用的函数最常见的执行时机实在组件写在时自动执行
需求:在 Son 组件渲染时开启一个定时器,卸载时清除这个定时器