前端学习--React(2)
一、受控表单绑定
和vue中v-model功能相同
import { useState } from "react";
// 通过value属性绑定react状态
// 绑定onChange事件 通过事件参数e拿到输入框最新的值 反向修改到react状态
function App() {
const [value, setValue] = useState('')
return (
setValue(e.target.value)}/>
);
}
export default App;二、获取DOM
import { useRef } from "react";
//userRef生成ref对象 绑定到dom标签身上
//dom可用时，ref.current获取dom
function App() {
const inputRef = useRef(null)
const showDom = () => {
//console.log显示简单的文本信息 console.dir显示一个对象的详细信息
console.dir(inputRef.current)
}
return (
);
}
export default App;三、组件通信
即组件间数据传递
父子通信
父传子
父组件 给子组件标签绑定属性
子组件 内部通过props接收
function Son(props){
//props包含父组件绑定在子组件标签上的所有数据
return(
{props.letter1}
{props.letter2}
)
}
function App() {
const letter1 = '我是消息1'
const letter2 = '我是消息2'
return (
props可以传递数字、字符串、布尔值、数组、对象、函数、JSX
props传递的数据是只读的，不能修改
props.children
这个概念与vue的slot差不多
当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容
function Son(props){
return(
{props.letter1}
{props.letter2}
{props.children}
)
}
function App() {
const letter1 = '我是消息1'
const letter2 = '我是消息2'
return (
我是children属性内容
);
}
export default App;
子传父
在子组件属性中调用父组件函数
import { useState } from "react"
function Son({onGetMsg}){
const msg = 'i am son\'s msg'
return(
我是儿子
)
}
function App() {
const [value, setValue] = useState('')
const getMsg = (msg) => {
console.log(msg)
setValue(msg)
}
return (
我是爸爸{value}
兄弟通信
子传父 A -> APP
父传子APP->B
import { useState } from "react"
function A({onGetMsg}){
const msgA = 'message from A'
return(
i am A
)
}
function B(props){
return(
i am B
{props.msgfromA}
)
}
function App() {
const [message, setMessage] = useState('')
const getMsg = (msg) => {
console.log(msg)
setMessage(msg)
}
return (
);
}
export default App;
跨层通信
createContext机制
vue小链接：provide/inject依赖注入
import { useState, createContext, useContext } from "react"
//1 createContext创建一个上下文对象
const MsgContext = createContext()
function A(){
return(
i am A
)
}
function B(){
//3 底层组件用useContext接收消息
const msg = useContext(MsgContext)
return(
i am B
{msg}
)
}
function App() {
const msgfromGrandfather = 'grandfather\'s message'
return (
);
}
export default App;
四、useEffect
useEffect是一个React Hook函数，用于在React组件中 创建不是由事件引起而是 由渲染本身引起的操作 , 比如发送AJAX请求，更改DOM等等
也就是不发生任何用户操作，在页面完成渲染就需要做的事情
vue小链接：生命周期函数mounted()
两个参数：回调函数(规定要干什么)，依赖项数组(回调函数的执行时机，如果是空数组只执行一次)
import { useEffect, useState } from "react"
import axios from 'axios'
const URL = 'http://geek.itheima.net/v1_0/channels'
function App() {
const [list, setList] = useState([])
useEffect(() => {
function getList() {
axios.get(URL).then(res => {
const list = res.data
console.log(list)
setList(list.data.channels)
})
}
getList()
}, [])
return (
i am app
{list.map(item => {
return - {item.id} {item.name}
})}
);
}
export default App;
依赖项参数说明
| 依赖项 | 回调函数执行时期 |
| 没有依赖项 | 组件初始渲染+组件更新时执行 |
| 空数组依赖 | 只在初始渲染时执行一次 |
| 添加特定依赖项 | 初始组件渲染+特定依赖项变化时执行 |
清除副作用
组件卸载时执行的操作，在useEffect的return中执行
vue小链接：生命周期函数beforeUnmounted
import { useEffect, useState } from "react"
function Son(){
useEffect(() => {
const timer = setInterval(() => {
console.log('定时器执行中...')
}, 1000)
return () => {
console.log('定时器已结束')
clearInterval(timer)
}
}, [])
return i am son
}
function App() {
const [show, setShow] = useState(true)
return (
{show && 五、自定义hook函数
需要复用的逻辑功能，可以单独封装一个函数(函数名一般用use开头)
import { useState } from "react"
function useToggle(){
const [toggle, setToggle] = useState(true)
const changeToggle = () => setToggle(!toggle)
return {
toggle,
changeToggle
}
}
function App() {
const style = {
backgroundColor:'pink',
height:'100px',
width:'100px'
}
const {toggle, changeToggle} = useToggle()
return (
{toggle && i am a big box}
);
}
export default App;
六、ReactHooks的使用规则
不允许在组件外使用
不允许在if语句、for循环、其他函数中使用，只能在组件顶层使用