526互联

react的hooks作用讲解

发布时间 2023-07-04 11:01:28作者: 布偶123

1.useState

用于声明一个state变量，例子如下

点击查看代码 
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2.useEffect

有类似于类组件中的生命周期之类函数的作用，用于处理组件中的副作用操作，比如数据获取、DOM操作等。不传参数时所有的更新都会触发，传递空数据为参数时仅在挂载和卸载的时候执行，传递一个值时仅在这个值更新时执行

点击查看代码 
//1.不传值时
useEffect(()=>{
console.log(props.number)
setNumber(props.number)
}) //所有更新都执行

//2.传递空数组
useEffect(()=>{
console.log(props)
},[]) //仅在挂载和卸载的时候执行

//3.传递一个值
useEffect(()=>{
console.log(count)
},[count]) //count更新时执行

3.useContext

没有hooks之前，类组件通过props进行父子组件之间的数据传输，有了hooks之后函数组件通过useContext进行父子组件之间的数据传输

点击查看代码 
import React, { useState, createContext, useContext } from "react";
const CountContext = createContext(0);

const Example = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <p>父组件点击数量：{count}</p>
      <button onClick={() => setCount(count + 1)}>{"点击+1"}</button>
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  );
};

const Counter = () => {
  const count = useContext(CountContext);
  return <p>子组件获得的点击数量：{count}</p>;
};

export default Example;

4.useReducer

useReducer 是 useState 的升级版本，用来践行 Flux/Redux 的思想，可以使用useReducer来代替Redux

点击查看代码 
import React, { useReducer } from 'react';

  const initialState = { count: 0 };

  function reducer(state, action) {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }

  function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
    );
  }