首页手记 React Hooks课程：初学者必备指南

React Hooks课程：初学者必备指南

标签：

React

概述

React Hooks课程介绍了React Hooks的使用方法及其在函数组件中的应用，包括状态管理、副作用操作、上下文使用等。文章详细解释了useState、useEffect等常用Hooks的用法，并提供了多个示例代码来展示实际应用场景。此外，还探讨了Hooks与类组件的区别以及最佳实践指南。

React Hooks简介

什么是React Hooks

React Hooks 是 React 16.8 版本引入的一组自定义钩子函数，用于在不编写类组件的情况下使用 React 的状态和生命周期功能。React Hooks 允许你在不改变组件类的前提下重用代码，使组件更加灵活和简洁。Hooks 可以让你在函数组件中使用 React 的特性，包括状态、生命周期、副作用等，无需将函数组件转换为类组件。

React Hooks的适用场景

React Hooks 适用于以下场景：

使用状态：当你需要在函数组件中添加状态，可以使用 useState Hook。
状态更新的副作用：当你需要执行一些副作用操作，例如订阅、设置超时、进行 API 调用等，可以使用 useEffect Hook。
使用上下文：当你需要从 Context 中获取值，可以使用 useContext Hook。
状态管理：你可以使用 useReducer Hook 来处理复杂的、结构化的状态。
性能优化：使用 useMemo 和 useCallback Hook 来提升组件性能。

React Hooks与Class组件的区别

React Hooks 与 Class 组件的主要区别在于：

类组件：使用 this.state 和生命周期方法（如 componentDidMount），需要通过类继承来使用 React 提供的特性。
函数组件：使用 Hooks 来访问 React 提供的特性，无需类继承。

示例代码

// 类组件示例
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
    this.tick = this.tick.bind(this);
  }

  componentDidMount() {
    this.tick();
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

// 使用Hooks的函数组件
import React, { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const tick = () => {
      setDate(new Date());
    };

    const intervalId = setInterval(tick, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

useState Hook详解

useState的基本用法

useState Hook 用于在函数组件中添加状态。它接收一个初始状态参数，并返回一个状态联储和一个更新该状态的函数。

基本语法

const [state, setState] = useState(initialState);

其中 state 是当前状态，setState 是更新状态的函数。initialState 是初始状态值。

示例代码

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

在上面的示例中，Counter 组件通过 useState Hook 来管理 count 状态。每当按钮被点击时，count 的值会增加 1。

useState的常用场景

useState 适用于任何需要在组件中跟踪和变化的状态。以下是几种常见的使用场景：

计数器
显示和隐藏元素
表单输入
状态持久化

示例代码

import React, { useState } from 'react';

function ToggleText() {
  const [text, setText] = useState('Hello');

  const handleToggle = () => {
    setText(text === 'Hello' ? 'World' : 'Hello');
  };

  return (
    <div>
      <p>{text}</p>
      <button onClick={handleToggle}>Toggle Text</button>
    </div>
  );
}

在上面的示例中，ToggleText 组件通过 useState Hook 来切换显示的文本。

useState的注意点

useState Hook 是按顺序执行的，即每一次更新都会重新渲染组件。
setState 不是一个立即执行的函数，而是异步执行的。
可以在 setState 中传入一个函数来批量更新状态。
如果状态更新会导致重复渲染，则可以使用 useMemo Hook 来避免。

示例代码

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

function Counter() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleCount = useCallback(() => {
    setCount(count + 1);
    setText(`Clicked ${count + 1} times`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount}>Increment</button>
      <p>{text}</p>
    </div>
  );
}

在上面的示例中，useCallback Hook 用于生成依赖 count 的 handleCount 函数，以确保每次 count 更新时生成的新函数是引用相同的，从而避免不必要的重新渲染。

useEffect Hook详解

useEffect的基本用法

useEffect Hook 用于在函数组件中执行副作用操作。它可以替代类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 方法。它接收一个函数作为参数，并在组件渲染之后执行该函数。

基本语法

useEffect(() => {
  // 副作用代码
}, [dependencies]);

其中 dependencies 是依赖数组，当 dependencies 中任一值发生变化时，useEffect 中的代码会重新执行。

示例代码

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

在上面的示例中，useEffect Hook 会在每次 count 更新后执行代码，更新浏览器的标题。

useEffect的常用场景

useEffect 可以用于以下场景：

设置定时器和清除定时器
读取和设置本地存储
发送网络请求
订阅和取消订阅事件

示例代码

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

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.log(error));
  }, []);

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

在上面的示例中，useEffect Hook 用于发送网络请求，并将数据存储在状态变量 data 中。

useEffect的生命周期对应关系

useEffect Hook 可以模拟类组件的生命周期方法：

componentDidMount 和 componentDidUpdate 对应 useEffect，依赖数组为空或包含依赖项。
componentWillUnmount 对应 useEffect 的返回值。

示例代码

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

function SubscriptionExample() {
  const [subscribed, setSubscribed] = useState(true);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, [subscribed]);

  return (
    <div>
      <button onClick={() => setSubscribed(!subscribed)}>
        Toggle Subscription
      </button>
    </div>
  );
}

在上面的示例中，useEffect Hook 返回了一个清理函数，用于清除定时器。

useMemo 和 useCallback Hook详解

useMemo Hook

useMemo Hook 用于记忆计算结果，避免不必要的计算。

基本语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

示例代码

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

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

  const expensiveComputation = useMemo(() => {
    // 复杂计算
    return a * b;
  }, [a, b]);

  return (
    <div>
      <p>Result: {expensiveComputation}</p>
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

在上面的示例中，useMemo Hook 用于记忆 a * b 的计算结果，避免每次渲染都重新计算。

useCallback Hook

useCallback Hook 用于记忆函数，避免不必要的重新渲染。

基本语法

const memoizedCallback = useCallback(() => {
  // callback logic
}, [a, b]);

示例代码

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

function ChildComponent(props) {
  console.log('ChildComponent rendered');
  return <div>{props.callback()}</div>;
}

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

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

  return <ChildComponent callback={incrementCount} />;
}

在上面的示例中，useCallback Hook 用于记忆 incrementCount 函数，避免每次渲染都重新生成新的函数。

useContext Hook

useContext Hook 用于从上下文对象中获取值。它可以让你在组件树中传值，而无需父组件逐层传递 props。

基本语法

const value = useContext(MyContext);

示例代码

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

const ThemeContext = React.createContext('light');

function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ backgroundColor: theme }}>主题按钮</button>;
}

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

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <ThemeButton />
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          切换主题
        </button>
      </div>
    </ThemeContext.Provider>
  );
}

在上面的示例中，ThemeButton 组件通过 useContext Hook 获取主题，并根据主题设置按钮的背景颜色。

useReducer Hook

useReducer Hook 用于处理复杂的状态逻辑。它可以替代 useState 来管理状态。

基本语法

const [state, dispatch] = useReducer(reducer, initialArg, init);

其中 reducer 是一个函数，用于处理状态更新。initialArg 是初始状态值，init 是可选的，用于初始化状态。

示例代码

import React, { useReducer } from 'react';

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

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

在上面的示例中，useReducer Hook 用于管理 count 状态，并通过 dispatch 发送操作。

Hooks的规则与最佳实践

Hooks使用的注意事项

只能在函数组件中使用 Hooks。
Hooks 只能在顶层使用，不能在循环、条件或嵌套作用域中调用。
Hooks 不能在普通 JavaScript 函数中使用，只能在 React 的函数组件中使用。

Hooks的最佳实践指南

保持 Hooks 的使用顺序一致。
将相关的 Hooks 封装成自定义 Hooks。
在 Hooks 中避免复杂的依赖数组，尽量使用简单的数组。
复用和抽象 Hooks，提高代码的可维护性。

示例代码

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

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.log(error));
  }, [url]);

  return data;
}

function FetchData() {
  const url = 'https://api.example.com/data';
  const data = useFetch(url);

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

在上面的示例中，useFetch 自定义 Hooks 封装了发送网络请求的逻辑，可以在多个组件中复用。

Hooks项目实战

Hooks在实际项目中的应用案例

示例代码

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.log(error))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>用户列表</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

在上面的示例中，UserList 组件使用 useState 和 useEffect Hook 来管理用户列表的加载和渲染。

Hooks优化代码结构的示例

示例代码

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

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  useEffect(() => {
    fetch('https://api.example.com/todos')
      .then(response => response.json())
      .then(data => setTodos(data))
      .catch(error => console.log(error));
  }, []);

  const handleAddTodo = useCallback(() => {
    setTodos([...todos, { id: Date.now(), text: newTodo }]);
    setNewTodo('');
  }, [todos, newTodo]);

  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={newTodo}
        onChange={e => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>添加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

在上面的示例中，TodoList 组件使用 useState 和 useEffect Hook 来管理待办事项列表的加载和更新，使用 useCallback Hook 来记忆 handleAddTodo 函数，避免每次渲染都生成新的函数。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕斯王

手记
篇

粉丝

110

获赞与收藏

512

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React Hooks课程：初学者必备指南

示例代码

基本语法

示例代码

示例代码

示例代码

基本语法

示例代码

示例代码

示例代码

useMemo Hook

基本语法

示例代码

useCallback Hook

基本语法

示例代码

基本语法

示例代码

基本语法

示例代码

示例代码

示例代码

示例代码

阅读免费教程