react之hook的使用

最新推荐文章于 2024-06-03 13:21:45 发布

时间的荒漠666

最新推荐文章于 2024-06-03 13:21:45 发布

阅读量421

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_50789445/article/details/122533595

版权

前端专栏收录该内容

14 篇文章

订阅专栏

简单状态管理
useSetState管理临时状态

export default () => {
  const [state, setState] = useSetState({
    hello: '',
    count: 0,
  });

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <p>
        <button type="button" onClick={() => setState({ hello: 'world' })}>
          set hello
        </button>
        <button type="button" onClick={() => setState({ foo: 'bar' })} style={{ margin: '0 8px' }}>
          set foo
        </button>
        <button type="button" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>
          count + 1
        </button>
      </p>
    </div>
  );
};

useBoolean
优雅的管理切换状态

import React from 'react';
import { useBoolean } from 'ahooks';

export default () => {
  const [state, { toggle, setTrue, setFalse }] = useBoolean(true);

  return (
    <div>
      <p>Effects：{JSON.stringify(state)}</p>
      <p>
        <button type="button" onClick={() => toggle()}>
          Toggle
        </button>
        <button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>
          Set false
        </button>
        <button type="button" onClick={setTrue}>
          Set true
        </button>
      </p>
    </div>
  );
};

useToggle
用于在两个状态值间切换的 Hook。

import React from 'react';
import { useToggle } from 'ahooks';

export default () => {
  const [state, { toggle }] = useToggle();

  return (
    <div>
      <p>Effects：{`${state}`}</p>
      <p>
        <button type="button" onClick={() => toggle()}>
          Toggle
        </button>
        <button type="button" onClick={() => toggle(false)} style={{ margin: '0 8px' }}>
          Toggle False
        </button>
        <button type="button" onClick={() => toggle(true)}>
          Toggle True
        </button>
      </p>
    </div>
  );
};