React---函数组件的常用hook

这篇具有很好参考价值的文章主要介绍了React---函数组件的常用hook。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 1. useState

import { useState } from 'react';

interface State {
  count: number;
}

function Counter() {
  const [state, setState] = useState<State>({ count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
    </div>
  );
}

 2. useEffect

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    // 模拟数据获取
    setTimeout(() => {
      setData('Fetched data!');
    }, 1000);
  }, []); // 空数组表示只在组件挂载时运行

  return (
    <div>
      <p>Data: {data}</p>
    </div>
  );
}

3. useContext 

import { createContext, useContext } from 'react';

interface ContextValue {
  value: string;
}

const MyContext = createContext<ContextValue>({ value: 'Default Context Value' });

function ContextConsumer() {
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>Context Value: {contextValue.value}</p>
    </div>
  );
}

4. useReducer 

import { useReducer } from 'react';

interface State {
  count: number;
}

type Action = { type: 'increment' };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

function ReducerExample() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
}

5. useCallback 

import { useCallback, useState } from 'react';

function CallbackExample() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

6. useMemo 

import { useMemo, useState } from 'react';

function MemoExample() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  const result = useMemo(() => {
    console.log('Computing result...');
    return a + b;
  }, [a, b]);

  return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => { setA(a + 1); }}>Increment A</button>
      <button onClick={() => { setB(b + 1); }}>Increment B</button>
    </div>
  );
}

7. useEffect 

import { useEffect, useRef } from 'react';

function RefExample() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  );
}

8. useImperativeHandle 

import { forwardRef, useImperativeHandle, useRef } from 'react';

interface MyComponentProps {
  // Props definition
}

interface MyComponentMethods {
  focus: () => void;
  // Other exposed methods
}

const MyComponent = forwardRef<MyComponentMethods, MyComponentProps>((props, ref) => {
  const internalRef = useRef<HTMLInputElement | null>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      if (internalRef.current) {
        internalRef.current.focus();
      }
    },
    // Other exposed methods or values
  }), []);

  return (
    <div>
      <input ref={internalRef} type="text" />
    </div>
  );
});

// Usage
function ImperativeHandleExample() {
  const myRef = useRef<MyComponentMethods>(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return (
    <div>
      <MyComponent ref={myRef} />
    </div>
  );
}

文章来源地址https://www.toymoban.com/news/detail-805038.html

到了这里,关于React---函数组件的常用hook的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Hook入门小案例 在函数式组件中使用state响应式数据

    Hook是react 16.8 新增的特性 是希望在不编写 class的情况下 去操作state和其他react特性 Hook的话 就不建议大家使用class的形式了 当然也可以用 这个他只是不推荐 我们还是先创建一个普通的react项目 我们之前写一个react组件可以这样写 简单说 就是声明一个类对象 然后在里面 写组

    2024年02月09日
    浏览(53)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(35)
  • 【前端知识】React 基础巩固(四十二)——React Hooks的介绍

    Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。 class组件 VS 函数式组件: class的优势: class组件可以定义自己的state,用来保存组件自己内部的状态;而函数式组件不可以,因为函数每次调用都会产生新的临时

    2024年02月14日
    浏览(64)
  • react使用hook封装一个tab组件

    2024年02月09日
    浏览(47)
  • 【taro react】 ---- 常用自定义 React Hooks 的实现【四】之遮罩层

    1. 问题场景 在实际开发中我们会遇到一个遮罩层会受到多个组件的操作影响,如果我们不采用 redux 之类的全局状态管理,而是选择组件之间的值传递,我们就会发现使用组件的变量来控制组件的显示和隐藏很不方便,更不要说像遮罩层这样一个项目多处使用的公共组件,他

    2024年02月07日
    浏览(39)
  • React的10个常用Hooks及使用场景

    React是一款非常流行的JavaScript库,它提供了许多Hooks,用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例: useState用于在函数组件中管理状态。 它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值,并更新状

    2024年02月09日
    浏览(36)
  • React Hook - useState函数的详细解析

    在上一篇文章中, 我用到useState来让大家体验一下hooks函数 那么接下来我们来先研究一下上面核心的一段代码代表什么意思 useState来自react,需要从react中导入,是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同; 一般来说,在函数退出

    2024年01月25日
    浏览(43)
  • 【前端知识】React 基础巩固(四十三)——Effect Hook

    Effect Hook 用来完成一些类似class中生命周期的功能。 在使用类组件时,不管是渲染、网路请求还是操作DOM,其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上,在类组件中,我们通过生命周期进行实现,如下所示: 在函数组件中,我们可以利用useEffec

    2024年02月14日
    浏览(71)
  • React Hook - useEffecfa函数的使用细节详解

    useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事

    2023年04月12日
    浏览(35)
  • React的7个常用Hooks及使用场景(含示例)

    React是一款非常流行的JavaScript库,它提供了许多Hooks,用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例: useState用于在函数组件中管理状态。 它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值,并更新状

    2024年02月10日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包