头图

手把手教你React Hooks

叫我欧文就好

1. useState

useState接收一个参数(状态的初始值)
useState返回值:一个数组 第一项:状态值 第二项:修改状态的方法
import { useState } from "react";

function Demo1() {
  // 定义count初始值
  const initCount = 0;
  
  const [count, setCount] = useState(initCount);

  const increment = () => {
    setCount((count) => count + 1);
    // 这里打印的count值并不是最新的 而是上一个count值 为什么?
    console.log(count);
  };
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={() => setCount(count + 1)}>count++</button> &nbsp;
      <button onClick={increment}>count++</button>
    </div>
  );
}

export default Demo1;
因为每次状态更新,React内部都会重新生成一个useState函数,一次更新对应一个useState函数,所以最新的一次更新只能拿到上次更新完的state值,如果要拿到最新的状态值需要借助下一个hook(useEffect),继续往下看...

2. useEffect

useEffect相当于class组件的三个生命周期,分别是:

(componentDidMount、componentDidUpdate、componentWillUnmount)

import { useEffect, useState } from "react";

function Demo2() {
  const initCount = 0;
  const initName = "kyrie";

  const [count, setCount] = useState(initCount);
  const [name, setName] = useState(initName);

  const increment = () => {
    setCount((count) => count + 1);
  };

  const changeName = () => {
    setName("wen");
  };

  // componentDidUpdate - 调用时机:所有状态更新都会调用
  useEffect(() => {
    // console.log(count, "count");
  });
  
  // componentDidUpdate - 调用时机:依赖的状态更新才调用(也就是第二个参数传入的状态值(数组形式))
  useEffect(() => {
    // 只会在count值改变才调用
    console.log(count, "count"); // 1 2 3 4 5 ... 这里就能拿到最新的count值
  }, [count]);

  useEffect(() => {
    // 只会在count值改变才调用
    console.log(name, "name"); // wen name
  }, [name]);

  useEffect(() => {
    // count、name值改变都会调用 可传入多个状态
    console.log(count, "count"); // 1 2 3 4 5 ...
    console.log(name, "name"); // wen name
  }, [count, name]);

  // componentDidMount - 调用时机:初始化的时候调用一次,后续不再调用
  useEffect(() => {
    console.log(count, "count");
  }, []);
  
   // componentWillUnmount - 调用时机:组件销毁时调用
  useEffect(() => {
    console.log("useEffect");
    // 返回的函数会在组件销毁时调用
    return () => {
      console.log("组件销毁了");
    };
  });
  
  return (
    <div>
      <h3>{count}</h3>
      <h3>{name}</h3>
      <button onClick={increment}>count++</button> &nbsp;
      <button onClick={changeName}>changeName</button>
    </div>
  );
}

export default Demo2;

3. useRef

useRef接收一个初始值 它的返回值是一个对象,里面有个current属性{current: ...}
current属性的值就是实时的状态值
import { useRef } from "react";

const inputRef = useRef(null);

<input ref={inputRef} type="text" /> &nbsp;
// 这里inputRef.current拿到的是input框的DOM元素
<button onClick={() => inputRef.current.focus()}>点击聚焦</button>

4. useContext

useContext需要配合createContext使用
import { useContext, createContext } from "react";

// 创建一个上下文
const myContext = createContext();

// 提供者 值是通过它来进行传递的
const { Provider } = myContext;

const [theme, setTheme] = useState({ background: "white", color: "black" });

function toggleTheme() {
  theme.background === "white"
    ? setTheme({ background: "black", color: "white" })
    : setTheme({ background: "white", color: "black" });
}
// 父组件
// 这里把需要传给子孙组件的值放入value属性中
<Provider value={{ theme, toggleTheme }}>
    <Child />
</Provider>

// 子组件
// 子组件可以通过祖先组件的context拿到传递的值(包括方法)
const { theme, toggleTheme } = useContext(myContext);

return (
  <div>
    <h2>Child组件</h2>
    <button
      style={{ background: theme.background, color: theme.color }}
      onClick={() => toggleTheme(theme)}
    >
      切换颜色
    </button>
  </div>
);

5. useReducer(redux的思想)

useReducer接收两个参数,第一个参数为reducer函数,第二个参数为初始状态
useReducer返回值:第一项为store(即共享状态的集合)第二项dispatch(修改状态的方法)
import { useReducer } from "react";

// 定义一个reducer函数
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return {
        num: state.num + action.count
      };
    case "decrement":
      return {
        num: state.num - action.count
      };
    default:
      return state;
  }
}

const [store, dispatch] = useReducer(reducer, { num: 100 });

<h3>num:{store.num}</h3>
<button onClick={() => dispatch({ type: "increment", count: 100 })}>+</button>
<button onClick={() => dispatch({ type: "decrement", count: 100 })}>-</button>

6. 自定义hooks(进阶)

// 自定义一个count++的hooks 方便复用 且hooks名字更加语义化
function useCount(initCount) {
  const [count, setCount] = useState(initCount);

  return [
    count,
    () => {
      setCount((count) => count + 1);
    }
  ];
}

const [count, addCount] = useCount(0);
<button onClick={() => {addCount()}> + </button>

本文属于基础内容,其实还有hooks的进阶使用,关于useEffect的进阶指南,后续我会单独写一遍文章供大家学习,相信大家看完这篇文章后,后续再看进阶指南的时候也会比较好理解...

阅读 74

Kyrie前端之路
记录一个前端菜鸟的进阶之路...

记录一个前端菜鸟的进阶之路...

234 声望
3 粉丝
0 条评论
你知道吗?

记录一个前端菜鸟的进阶之路...

234 声望
3 粉丝
宣传栏