【React】React 内置 Hook

       React 内置 Hook 是一组允许你在函数组件中使用 state 和其他 React 特性的函数。它们极大地扩展了函数组件的功能,使得在无需编写 class 的情况下也能使用 React 的全部功能。以下是一些主要的 React 内置 Hook 的介绍:

1.useState

useState 是用于在函数组件中添加状态(state)的 Hook。它返回一个状态变量和一个更新该状态的函数。你可以使用它来管理组件的本地状态。

import React, { useState } from 'react';  

  

function Example() {  

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

  

  return (  

    <div>  

      <p>You clicked {count} times</p>  

      <button onClick={() => setCount(count + 1)}>Click me</button>  

    </div>  

  );  

}

2.useEffect

useEffect 允许你在函数组件中执行副作用操作。这些副作用操作包括数据获取、订阅、手动修改 DOM 等。它类似于类组件中的生命周期方法(如 componentDidMount、componentDidUpdate 和 componentWillUnmount),但更加统一和灵活。

import React, { useState, useEffect } from 'react';  

  

function Example() {  

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

  

  useEffect(() => {  

    document.title = `You clicked ${count} times`;  

  }, [count]);  

  

  return (  

    <div>  

      <p>You clicked {count} times</p>  

      <button onClick={() => setCount(count + 1)}>Click me</button>  

    </div>  

  );  

}

      确保在组件卸载时清理资源,例如取消网络请求或释放内存。可以使用 useEffect 的清理函数来做到这一点。 

3.useContext

useContext 允许你订阅 React 的 Context。这使得组件能够访问到由父组件提供的值,而无需显式地通过 props 传递。

import React, { useContext } from 'react';  

import ThemeContext from './ThemeContext';  

  

function ThemedButton() {  

  const theme = useContext(ThemeContext);  

  

  return (  

    <button style={
  { color: theme.color }}>  

      I am styled by theme context!  

    </button>  

  );  

}

4.useRef

useRef 返回一个可变的 ref 对象&#

相关推荐

  1. 【React】React Hook

    2024-03-28 06:08:01       20 阅读
  2. React 之 主要的 Hook(十)

    2024-03-28 06:08:01       13 阅读
  3. vue组件

    2024-03-28 06:08:01       32 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-28 06:08:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-28 06:08:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-28 06:08:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-28 06:08:01       20 阅读

热门阅读

  1. SpringBoot + Redis + Lua = 王炸!

    2024-03-28 06:08:01       20 阅读
  2. Encoding类

    2024-03-28 06:08:01       19 阅读
  3. axios

    axios

    2024-03-28 06:08:01      21 阅读
  4. SpringMVC基础Controller

    2024-03-28 06:08:01       17 阅读
  5. 软件测试基础(2)

    2024-03-28 06:08:01       16 阅读
  6. 【剑指offer】75. 和为S的两个数字

    2024-03-28 06:08:01       21 阅读
  7. 课时77:流程控制_until循环_until基础

    2024-03-28 06:08:01       20 阅读
  8. flutter boost 如何从native跳转到flutter页面

    2024-03-28 06:08:01       20 阅读
  9. Selenium 学习(0.22)——软件测试之小结

    2024-03-28 06:08:01       16 阅读
  10. 深入浅出(四)VTK库—3D可视化

    2024-03-28 06:08:01       18 阅读
  11. 边缘随机变量

    2024-03-28 06:08:01       19 阅读
  12. TCP面向字节流协议分析

    2024-03-28 06:08:01       21 阅读
  13. maya外部调用

    2024-03-28 06:08:01       21 阅读
  14. centos 安装 netstat

    2024-03-28 06:08:01       17 阅读