zoukankan      html  css  js  c++  java
  • React Hooks使用

    1. React Hooks 是什么?

     Hooks可以理解为不编写class时使用state及其他react特性的方法集。

    2. Hooks 支持情况

     Hooks支持react v16.8.0及之后的版本,100%向后兼容。

    3. Hooks使用规则

     只在最顶层使用 Hook,不要在循环,条件或嵌套函数中调用 Hook。这让 React 能够在多次的 useState和 useEffect调用之间保持 hook 状态的正确

     只在 React 函数中调用 Hook,不要在普通的 JavaScript 函数中调用 Hook,确保组件的状态逻辑在代码中清晰可见

    4. 常见Hooks有哪些?

     基础Hooks有:

      useState, useEffect,useContext

     额外Hooks有:

      useReducer,useCallBack, useMemo,useRef,useImperativeHandle,useLayoutEffect,useDebugValue

    5. Hooks使用场景

     useState让我们在 React 函数组件上添加内部 state,更改内部state

     useEffect与class组件的componentDidMount和componentDidUpdate生命周期相似的时候调用,如果你熟悉 React class 的生命周期函数,你可以把useEffect Hook 看做 componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。不同于生命周期的是useEffect调度的 effect 不会阻塞浏览器更新屏幕,应用响应会更快,大部分情况下Effect无需同步执行。

     如需同步执行可单独使用useLayoutEffect Hook。

     useContext接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定, useContext的参数必须是 context 对象本身,当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContextprovider 的 context value值。

     useReducer是useState 的替代方案。它接收一个形如(state,action) =>newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch方法。

     useCallback把内联回调函数及依赖项数组作为参数传入 useCallBack,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新.

     useCallBack(函数,依赖项)相当于useMemo(()=>函数,依赖项)

     useMemo 把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

     useRef返回一个可变的 ref 对象, 其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。

     useImperativeHandle可以让你可以让你在使用 ref 时自定义暴露给父组件的实例值,其应当与 forwardRef 一起使用。

     useLayoutEffect会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect内部的更新计划将被同步刷新。

     useDebugValue可用于在 React 开发者工具中显示自定义 hook 的标签, 不推荐。

    6. 自定义Hook(参照官方文档:https://react.docschina.org/docs/hooks-custom.html)

     

  • 相关阅读:
    Joda-Time 简介
    SimpleDateFormat 的线程安全问题
    SimpleDateFormat 的线程安全问题
    自定义类加载器
    自定义类加载器
    javap与 i++,++i
    javap与 i++,++i
    I/O模型
    I/O模型
    逻辑运算符(上) ---没用
  • 原文地址:https://www.cnblogs.com/minty/p/12254620.html
Copyright © 2011-2022 走看看