Question

React钩子是在上一个React版本16.8.1中发布的，提供了用于状态，效果和上下文的钩子。

如何构建自定义钩子？

Answer 1

自定义挂钩是一种JavaScript函数，其名称以“ use”开头，并且可以调用其他挂钩。

因此，通常，您只需要创建另一个函数即可调用您要使用的钩子。我认为“使用”前缀仅用于约定俗成，但我无法确认。

例如，此计数器是一个自定义钩子：

function useCounter(){
    let [value, set] = useState(0);
    return [
        value,

        // an increment function
        () => set(value+1),

        // feel free to add any other functions or datas you wish here
    ];
}

在组件中使用此计数器：

function MyComponent(){
    // use of custom hook
    let [count, increment] = useCounter();

    return (
        <div>
            <div>Times clicked: {count}</div>
            <button onClick={increment}>Click me</button>
        </div>
    );
}

Answer 2

这是创建自定义钩子的方法，该钩子使用值和两个方法导出对象：

const useCounter = () => {
  const [counter, setCounter] = useState(0);

  return {
    counter,
    increment: () => setCounter(counter + 1),
    decrement: () => setCounter(counter - 1)
  };
};

，然后在您的组件中可以按以下方式使用它：

const Component = () => {
  const { counter, increment, decrement } = useCounter();

  return (
    <div>
      <span onClick={decrement}>-</span>
      <span style={{ padding: "10px" }}>{counter}</span>
      <span onClick={increment}>+</span>
    </div>
  );
}

working example

React-如何建立自定义钩子？

2 个答案: