初级：React 中的生命周期方法和 Hook

react hooks 彻底改变了我们在 react 中编写功能组件的方式，使我们无需编写类即可使用状态和其他 react 功能。本指南将向您介绍基本的钩子、自定义钩子和高级钩子模式，以管理复杂的状态并优化性能。

react hook 简介

react hooks 是让您从功能组件“挂钩”react 状态和生命周期功能的函数。 hooks 是在 react 16.8 中引入的，它们提供了一种更直接的方式在功能组件中使用状态和其他 react 功能。

hooks 的主要优点

1. 更简单的代码： hooks 允许您直接在功能组件中使用状态和生命周期方法，从而使代码更简单、更具可读性。
2. 重用逻辑：自定义挂钩使您能够跨多个组件提取和重用有状态逻辑。
3. 增强的功能组件： hooks 提供了类组件的所有功能，例如管理状态和副作用，而无需使用类。

必备挂钩

使用状态

usestate 是一个钩子，允许您向功能组件添加状态。

示例：

import react, { usestate } from 'react';

const 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;

在此示例中，usestate 将 count 状态变量初始化为 0。setcount 函数在单击按钮时更新状态。

使用效果

useeffect 是一个钩子，可让您在功能组件中执行副作用，例如获取数据、直接与 dom 交互以及设置订阅。它结合了类组件中多个生命周期方法的功能（componentdidmount、componentdidupdate 和 componentwillunmount）。

示例：

import react, { usestate, useeffect } from 'react';

const datafetcher = () => {
  const [data, setdata] = usestate(null);

  useeffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setdata(data));
  }, []);

  return (
    <div>
      {data ? <pre>{json.stringify(data, null, 2)}</pre> : 'loading...'}
    </div>
  );
};

export default datafetcher;

在此示例中，useeffect 在组件挂载时从 api 获取数据。

使用上下文

usecontext 是一个钩子，可让您访问给定上下文的上下文值。

示例：

import react, { usecontext } from 'react';

const themecontext = react.createcontext('light');

const themedcomponent = () => {
  const theme = usecontext(themecontext);

  return <div>the current theme is {theme}</div>;
};

export default themedcomponent;

在此示例中，usecontext 访问 themecontext 的当前值。

使用reducer

usereducer 是一个钩子，可让您管理功能组件中的复杂状态逻辑。它是 usestate 的替代品。

示例：

import react, { usereducer } from 'react';

const initialstate = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const counter = () => {
  const [state, dispatch] = usereducer(reducer, initialstate);

  return (
    <div>
      <p>count: {state.count}</p>
      <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
      <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
    </div>
  );
};

export default counter;

在这个例子中，usereducer通过reducer函数来管理计数状态。

定制挂钩

自定义挂钩让您可以跨多个组件重用有状态逻辑。自定义钩子是使用内置钩子的函数。

示例：

import { usestate, useeffect } from 'react';

const usefetch = (url) => {
  const [data, setdata] = usestate(null);

  useeffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setdata(data));
  }, [url]);

  return data;
};

const datafetcher = ({ url }) => {
  const data = usefetch(url);

  return (
    <div>
      {data ? <pre>{json.stringify(data, null, 2)}</pre> : 'loading...'}
    </div>
  );
};

export default datafetcher;

在此示例中，usefetch 是一个自定义钩子，用于从给定 url 获取数据。

高级钩子模式

使用 usereducer 管理复杂状态

当处理涉及多个子值的复杂状态逻辑或当下一个状态依赖于前一个状态时，usereducer 可能比 usestate 更合适。

示例：

import react, { usereducer } from 'react';

const initialstate = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const counter = () => {
  const [state, dispatch] = usereducer(reducer, initialstate);

  return (
    <div>
      <p>count: {state.count}</p>
      <button onclick={() => dispatch({ type: 'increment' })}>increment</button>
      <button onclick={() => dispatch({ type: 'decrement' })}>decrement</button>
    </div>
  );
};

export default counter;

在这个例子中，usereducer通过reducer函数来管理计数状态。

使用 usememo 和 usecallback 优化性能

使用备忘录

usememo 是一个钩子，它可以记忆计算值，仅当依赖项之一发生变化时才重新计算它。它通过防止每次渲染时进行昂贵的计算来帮助优化性能。

示例：

import react, { usestate, usememo } from 'react';

const expensivecalculation = ({ number }) => {
  const computefactorial = (n) => {
    console.log('computing factorial...');
    return n <= 1 ? 1 : n * computefactorial(n - 1);
  };

  const factorial = usememo(() => computefactorial(number), [number]);

  return <div>factorial of {number} is {factorial}</div>;
};

const app = () => {
  const [number, setnumber] = usestate(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onchange={(e) => setnumber(parseint(e.target.value, 10))}
      />
      <expensivecalculation number={number} />
    </div>
  );
};

export default app;

在此示例中，usememo 确保仅当数字发生变化时才重新计算阶乘计算。

使用回调

usecallback 是一个用于记忆函数的钩子，防止在每次渲染时重新创建该函数，除非其依赖项之一发生更改。它对于将稳定的函数传递给依赖引用相等的子组件很有用。

示例：

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

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

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

  const increment = useCallback(() => setCount((c) => c + 1), []);

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

export default App;

在此示例中，usecallback 确保仅在其依赖项发生变化时才重新创建增量函数，从而防止 button 组件不必要的重新渲染。

结论

理解和利用 react hooks 对于现代 react 开发至关重要。 hooks 使您能够在功能组件中编写更清晰、更易于维护的代码。通过掌握 usestate、useeffect、usecontext 和 usereducer 等基本钩子，以及自定义钩子和 usememo 和 usecallback 性能优化等高级模式，您可以构建健壮且高效的 react 应用程序。作为一名初级开发人员，熟悉这些概念将显着增强您开发和维护高质量 react 应用程序的能力。