公司网站未备案,中金超钒 网站建设,免费自助建网站软件,静态网站生成器怎样做昨天晚上刚学完已经一点了#xff0c;来不及写笔记#xff0c;主要是想睡觉哈#xff0c;所以今天补上#xff0c;我发现效率还挺高的#xff0c;今天重新做笔记#xff0c;加固了昨天的知识点#xff0c;要不以后都这样子哈#xff0c;学完第二天再写哈#xff0c;要…昨天晚上刚学完已经一点了来不及写笔记主要是想睡觉哈所以今天补上我发现效率还挺高的今天重新做笔记加固了昨天的知识点要不以后都这样子哈学完第二天再写哈要是大家有推荐的vue项目练手可不可以分享给我跪求 React表单控制
受控绑定
概念使用React组件的状态useState控制表单的状态 受控表单
第一步声明一个react状态--useState
第二步通过value属性绑定react状态
第三步绑定onChange事件通过事件参数e拿到输入框的最新值反向修改到react状态中
import {useState} from react
function App(){const [value, setValue] useState()return (input typetext value{value} onChange{e setValue(e.target.value)}/)
} 非受控绑定
概念通过获取DOM的方式获取表单的输入数据
react 获取dom
第一步useRef生成ref对象绑定到dom标签上
第二步dom可用时渲染完毕之后dom生成之后才可用ref.current获取dom
import {useRef} from react
function App(){const inputRef useRef(null)const onChange (){console.log(inputRef.current.value)}return (input typetext ref{inputRef}onChange{onChange}/)
} React组件通信
概念组件通信就是组件之间的数据传递, 根据组件嵌套关系的不同有不同的通信手段和方法
父子通信-父传子
实现步骤 父组件传递数据 - 在子组件标签上绑定属性 子组件接收数据 - 子组件通过props参数接收数据 props对象里面包含了父组件的传递过来的所有数据
function Son(props){return div{ props.v }/div
}function App(){const name this is app namereturn (divSon v{name}//div)
} props说明
props可以传递任意的合法数据比如数字、字符串、布尔值、数组、对象、函数、JSX
props是只读对象子组件只能读取props中的数据不能直接进行修改, 父组件的数据只能由父组件修改 父传子 - 特殊的prop children
当我们把内容嵌套在组件的标签内部时组件会自动在名为children的prop属性中接收该内容 父子通信-子传父
核心思路在子组件中调用父组件中的函数并传递参数
首先给子组件标签传递一个父组件中的函数传过去之后子组件接收在子组件通过某些事件调用起来同时把自己的数据当作实参传给父组件父组件中的函数写一个形参接收
function Son({ onGetMsg }){const sonMsg this is son msgreturn (div{/* 在子组件中执行父组件传递过来的函数 */}button onClick{()onGetMsg(sonMsg)}send/button/div)
}function App(){
//加一个状态数据
const {value,setSa}useState()const getMsg (msg){console.log(msg)setSa(msg)}return (div{/* 传递父组件中的函数到子组件 */}Son onGetMsg{ getMsg }/{msg}/div)
} 兄弟组件通信
实现思路: 借助 状态提升 机制通过共同的父组件进行兄弟之间的数据传递 A组件先通过子传父的方式把数据传递给父组件App App拿到数据之后通过父传子的方式再传递给B组件
// A-App
import { useState } from reactfunction A({ i }) {const n this Areturn (divthis is A compnent,button onClick{() i(n)}123/button/div)
}function B() {return (divthis is B compnent,/div)
}function App() {const [name, setAa] useStateconst getAname (name) {setAa(name)console.log(name);}return (divthis is AppA i{getAname}/A/div)
}export default App // A-App App-B
import { useState } from reactfunction A({ i }) {const n this Areturn (divthis is A compnent,button onClick{() i(n)}123/button/div)
}// 解构出来的x
function B({ x }) {return (divthis is B compnent,{x}/div)
}function App() {// 要想把a的数据传给B则app要准备一个数据用来接受a传过来的数据
//并且希望b可以动态的显示这个数据则需要状态变量const [name, setAa] useState()const getAname (name) {console.log(name);setAa(name)}return (divthis is AppA i{getAname}/AB x{name}/B/div)
}export default App 跨层组件通信
实现步骤 使用 createContext方法创建一个上下文对象Ctx 在顶层组件App中通过 Ctx.Provider 组件提供数据 在底层组件B中通过 useContext 钩子函数获取消费数据
//App-A-Bimport { createContext, useContext } from react// 1. createContext方法创建一个上下文对象
const Asdf createContext()function A() {return (divthis is A compnent,B/B/div)
}function B() {
// 3. 在底层组件 通过useContext钩子函数使用数据const qwe useContext(Asdf)return (divthis is B compnent,{qwe}/div)
}function App() {const qwe this Appreturn (div{/* 2. 在顶层组件 通过Provider组件提供数据 */}Asdf.Provider value{qwe}this is AppA/A/Asdf.Provider/div)
}export default App React副作用管理-useEffect
概念理解
useEffect是一个React Hook函数用于在React组件中创建不是由事件引起而是由渲染本身引起的操作副作用, 比如发送AJAX请求更改DOM等等 说明 参数1是一个函数可以把它叫做副作用函数在函数内部可以放置要执行的操作 参数2是一个数组可选参在数组里放置依赖项不同依赖项会影响第一个参数函数的执行当是一个空数组的时候副作用函数只会在组件渲染完毕之后执行一次
import { useEffect, useState } from reactconst URL http://geek.itheima.net/v1_0/channelsfunction App() {// 之后才创建一个状态const [list, setSt] useState([])useEffect(() {async function getL() {const res await fetch(URL)const i await res.json()console.log(i);setSt(i.data.channels)}getL()}, [])return (divthis is appul{list.map(item li key{item.id}{item.name}/li)}/ul/div)
}export default AppuseEffect依赖说明
useEffect副作用函数的执行时机存在多种情况根据传入依赖项的不同会有不同的执行表现
依赖项副作用功函数的执行时机没有依赖项组件初始渲染 组件更新时执行空数组依赖只在初始渲染时执行一次添加特定依赖项组件初始渲染 依赖项变化时执行
import { useEffect, useState } from reactfunction App() {const [count, setCount] useState(0)//useEffect(() {// console.log(fu);//})// useEffect(() {// console.log(fu);// }, [])useEffect(() {console.log(fu);}, [count])return (divthis is appbutton onClick{() setCount(count 1)}{count}/button/div)
}export default App 清除副作用
概念在useEffect中编写的由渲染本身引起的对接组件外部的操作社区也经常把它叫做副作用操作比如在useEffect中开启了一个定时器我们想在组件卸载时把这个定时器再清理掉这个过程就是清理副作用
说明清除副作用的函数最常见的执行时机是在组件卸载时自动执行
import { useEffect, useState } from reactfunction Son () {// 1. 渲染时开启一个定时器useEffect(() {const timer setInterval(() {console.log(定时器执行中...)}, 1000)return () {// 清除副作用(组件卸载时)clearInterval(timer)}}, [])return divthis 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函数可以用来实现逻辑的封装和复用
import { useEffect, useState } from reactfunction App() {const [show, setShow] useState(true)const v () setShow(!show)return (div{show div显示与隐藏/div}button onClick{v} asd/button/div)
}export default App 封装自定义hook通用思路
1. 声明一个以use打头的函数 2. 在函数体内封装可复用的逻辑只要是可复用的逻辑 3. 把组件中用到的状态或者回调return出去以对象或者数组
4. 在哪个组件中要用到这个逻辑就执行这个函数解构出来状态和回调进行使用
import { useEffect, useState } from react// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hookfunction useToggle() {// 可复用的逻辑代码const [show, setShow] useState(true)const v () setShow(!show)// 哪些状态和回调函数需要在其他组件中使用 returnreturn { show, v }}function App() {const { show, v } useToggle()return (div{show div显示与隐藏/div}button onClick{v} asd/button/div)
}export default App React Hooks使用规则 只能在组件中或者其他自定义Hook函数中调用 只能在组件的顶层调用不能嵌套在if、for、其它的函数中
