跨境电商网站开发,广告文案的100案例,上海正规做网站公司电话,seo优化内容问题: 相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版) 解决: React 16.8版本设计了一套新的语法来让函数组件也可以有state Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook也叫钩子… 问题: 相对于类组件, 函数组件的编码更简单, 效率也更高, 但函数组件不能有state (旧版) 解决: React 16.8版本设计了一套新的语法来让函数组件也可以有state Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook也叫钩子本质就是函数能让你使用 React 组件的状态和生命周期函数... Hook 语法 基本已经代替了类组件的语法 后面的 React 项目就完全是用Hook语法了
Hook API 索引 – React 官方文档 Hook API 索引 – React hook函数和普通函数的区别
hook函数本身就是一个函数。react通过函数名来判断是普通函数还是hook函 数以useXxx 格式命名的就是hook函数。
Hook函数使用原则
1.不能在类组件中使用不能在普通函数中使用
2.只能在函数组件中使用或其他hook函数中使用【react提供的第三方的自定义的】
3..hook函数必须是数量确定的不能写在逻辑判断中或后不能写在循环中
4.应用时一般写在顶级作用域的首行 使用场景
-----1.可以在函数组件中使用
let [msg, setMsg] useState()function clickHandler(){// let [count,setCount] useState() // 普通函数会报错}-----2.自定hook中可以使用其他hook
function useClickHandler(){let [count,setCount] useState(0)}-----3.如果函数名首字母大写他会 认为是函数组件也不会报错 function ClickHandler(){let [count,setCount] useState(0)} 1.useState()
作用给函数组件添加状态
返回值是一个数组第一个元素是状态第二个元素是设置状态的函数
语法let [状态, 设置状态函数] useState(初始值)
import React,{useState} from reactexport default function App() {console.log(App render)let [count,setCount] useState(0)return (divh3App/h3p{count}/ppbutton onClick{(){setCount(1000)}}count 1/button/p/div)
}2.useEffect
作用用来模拟函数组件的生命周期 componentDidMount、componentDidUpdate、ComponentWillUnmounted
2.1.用法
useEffect(回调函数) : 没有第二个参数 模拟 componentDidMount componentDidUpdate
useEffect(() {console.log(useEffect)
})2.2.用法
useEffect(回调函数,[]) 只模拟 componentDidMount useEffect((){console.log(useEffect) // componentDidMount},[])
2.3.用法
useEffect(回调函数,[某 个自身状态(state) , 某个 外部状态(props), .......]) useEffect(() { console.log(useEffect)}, [count])2.4.用法
useEffect( return (){ } ) 模拟componentWillUnmount
useEffect((){console.log(Test useEffect)return (){ // componentWillUnmountconsole.log(destroy)}},[msg,money])3.useRef
作用 :可以用它获取dom元素
1. 创建一个ref let divRef useRef()
2. 绑定ref
3. 获取dom元素
import React, { useRef } from react;
export default function App() {let divRef useRef();return (divdiv ref{divRef}h3app/h3button onClick{(){console.log(divRef.current);}}获取DOM元素/button/div/div);
}4.useContext
作用 获取从祖先组件传递给后代组件的数据
4.1.创建context对象
context.js 代码
import React from react
// 1. 创建context对象,并暴露出去
const context React.createContext()
export default context
4.2.使用Provider组件包裹 组件 并通过 value 绑定要传的数据
App.jsx 代码
import React from react;
import Father from ./components/Father50;
import context from ./context;
export default function App() {return (// 2. 使用Provider包裹组件并通过value绑定要传输的数据context.Provider value{{ name: App的内容 }}divh3App/h3hr /Father //div/context.Provider);
}4.3. 引入context对象
4.4.通过useContext处理context对象获取祖先组件传递的数据
import React from react// 3. 引入context对象
import context from ../context
import { useContext } from react;export default function Father() {// 4. 通过useContext处理context对象获取祖先组件传递的数据let {name} useContext(context)return (divh4Father/h4pFather-context: {name}/phr //div)
}5.useReducer
集中状态管理。相当于是简化版的 redux
import React, { useState } from react
import { useReducer } from react
const initalState { count: 0, msg: atguigu }
function reducer(state, action) {switch (action.type) {case inc:return {...state,count: state.count 1}case dec:return {...state,count: state.count - 1}case add:return {...state,msg:state.msg }default:throw new Error(没有处理case)}
}
export default function App() {let [state, dispatch] useReducer(reducer, initalState)return (divpcount: {state.count}/ppmsg: {state.msg}/ppbutton onClick{(){dispatch({type:inc})}}count 1/button/ppbutton onClick{(){dispatch({type:add})}}msg /button/p/div)
}6.useCallBack
可以缓存一个函数。避免函数的多次创建。性能优化 用法一
没有第二个参数函数仍然会被重复创建 let clickHandler useCallback(() {setCount(count 1);});
用法二
第二个参数是空数组那么函数会被缓存 let clickHandler useCallback((){// setCount(count 1)// 函数被缓存可以使用setXxx 第二种用法获取最新的状态值setCount(countcount 1)},[])
用法三
第二个参数是数组并监听 x 个 状态当这些状态中的一个或多个发生变化时重新创建函数 let clickHandler useCallback(() {setCount(count 1);// 函数被缓存可以使用setXxx 第二种用法获取最新的状态值// setCount(countcount 1)}, [count]);7.React.memo
作用:类似于类组件中的纯组件。当自身状态和外部数据没有变化的时候不会重新渲染
App.jsx 代码
import React, { Component } from react
import Test from ./components/Test56
export default class App extends Component {state {msg:React}render() {console.log(App render)return (divh3App/h3pmsg: {this.state.msg}/ppbutton onClick{()this.setState({msg:React})}msg change/button/phr /Test msg{this.state.msg}//div)}
}Test.jsx 代码
import React from react
import { useState } from reactfunction Test({msg}) {console.log(Test render)// useState已经对自身状态做过优化let [count,setCount] useState(0)return (divpcount:{count}/ppApp-msg: {msg}/pbutton onClick{(){setCount(100)}}count 1/button/div)
}export default React.memo(Test)
如图所示 8.useMemo
作用缓存一个函数计算的结果常用来跟useCallback进行比较useCallback是缓存一个 函数useMemo缓存函数执行的结果
通俗来讲就是它是一个优化性能的 Hook它会记住函数的返回值只要依赖项dependency array没有变化就会复用之前的计算结果避免在每次渲染时都重新执行这个可能开销较大的计算
官方详解
App.jsx 代码
import React from react
import Test from ./components/Test57export default function App() {return (divTest//div)
}Tset.jsx 代码
import React, { useState,useMemo } from react;export default function Test() {
const [count,setCount] useState(0)
const [val,setVal] useState(0)const expensive useMemo((){console.log();let sum 0for(let i1;icount;i){sum i}return sum
},[count])// const expensive ((){
// console.log();
// },[count])return divh4{count}-{val}-{expensive}/h4divbutton onClick{()setCount(count 1)}c1/buttoninput val{val} onChange{event {setVal(event.target.value)}}//div/div;
}
9.useImperativeHandle
它与 forwardRef 结合使用以暴露自定义组件的 refs 给父组件。可以在使用 ref 时自定义暴露给父组件的实例值
官方文档useImperativeHandle – React
APP.jsx 代码
import React from react
import { useRef } from react
import FunTest from ./components/FunTest58export default function App() {// ref可以给绑定类组件并且可以获取类组件实例对象let refClass useRef()// ref本身不能够给函数组件使用但是可以通过 React.forwardRef()进行扩展let refFn useRef(true)/*** 当希望在父组件获取子组件的dom对象的时候可以使用 函数组件配合 React.forwardRef()实现*/return (divFunTest ref{refFn} /pbutton onClick{() {console.log(refClass)console.log(refFn)}}获取ref/button/ppbutton onClick{() {refFn.current.changeBg()}}changeBg/button/ppbutton onClick{() {refFn.current.changeFontSize()}}changeBg/button/p/div)
}
FunTest.jsx 代码
import React from react;
import { useRef, useImperativeHandle } from react;function FunTest(props, AppRef) {let selRef useRef()useImperativeHandle(AppRef,()({changeBg:(){selRef.current.style.backgroundColor red}}))return (divh3 ref{selRef}FunTest/h3/div);
}
export default React.forwardRef(FunTest);如图所示 10.useLayoutEffect
useLayoutEffect是useEffect的一个版本在浏览器重新绘制屏幕之前触发。
useEffect在render结束后,你的callback函数执行,但是不会阻塞浏览器渲染
作用用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否 则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在 浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制
官方文档useLayoutEffect – React
App.jsx 代码
import React from react
import Animate from ./components/Animate59export default function App() {return (divAnimate//div)
}Animate.jsx 代码
import React, { useEffect, useLayoutEffect, useRef } from react
import TweenMax from gsap // npm i gsap3.7.0
import ../index.cssconst Animate () {const REl useRef(null)useLayoutEffect((){TweenMax.to(REl.current,0,{x:600})},[])return (div classNameanimatediv ref{REl} classNamesquaresquare/div/div)
}
export default Animate 11.useDebugValue
作用用于在 React 开发者工具中显示 自定义 hook 的标签只能在自定义hook中使用
官方文档useDebugValue – React
12.useId
用于生成一个唯一的标识
import React from react
import { useId } from reactexport default function App() {let id1 useId()let id2 useId()console.log(id1);console.log(id2);return (divdivApp/div/div)
}13.useTransition
作用可以将任务设置为非紧急任务
官方文档useTransition – React
const [isPending, startTransition] useTransition()
startTransition((){}) 14.useDeferredValue
作用根据一个状态设置一个延时的状态。也可以实现任务渲染的优先级区别
import { useState, useDeferredValue } from react;function SearchPage() {const [query, setQuery] useState();const deferredQuery useDeferredValue(query);// ...
}
15.自定义hook函数
作用: 函数组件代码逻辑复用的手段函数名 useXxx 格式 函数中可以使用其他hook函数
App.jsx 代码
import React, {useState} from react
import { useEffect } from react
import usePosition from ../hook/usePosition
export default function Cat() {let {x,y} usePosition()return (div style{{width:100,height:100,border:1px solid red,position:absolute,left:x,top:y}}Cat/div)
}usePosition.js 代码
import {useState, useEffect} from react
export default function usePosition() {let [x, setX] useState(0)let [y, setY] useState(0)function moveHandler(e) {setX(e.clientX)setY(e.clientY)}useEffect(() {window.addEventListener(mousemove, moveHandler)return () {window.removeEventListener(mousemove, moveHandler)}}, [])return {x,y}
}
