React——Hook小结

Hook 是什么?

Hook 是 React 16.8 的新增特性。简单来说它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 使用规则

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。(还有一个地方可以调用 Hook —— 就是自定义的 Hook 中。)
  • 自定义hook时它的名字应该始终以 use 开头,这样可以一眼看出其符合 Hook 使用规则。

useState

  1. useState 唯一的参数就是初始 state。相当于class中的state。
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。setCount修改状态的函数,0代表是初始值。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
          //
        Click me
      </button>
    </div>
  );
}
  1. 这里的setCount没有像setState那样做合并处理, 而是去替换它。

useReducer

  1. const [state, dispatch] = useReducer(reducer, init);第一个参数处理函数,第二个就是初始值
// 描述行为用一个常量存下来
const INCREMENT = "INCREMENT";//+1
const DECREMENT = "DECREMENT";//-1


export default () => {
    const reducer = (state, action) => {
        // state:初始值
        // action:是一个描述行为对象,做一个载体
        switch (action.type) {//有一个固定type属性
            case INCREMENT: return state + 1;
            case DECREMENT: return state - 1;
            default: return state;
        }
    }
    
    const incerment = () => dispath({
        //触发dispath,传入参数reducer函数中的action接收到,在触发具体操作
        type: INCREMENT
    });
    
    const decrement = () => dispath({
        type: DECREMENT
    });
    
    const [count, dispath] = useReducer(reducer, 0);
   //count初始值,dispath改变状态的函数     reducer处理函数,0初始值
    
    return (
        <div>
            <button onClick={() => {
                incerment()
            }}>+</button>
            <button onClick={() => {
                decrement()
            }}>-</button>
            <h1>{count} items</h1>
        </div >
    );
}

  
 	

React——Hook小结_第1张图片

自定义Hook

  1. 当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。而组件和 Hook 都是函数,所以也同样适用这种方式。
  2. 自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。
  3. 在工程文件夹下新建一个hook.js文件,复制之前的的hook代码
import { useReducer } from "react";
//描述行为还是通过变量声明出来,一旦描述行为多的话,也可以在新建一个action_type文件来存放
const INCREMENT = "INCREMENT";//+1
const DECREMENT = "DECREMENT";//-1

export const useIndexState = () => {
   const reducer = (state, action) => {
        switch (action.type) {
            case INCREMENT: return state + 1;
            case DECREMENT: return state - 1;
            default: return state;
        }
    }
    
    const incerment = () => dispath({
        type: INCREMENT
    });
    
    const decrement = () => dispath({
        type: DECREMENT
    });
    
    const [count, dispath] = useReducer(reducer, 0);
  
    //模仿hook的定义方式,我们返回的一个时状态值,第二个对象里包含改变状态的函数
    return [count, { incerment,decrement}]
}

  1. 在conter.js中引入自定义hook
import React from "react";
import { useIndexState } from "./hook";
export default () => {
    const [count, { incerment, decrement }] = useIndexState()
    return (
        <div>
            <button onClick={() => {
                incerment()
            }}>+</button>
            <button onClick={() => {
                 decrement()
            }}>-</button>
            <h1>{count} items</h1>
        </div>
    );
}
  1. 这样可以在多个组件中使用相同的hook,但是注意不会共享其state,每次调用hook时,都会获取独立的state。

你可能感兴趣的:(框架)