React基础-下

React

目录

• React
• React 表单控制
  • 受控表单绑定
  • 非受控绑定（React 中获取 DOM）
• React 组件通信
  • 父子通信 — 父传子
  • props 说明
  • 特殊的 prop children
  • 父子通信 — 子传父
  • 兄弟组件通信
  • 使用 Context 机制跨层级组件通信
• React 副作用管理 — useEffect
  • 概念
  • useEffect 基础使用
  • useEffect 依赖说明
  • 清除副作用
• 自定义 Hook 实现
• React Hooks 使用规则

React 表单控制

受控表单绑定

概念：使用 React 组件的状态（useState）控制表单的状态

.

import {useState} from "react";

const App = () => {
	const [value, setValue] = useState('')

	return (
		<>
			<input
				type="text"
				value={value}
				onChange={(e) => setValue(e.target.value)}
			/>
		</>
	)
}

export default App

非受控绑定（React 中获取 DOM）

概念：通过获取 DOM 的方式获取表单的输入数据。

⚠️ 注意：只有当组件渲染完毕，才能获取 DOM 对象。

.

import {useRef} from "react";

const App = () => {
	const inputRef = useRef(null);
	
	const handleChange = () => {
		console.log(inputRef.current)
	}

	return (
		<>
			<input
				type="text"
				ref={inputRef}
				onChange={handleChange}
			/>
		</>
	)
}

export default App

React 组件通信

概念：组件通信就是 组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。

.

A—B：父子通信

B—C：兄弟通信

A—E：跨层通信

抽象原则：App 作为 "智能组件" 负责数据的获取，Item 作为 "UI 组件" 负责数据的渲染。

父子通信 — 父传子

.

父传子 实现步骤：

1. 父组件传递数据 — 在子组件标签上绑定属性；
2. 子组件接收数据 — 子组件通过 props 参数接收数据。

const Son = (props) => {
	return (
		<>
			<h1>Son 组件</h1>
			{props.sonMsg}
		</>
	)
}
const App = () => {
	const appMsg = '父传子'
	return (
		<>
			<Son sonMsg={appMsg}></Son>
		</>
	)
}

export default App

props 说明

props 可以传递任意的数据，比如变量、数字、字符串、布尔值、数组、对象、函数、JSX。

.

props 是只读对象，子组件只能读取 props 中的数据，不能直接进行修改，父组件的数据只能由父组件修改。

特殊的 prop children

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

.

const Son = (props) => {
	return (
		<>
			<h1>Son 组件</h1>
			{props.children}
		</>
	)
}
const App = () => {
	return (
		<>
			<Son>
				<div>props children</div>
			</Son>
		</>
	)
}

export default App

父子通信 — 子传父

.

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

.

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


function App() {
	const getMsg = (msg) => {
		console.log(msg)
	}

	return (
		<>
			{/* 传递父组件中的函数到子组件 */}
			<Son onGetMsg={getMsg}/>
		</>
	)
}

export default App

兄弟组件通信

.

实现思路：借助 "状态提升" 机制，通过共同的父组件进行兄弟之间的数据传递。

1. A 组件先通过子传父的方式把数据传递给父组件 App
2. App 拿到数据之后通过父传子的方式再传递给 B 组件

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B
import {useState} from "react";

const A = ({onGetMsg}) => {
	return (
		<button onClick={() => onGetMsg('状态提升')}>向兄弟组件 B 发送数据</button>
	)
}

const B = ({bMsg}) => {
	return (
		<h1>{bMsg}</h1>
	)
}


function App() {
	const [appMsg, setAppMsg] = useState('App 中的默认数据')
	const getMsg = (msg) => {
		setAppMsg(msg)
	}

	return (
		<>
			<A onGetMsg={getMsg}></A>
			<B bMsg={appMsg}></B>
		</>
	)
}

export default App

使用 Context 机制跨层级组件通信

.

实现步骤：

1. 使用 createContext 方法创建一个上下文对象 Ctx
2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据
3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据

// App -> A -> B

import {createContext, useContext} from "react";

const B = () => {
	// 3. 在底层组件：通过 useContext 钩子函数使用数据
	const msg = useContext(MsgContext)

	return (
		<>
			<h1>B</h1>
			{msg}
		</>
	)
}

const A = () => {
	// 3. 在底层组件：通过 useContext 钩子函数使用数据
	const msg = useContext(MsgContext)

	return (
		<>
			<h1>A</h1>
			{msg}
			<B></B>
		</>
	)
}

// 1. createContext 方法创建一个上下文对象
const MsgContext = createContext(0);
const App = () => {
	const {Provider: MsgProvider} = MsgContext
	const msg = '跨层组件通信'

	return (
		<>
			{/* 2. 在顶层组件：通过 Provider 组件提供数据 */}
			<MsgProvider value={msg}>
				<A></A>
			</MsgProvider>
		</>
	)
}

export default App

React 副作用管理 — useEffect

概念

useEffect 是一个 React Hook 函数，用于在 React 组件中创建不是由事件引起而是由渲染本身引起的操作（副作用），比 如发送 AJAX 请求、更改 DOM 等。

.
⚠️ 说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于 "只由渲染引起的操作"。

useEffect 基础使用

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

语法：

.
说明：

1. 参数 1 是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作。
2. 参数 2 是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行。当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次。

useEffect 依赖说明

useEffect 副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

依赖项	副作用功函数的执行时机
没有依赖项	组件初始渲染 + 组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染 + 特定依赖项变化时执行

import {useEffect, useState} from "react";

const Son = () => {

	return (
		<>
			<h1>Son</h1>
		</>
	)
}
const App = () => {
	const [show, setShow] = useState(true)
	const [count, setCount] = useState(0)

	useEffect(() => {
		console.log('useEffect 函数执行了...', '【没有依赖项】', '组件初始渲染 + 组件更新时执行...')
	});
	useEffect(() => {
		console.log('useEffect 函数执行了...', '【空数组依赖】', '只在初始渲染时执行一次...')
	}, []);
	useEffect(() => {
		console.log('useEffect 函数执行了...', '【添加特定依赖项】', '组件初始渲染 + 特定依赖项变化时执行...')
	}, [show]);

	return (
		<>
			<button onClick={() => setCount(count + 1)}>{count}</button>
			<button onClick={() => setShow(false)}>卸载 Son 组件</button>
			{show && <Son></Son>}
		</>
	)
}

export default App

清除副作用

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

.

⚠️ 说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行。

import {useEffect, useState} from "react";

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

		return () => {
			// 清除副作用(组件卸载时)
			clearInterval(timer)
		}
	}, []);

	return (
		<>
			<h1>Son</h1>
		</>
	)
}
const App = () => {
	// 通过条件渲染模拟组件卸载
	const [show, setShow] = useState(true)


	return (
		<>
			<button onClick={() => setShow(false)}>卸载 Son 组件</button>
			{show && <Son></Son>}
		</>
	)
}

export default App

自定义 Hook 实现

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

.

// 封装自定义 Hook

// 问题: 布尔切换的逻辑，当前组件耦合在一起的，不方便复用。

// 解决思路: 自定义 hook

import {useState} from "react";

const useToggle = () => {
	// 可复用的逻辑代码
	const [show, setShow] = useState(true)

	const toggle = () => {
		setShow(!show)
	}

	// 哪些状态和回调函数需要在其他组件中使用就直接 return
	return {
		show, toggle
	}
}

// 封装自定义 hook 通用思路
// 1. 声明一个以 use 打头的函数
// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
// 3. 把组件中用到的状态或者回调 return 出去（以对象或者数组）
// 4. 在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

const App = () => {
	// const [show, setShow] = useState(true)
	// const toggle = () => {
	// 	setShow(!show)
	// }
	const {show, toggle} = useToggle()


	return (
		<>
			<button onClick={toggle}>toggle</button>
			{show && <h1>div</h1>}
		</>
	);
}

export default App

React Hooks 使用规则

1. 只能在组件中或者其他自定义 Hook 函数中调用。

⚠️ .

2. 只能在组件的顶层调用，不能嵌套在 if、for、其它的函数中。

⚠️ .