深入React Hoooks:从基础到自定义 Hooks

使用 useContext

useContext 是另一个常用的 Hook,它可让我们在函数组件中轻松访问 React 的 context。如果你的应用程序依赖于一些全局状态,或者你希望避免将 props 一层一层地传递到子组件,context 很有用。你可以在父组件设置一个值,然后在任何子组件中直接读取到它。

创建一个 context 对象很简单,使用 React.createContext() 并在需要访问它的组件中使用 useContext 即可。

javascript 复制代码
import React, { useContext } from 'react';

// Create a context with a default value
const ThemeContext = React.createContext('light');

function Display() {
  // Use the context value (the closest provider up the tree)
  const theme = useContext(ThemeContext);
  
  return <div>{theme}</div>;
}

// This Component sets the value and includes Display as a child
function App() {
  return (
    <ThemeContext.Provider value='dark'>
      <Display />
    </ThemeContext.Provider>
  );
}

export default App;

在这个例子中,我们在 App 组件中定义了 context 的值为 'dark',然后在 Display 组件中直接读取到 'dark'。

自定义 Hooks

自定义 Hook 是一种复用代码的有效方式,能让我们将组件逻辑提取到可重用的函数中。自定义 Hook 是一个以 "use" 开头的函数,这个函数可以调用其他的 Hook。

比如,我们可以创建一个自定义 Hook 来处理表单的输入:

javascript 复制代码
import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  
  function handleChange(e) {
    setValue(e.target.value);
  }
  
  return [value, handleChange];
}

我们的 useInput 同时返回了当前的值和一个处理改变的函数,其可以直接在表单输入中使用。例如:

javascript 复制代码
function Signup() {
  const [name, handleName] = useInput('');
  const [email, handleEmail] = useInput('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name, email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={handleName} placeholder="Name" />
      <input type="text" value={email} onChange={handleEmail} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Signup;

我们的 Signup 组件使用 useInput 自定义 Hook 来处理 name 和 email 字段。提交表单时将打印出这两个字段的值。

总的来说,React Hooks 引入了一种优雅的方式来管理状态和副作用,既可以简化代码,又可以增强可读性。除了上述所述的 Hook 外,还有许多其他的 Hook,例如 useReduceruseMemouseRef 等等,每个都具有自己的用途和唯一性。

相关推荐
EasyNTS1 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜2 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点2 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow2 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o2 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic3 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā3 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架