React 中常见的Hooks,安排！

哈喽小伙伴们大家好！我是小李，今天是年后开工的第一天，相信大家已经元气满满，准备好迎接新的一年的挑战了吧！打起精神来，我们继续加油呀！今天，给大家分享一道我之前面试被问到相关Hooks的一道题目，今天先来说说react的，下期文章为大家分享vue的，希望对大家有所帮助！

首先，什么是Hooks?为什么会有Hooks这个东西？

所谓Hooks,它其实就是一些特殊的函数，也称钩子函数，它允许开发者在不编写 class 的情况下使用 state 以及其他 React 特性。简单来说，Hooks 就是一些特殊的函数，这些函数可以让你 "钩入"（Hook into） React 的状态和生命周期等特性。

1、useState

用于在函数组件中添加 state。state 是 React 组件中的一个重要概念，它允许组件存储和管理动态数据。

import React, { useState } from 'react';

function Counter() {

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

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default Counter;

2、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`;
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default Example;

3、useContext

用于在组件之间共享数据，避免通过中间组件层层传递 props。它需要和 React.createContext 一起使用。

import React, { createContext, useContext, useState } from 'react';

// 创建一个 Context 对象
const ThemeContext = createContext();

function App() {
    const [theme, setTheme] = useState('light');

    return (
        <ThemeContext.Provider value={theme}>
            <Toolbar />
            <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
                Toggle Theme
            </button>
        </ThemeContext.Provider>
    );
}

function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

function ThemedButton() {
    // 使用 useContext 获取 ThemeContext 的值
    const theme = useContext(ThemeContext);
    return <button style={
  
  { background: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
        Themed Button
    </button>;
}

export default App;

接下来是一些不常见的。

1、useReducer

是 useState 的替代方案，适用于复杂的 state 逻辑或多个子值需要更新的情况。它使用一个reducer 函数来管理 state 的更新。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'increment' })}>+</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
        </>
    );
}

export default Counter;

2、useCallback

返回一个 memoized 回调函数，用于优化性能。当父组件重新渲染时，使用 useCallback 可以避免子组件因为传入的回调函数引用变化而不必要地重新渲染。

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

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

    // 使用 useCallback 缓存回调函数
    const handleClick = useCallback(() => {
        console.log('Button clicked');
    }, []);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <Child onClick={handleClick} />
        </div>
    );
}

function Child({ onClick }) {
    return <button onClick={onClick}>Click me</button>;
}

export default Parent;

3、useMemo

返回一个 memoized 值，用于优化性能。它会在依赖项发生变化时重新计算值，避免在每次渲染时都进行昂贵的计算。

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

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

    // 使用 useMemo 缓存计算结果
    const sum = useMemo(() => {
        console.log('Calculating sum...');
        return a + b;
    }, [a, b]);

    return (
        <div>
            <p>a: {a}</p>
            <p>b: {b}</p>
            <p>Sum: {sum}</p>
            <button onClick={() => setA(a + 1)}>Increment a</button>
            <button onClick={() => setB(b + 1)}>Increment b</button>
        </div>
    );
}

export default App;

4、useRef

返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数。它可以用来访问 DOM 节点或在多次渲染之间保存值。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () => {
        // `current` 指向已挂载到 DOM 上的文本输入元素
        inputEl.current.focus();
    };
    return (
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>Focus the input</button>
        </>
    );
}

export default TextInputWithFocusButton;

好啦，今天的分享就到这里，整理不易，如果觉得对你有帮助，欢迎给个三连支持，我是小李，我们下期见！