React Hooks 的属性

React Hooks 是 React 16.8 版本中新增的特性，允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks，并附有详细的用法和代码示例。

1. useState

useState 是一个 Hook 函数，让我们在 React 函数组件中添加局部 state，而不必将它们修改为 class 组件。

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>
  );
}

在这里，useState 是一个函数，它接收初始 state 作为参数，返回一个数组，其中第一个元素是当前的 state，第二个元素是一个更新 state 的函数。

2. useEffect

useEffect Hook 可以让你在函数组件中执行副作用操作。数据获取、订阅或者手动修改 DOM 都属于副作用。

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>
  );
}

在这个示例中，我们在组件渲染后设置了 document 的 title。我们传递给 useEffect 的函数会在每次渲染后都执行。如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

3. useContext

useContext Hook使你可以订阅 React 的 Context 而不必明确的在组件树中间传递 props。

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

在这个示例中，我们使用 useContext Hook 订阅了 ThemeContext，并将其值赋给 theme 变量。当 ThemeContext 更新时，组件会重新渲染，并使用最新的 context 值。

4. useReducer

useReducer 是另一个可以在函数组件中保存 state 的 Hook，但它更适用于有复杂 state 逻辑的组件，它接受一个 reducer 函数和初始 state 作为参数，返回当前的 state 以及与其配套的 dispatch 方法。

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'})}> 1</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-1</button>
    </>
  );
}

在这个示例中，我们使用 useReducer 来处理 state 的更新逻辑。我们传递给 useReducer 的 reducer 函数会在每次 dispatch 时被调用。

5. useCallback

useCallback 返回一个记忆化版本的回调函数，它仅在依赖项改变时才会更新。当你将回调传递给被优化的子组件时，它可以防止因为父组件渲染而无谓的渲染子组件。

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

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

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

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

function Button({ onClick, children }) {
  console.log("Button re-rendered");

  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

在这个示例中，我们通过 useCallback 创建了一个只有当 count 改变时才会更新的 increment 函数。这样，只有当 increment 函数改变时，Button 组件才会重新渲染。

6. useMemo

useMemo 返回一个记忆化的值。它仅在某个依赖项改变时才重新计算 memoized 值。这用于优化性能，避免在每次渲染时都进行高开销的计算。

import React, { useMemo } from "react";

function MyComponent({ list }) {
  const processedData = useMemo(() => {
    return processData(list);
  }, [list]);

  return <OtherComponent data={processedData} />;
}

在这个示例中，我们只有当 list 改变时，才使用 processData 函数重新计算 processedData。这样可以避免在每次渲染 MyComponent 时都进行数据处理，从而优化性能。

总结起来，Hooks 提供了一种更直接的 API 来使用React 的各种特性，如：state，context，reducers 和生命周期。这使得你在没有写 class 的情况下可以直接在你的函数组件中使用这些特性。

总的来说，Hooks 是一种强大的工具，它使我们能够在函数组件中使用 React 的各种特性。同时，Hooks 还帮助我们更好地组织代码，使其更易于理解和维护，优化了应用程序的性能和响应速度。

这篇好文章是转载于：学新通技术网