千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

1. 引入Hooks：
2. React Hooks 是 React 16.8 版本引入的新特性，可以让你在无需编写类组件的情况下，在函数组件中使用状态（state）和其他 React 特性。
3. 常用的React Hook:

• useState：用于在函数组件中创建和管理状态。
• useEffect：用于处理副作用操作，例如数据获取、订阅事件等。
• useContext：用于在函数组件中使用上下文（context）。
• useReducer：类似于Redux中的reducer，用于处理复杂的状态逻辑。
• useCallback：用于缓存回调函数，优化性能。
• useMemo：用于缓存计算结果，优化性能。
• useRef：用于在函数组件之间保存可变值。

1. 使用规则：

• 只能在函数组件的顶层使用Hook。不能在循环、条件语句或嵌套函数中使用。
• 在自定义Hook中使用其他Hook，以重用状态逻辑。
• Hook 的命名约定以 "use" 开头，这样可以让 linter 自动检测到其使用规则。

1. useState示例：

jsx
复制代码
import React, { useState } from 'react';

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

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

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

1. useEffect示例：

jsx
复制代码
import React, { useState, useEffect } from 'react';

const Example = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 在组件渲染后执行副作用操作，比如数据获取
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  return (
    <div>
      {/* 渲染data */}
    </div>
  );
};