react常用hooks用法有哪些？

原创

小哥 3年前 (2022-10-20) 阅读数 85 #js教程

文章标签 react hooks

hooks的作用

在react16.8在该版本之后，由于hooks功能组件被扩展，根本不使用。"类"，您可以编写功能齐全的组件。

    React Hooks 其含义是组件被尽可能地编写为纯函数。如果需要外部函数和副作用，请使用挂钩编写外部代码"钩"进来。

一. useState

useState() 用于介绍功能组件的状态 （state） 。纯函数不能有状态，因此将状态放在钩子中。

import React, { useState } from react;

function Example() {
  // 声明一项 "count" 的 state 变量,初始值为0，随后被收养setCount更改它将允许再次渲染该视图。
  const [count, setCount] = useState(0);

  return (
    
      You clicked {count} times
      
    
  );
}

useState() 该函数接受状态的初始值作为参数。该函数返回一个数组，其第一个元素是一个变量(在上面的示例中)。 count )，指向状态的当前值。第二个元素是函数(上面的示例是 setCount )，用于更新状态，公约是。set前缀加上州的变量名。

useState总结

useState 让函数组件还具有 state 状态, 并读写状态数据
语法: const [xxx, setXxx] = useState(initValue)
useState() 说明:
- 参数: 在第一次初始化中指定的值在内部缓存。
- 返回值: 包含2元素数组, 第1是内部当前状态值。, 第2更新状态值的函数。
setXxx() 2种写法:
- setXxx(newValue) : 该参数是一个非函数值。, 直接指定新状态值, 原始状态值在内部被它覆盖。
- setXxx(value => newValue) : 该参数是一个函数, 接收原始状态值, 返回新的状态值, 原始状态值在内部被它覆盖。

二. useEffect

useEffect() 用于引入有副作用的操作，最常见的是从服务器请求数据。之前，在 componentDidMount 里面的代码现在可以放在 useEffect() 。

useEffect(()  =>  {
  // Async Action
}, [dependencies])

在上述用法中， useEffect() 接受两个参数。第一个参数是一个函数，其中放置了用于异步操作的代码。第二个参数是一个数组，它给出 Effect 只要该数组发生变化， useEffect() 将被处决。

useEffect的作用

只要是 副作用(side effect) ，可以使用。 useEffect() 导言。它的常见用法如下。

获取数据
事件监听或订阅
改变 DOM
输出日志

可以把 useEffect 可以将其视为以下三个生命周期的组合

componentDidMount()
componentDidUpdate()
componentWillUnmount()

useEffect的返回值

useEffect() 允许返回函数。卸载组件时，将执行该函数以清除副作用。如果你不需要清理副作用， useEffect() 您不必返回任何值。

    React.useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(count => count+1 )
        },1000)
        return ()=>{
            clearInterval(timer)
        }
    },[])

如上例， useEffect()在 在加载组件时设置计时器，并在组件卸载时返回清理函数以清除计时器。

这相当于执行 componentWillUnmount() 生命周期挂钩。

useEffect第二个参数

省略，当组件全局作为依赖项被等效时，每次呈现组件时都将被执行。 useEffect()
为 [] ，它等同于没有依赖关系，并且只在挂载组件时执行一次。 useEffect() ，相当于 componentDidMount() 生命周期挂钩
[x,xxx] ，数组中的变量是依赖的，当依赖关系更改时，它将被执行。 useEffect() ，相当于 componentDidUpdate() 生命周期挂钩

多重副作用的注意事项

使用 useEffect() 有一件事需要注意。如果有多个副作用，则应调用多个。 useEffect() ，并且不应组合在一起。

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);

  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);

  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);

    return () => clearTimeout(timeout);
  }, [varB]);

  return {varA}, {varB};
}

三. useReducer

useReducers() 钩子被用来引入 Reducer 功能。

用法： const [state, dispatch] = useReducer(reducer, initialState);

它接受 Reducer 函数和状态的初始值用作返回数组的参数。数组的第一个成员是状态的当前值，第二个成员被发送。 action 的 dispatch 函数。

这里有一个计数器的例子。用于计算状态。 Reducer 函数如下所示。

const myReducer = (state, action) => {
  switch(action.type)  {
    case(countUp):
      return  {
        ...state,
        count: state.count + 1
      }
    default:
      return  state;
  }
}

组件代码如下

function App() {
  const [state, dispatch] = useReducer(myReducer, { count:   0 });
  return  (
    
      
      Count: {state.count}
    
  );
}

四. useRef

useRef 返回一个变量 ref 对象，其 current 该属性被初始化为传入参数。 initialValue 。

写法： const refContainer = useRef(initialValue);

用法与 createRef() 一致

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // current 指向已装载 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      
      
    
  );
}