React最常用的几个hook_react中常用的hooks

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
useState：

用于在函数组件中添加状态管理。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。在使用时，可以通过解构赋值来获取这两个值。
在函数组件中的用法示例：
import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  return (
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
在class组件中的用法示例： 
import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  render() {
    return (
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
useEffect： 
        用于在函数组件中执行副作用操作，比如订阅事件、数据获取等。它接收一个函数作为参数，并在组件渲染完成后执行该函数。可以通过返回一个清理函数来清除副作用。 
在函数组件中的用法示例： 
import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `Count: ${count}`;
  return (
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
在class组件中使用副作用操作需要在生命周期方法中执行。 
当我回答问题时，我已经列举了Effect Hook的示例用法。以下是Ref Hook的示例用法： 
useRef： 
        用于在函数组件中创建和访问ref。它返回一个可变的ref对象，可以通过.current属性访问到对象的引用。 
在函数组件中的用法示例： 
import React, { useRef } from 'react';
function TextInput() {
  const inputRef = useRef();
  const focusInput = () => {
    inputRef.current.focus();
  return (
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
在class组件中的用法示例： 
import React, { Component, createRef } from 'react';
class TextInput extends Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  focusInput = () => {
    this.inputRef.current.focus();
  render() {
    return (
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>Focus Input</button>
Ref Hook可以用于管理DOM元素、获取组件实例和保存任意可变值。 
Ref Hook详细介绍可以参考： 
React Hooks函数之useRef_useeffect 中存放useref-CSDN博客 
useContext： 
        用于在函数组件中使用上下文（Context）。它接收一个上下文对象作为参数，并返回该上下文的当前值。 
在函数组件中的用法示例： 
import React, { useContext } from 'react';
const MyContext = React.createContext();
function Example() {
  const value = useContext(MyContext);
  return (
      <p>Value: {value}</p>
        在class组件中使用上下文需要通过static contextType来设置，并在render方法中使用this.context来获取上下文的值。 
这些是React中最常用的几个Hook，它们可以帮助我们在函数组件中实现类似于class组件的功能和特性。

 也可以自定一Hook参考：
React自定义 Hook-CSDN博客
				React useWebSocket v2实时演示注意：wss：//demos.kaazing.com/echo最近已关闭，因此在将其用作端点时，演示将无法连接。
从好的方面来说，这证明了连接失败的行为。
React useWebSocket v2 Live演示注：wss：//demos.kaazing.com/echo最近已关闭，因此在将其用作端点时，演示将无法连接。
从好的方面来说，这证明了连接失败的行为。
在StackBlitz中进行测试React Hook旨在为您的React组件提供强大的WebSocket集成。
对SocketIO的实验性支持（有关更多信息，请参见下面的文档）欢迎请求请求！
v2中的新增功能useWebSocket现在返回一个对象，而不是
				React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。函数组件和类组件的区别：
（1）函数组件没有状态（state），类组件有
（2）函数组件没有生命周期，类组件有（挂载、更新、销毁）
（3）函数组件没有this，类组件有
（4）函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件这就注定，函数组件更适合做UI展示的功能，涉及到状态的管理与切换，我们不得不
				React Hooks 是 React 16.8 的新增特性，它使得我们可以在函数组件中使用状态（state）、生命周期钩子（lifecycle hook）等之前只能在 Class 组件中使用的特性。常用的 React Hooks 包括：
1. useState: useState 是最基础的 Hook 之一，它可以用来在函数组件中添加状态。useState 返回一个数组，其中第一个元素是当前状态的值，第二个元素是改变状态的函数。
2. useEffect: useEffect 是另一个常用的 Hook，它可以让我们在函数组件中使用类似 componentDidMount、componentDidUpdate 和 componentWillUnmount 这些生命周期钩子。useEffect 接收一个函数作为参数，该函数会在组件挂载、更新或卸载时执行。
3. useContext: useContext 可以用来在函数组件中使用 Context 上下文。它接收一个 Context 对象作为参数，并返回该 Context 的当前值。
4. useMemo: useMemo 可以用来缓存计算结果，避免重复计算。它接收一个计算函数和依赖项数组作为参数，只有当依赖项数组发生变化时才会重新计算。
5. useCallback: useCallback 用来缓存函数，避免重复创建。它接收一个函数和依赖项数组作为参数，并返回一个缓存后的函数。