网站项目建设策划书,搜索百度,wordpress扁平化博客主题,网页seo如何优化React Hookshooks介绍useState(保存组件状态)useEffect()useCallback(记忆函数)useMemo() 记忆组件useRef(保存引用值)useReducer()useContext(减少组件层级)自定义hookshooks介绍
在react类组件#xff08;class#xff09;写法中#xff0c;有setState和生命周期对状态进…
React Hookshooks介绍useState(保存组件状态)useEffect()useCallback(记忆函数)useMemo() 记忆组件useRef(保存引用值)useReducer()useContext(减少组件层级)自定义hookshooks介绍
在react类组件class写法中有setState和生命周期对状态进行管理但是在函数组件中不存在因此引入hooks React的组件创建方式一种是类组件一种是纯函数组件并且React团队希望组件不要变成复杂的容器最好只是数据流的管道。开发者根据需要组合管道即可。也就是说组件的最佳写法应该是函数而不是类。 使用hooks理由 高阶组件为了复用导致代码层级复杂 生命周期的复杂 写成functional组件,无状态组件 因为需要状态又改成了class,成本高
类组件与函数组件的区别 函数组件没有生命周期类组件有挂载、更新、销毁 函数组件没有状态state类组件有 函数组件没有this类组件有
useState(保存组件状态)
纯函数组件没有状态useState()用于设置和使用组件的状态属性
const [state, setstate] useState(initialState)
//state:初始状态属性指向状态当前值
//setstate:修改状态属性函数用来更新状态
//initialState:状态的初始值该值会赋给statestate是一个对象
setState()不会局部更新
useEffect()
useEffect()是副作用的钩子可以检测数据更新 ,可以实现特定的功能如异步请求
useEffect()接受两个参数第一个参数是你要进行的异步操作第二个参数是一个数组用来给出Effect()的依赖项。只要数组发生改变useEffect()就会执行。当第二项省略不填时useEffect()会在每次组件渲染时执行这一点类似于componentDidMount。
useEffect(() {
//effect
return () {
//cleanup
};
}, [依赖的状态;空数组,表示不依赖])不要对 Dependencies 撒谎,如果你明明使用了某个变量却没有申明在依赖中你等于向 React撒了谎后果就是当依赖的变量改变时useEffffect也不会再次执行, eslint会报警告
useEffffect和useLayoutEffffect区别 简单来说就是调用时机不useLayoutEffect() 和原来componentDidMount componentDidUpdate 一致在react完成DOM更新后马上同步调用的代码会阻塞页面渲染。而 useEffect() 是会在整个页面渲染完才会异步调用。 在实际使用时如果想避免页面抖动在 useEffect 里修改DOM很有可能出现的话可以把需要操作DOM的代码放useLayoutEffect 里。在这里做点dom操作这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕上
useCallback(记忆函数)
防止因为组件重新渲染导致方法被重新创建起到缓存作用;只有第二个参数 变化了才重新声明一次
var handleClick useCallback((){
console.log(name)
},[name])
button onClick{()handleClick()}hello/button
//只有name改变后 这个函数才会重新声明一次
//如果传入空数组 那么就是第一次创建后就被缓存 如果name后期改变了,拿到的还是老的name。
//如果不传第二个参数每次都会重新声明一次拿到的就是最新的name.useMemo() 记忆组件
useCallback() 的功能完全可以由 useMemo() 所取代使用 useMemo() 也可以返回一个记忆函数
useCallback(fn, inputs) is equivalent to useMemo(() fn, inputs).
useCallback()与useMemo()的区别
useCallback 不会执行第一个参数函数而是将它返回给你而useMemo会执行第一个函数并且将函数执行结果返回给你。useCallback() 常用记忆事件函数生成记忆后的事件函数并传递给子组件使用。而 useMemo() 更适合经过函数
useRef(保存引用值)
用于在函数组件中获取真实的DOM元素对象或者是组件实例。因为函数组件没有实例所以这里的获取组件实例指的是获取类组件实例
返回值是一个可变的ref对象并且这个对象的值发生改变时不会引起页面的渲染。
const myswiper useRef(null);Swiper ref{myswipe}/useRef()可以存储不需要引起页面渲染的数据修改useRef值的唯一方法是修改.current且修改后不会引起重渲染。
useReducer() 在使用React的过程中如遇到状态管理一般会用到Redux而React本身是不提供状态管理的。而useReducer()提供了状态管理 useState() 的替代方案用于包含多种状态或者下一个 state 依赖于之前的 state实现函数组件的状态管理。 基本原理是通过用户在页面中发起action, 从而通过reducer方法来改变state, 从而实现页面和状态的通信。 useContext(减少组件层级)
useContext()可以共享状态作用是进行状态的分发,避免了使用Props进行数据的传递
import React from react
var GlobalContext React.createContext()
// 注意此时的reduecer 返回值是一个对象 {isShow:false,list:[]}
function App(props){
let [state,dispatch] useReducer(reducer,{isShow:true,list:[]})
return GlobalContext.Provider value{{
dispatch
}}
div
{
state.isShow?
div 我是选项卡/div
:null
}
{props.children}
/div
/GlobalContext.Provider
}
function Detail(){
var {dispatch} useContext(GlobalContext)
useEffect(() {
//隐藏
dispatch({
type:Hide,
payload:false
})
return () {
//显示
dispatch({
type:Show,
payload:true
})
};
}, [])
return div
detail
/div
}自定义hooks
当我们想在两个函数之间共享逻辑时我们会把它提取到第三个函数中。
用户自定义的Hooks 命名的要求用use开头后跟名称首字母大写 作用根据具体业务的需求对Hooks中默认的钩子函数进行封装使代码的结构更加清晰便于使用和维护
import React, { useEffect, useState } from react
function useToLocaleUpperCase(text) {const [name, setName] useState(text)useEffect(() {setName(name.toLocaleUpperCase())}, [])return { name };
}
export default function App() {const { name } useToLocaleUpperCase(zhansan)return (divApp-{name}Child/Child/div)
}
function Child() {const { name } useToLocaleUpperCase(lisi)return (divApp-{name}/div)
}
