当前位置：首页 > news >正文

学习react第二天

news 2025/11/13 5:37:44

表单数据双向绑定

类似v-model

function App() {// 定义响应式数据const [value, setValue] = useState('')console.log(value);return (<>// 绑定数据和onChange方法<inputvalue={value}onChange={(e) => setValue(e.target.value)}type="text"></input></>)
}

获取Dom元素

使用useRef来获取

function App() {// 获取的dom元素需要再组件渲染完成之后（dom生成后）才能使用const inputRef = useRef(null)const getDom = () => {console.dir(inputRef.current);}return (<><inputref={inputRef}type="text"></input><button onClick={() => getDom()}>获取dom</button></>)
}

组件通信

父传子props

// 子组件通过形参props接收父组件传递的数据
function Son(props) {return (<><h2>我是子组件{props.text}</h2>{/* 写在子组件中的内容可以通过children接受 */}<div>{props.children}</div><div>{props.child}</div>{props.isTrue ? <h2>条件为真</h2> : <h2>条件为假</h2>}<ul>{props.list.map((item, index) => (<li key={index}>{item}</li>))}</ul><button onClick={props.fun}>点击执行父组件传递的函数</button></>)
}function App() {const text = useState('hello world')return (<><div>{/* 父组件传递数据 */}<Son text={text}age={18}isTrue={true}list={['vue', 'react']}fun={() => console.log('1111')}child={<span>333</span>}><span>2222</span></Son></div></>)
}

子传父

通过接受父组件的方法传递参数，来实现子传父

// 子组件通过形参props接收父组件传递的数据
function Son(props) {const sonMsg = '我是子组件的数据'return (<><h2>我是子组件{props.text}</h2><button onClick={() => props.onGetMsg(sonMsg)}>111</button></>)
}function App() {const [msg, setMsg] = useState('')const getMsg = (msg) => {setMsg(msg);}return (<><div>{msg}<SononGetMsg={getMsg}></Son></div></>)
}

跨层级传递

使用context实现

import { createContext, useContext, useState } from 'react'
import './App.css'const msgContent = createContext()
// 子组件通过形参props接收父组件传递的数据
function A() {return (<>AAAAA<B></B></>)
}function B() {const msg = useContext(msgContent)return (<><div>{msg}</div></>)
}function App() {const [msg, setMsg] = useState('hello context')return (<><div><msgContent.Provider value={msg}><A></A></msgContent.Provider></div></>)
}export default App

useEffect

类似onMounted，created

const Url =' http://geek.itheima.net/v1_0/channels'
function App() {useEffect(() => {fetch(Url).then(res => res.json()).then(res => {console.log(res.data.channels);setList(res.data.channels)})}, [])const [list, setList] = useState([])return (<><div>{list.map(item => (<li key={item.id}>{item.name}</li>))}</div></>)
}

依赖参数说明

清除副作用函数,在useEffect回调函数里return（最常见的是在组件销毁时起作用）一个回调

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是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用

1.声明一个use打头的函数

2.在函数体内封装可复用的逻辑

3.return所需要的数据和函数

4.在哪个组件中要使用就调用函数，解构出所需的数据

import { useState } from 'react'
import './App.css'function useToggle() {const [value, setValue] = useState(true)const toggle = () => {setValue(!value)}return { value, toggle }
}function App() {const {value, toggle} = useToggle()return (<div className="App">{value && <h1>Hello Vite + React!</h1>}<button onClick={() => toggle()}>toggle</button></div>)
}export default App

Hook使用规则

1.只能在组件中或其他Hook函数中调用

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