React 组件与钩子函数｜青训营钩子钩子函数（Hooks）是 React 16.8 版本引入的一种特性，它使得在

钩子

钩子函数（Hooks）是 React 16.8 版本引入的一种特性，它使得在函数组件中使用状态（state）和其他 React 特性变得更加便捷。通过使用钩子函数，可以在不编写类组件的情况下，使用状态和其他 React 功能。

以下是一些常用的 React 钩子函数：

useState：useState 钩子函数用于在函数组件中定义和使用状态。它接收一个初始状态值，并返回一个包含当前状态值和更新状态的函数的数组。可以根据需要多次调用 useState 来定义多个状态。

import React, { useState } from 'react';

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

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

useEffect：useEffect 钩子函数用于在函数组件中执行副作用操作，比如订阅数据、操作 DOM 等。它接收一个回调函数和一个依赖数组，用于指定副作用的触发条件。当依赖数组中的值发生变化时，副作用函数会被执行。

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

function MyComponent() {
  const [data, setData] = useState('');

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

useContext：useContext 钩子函数用于在函数组件中访问 React 的上下文（context）。它接收一个上下文对象（通过 React.createContext 创建），并返回当前上下文的值。

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}
```

useRef：useRef 钩子函数用于在函数组件中创建可变的引用。它返回一个可变的 ref 对象，可以用来存储任意可变值，类似于类组件中的实例变量。

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}
```

组件

在 React 中，组件是构建用户界面的基本单元。组件通过 JavaScript 类或函数的形式定义。以下是 React 组件的两种主要形式：

类组件（Class Components）：类组件是使用 ES6 的 class 语法定义的组件。它们继承自 React 的基础类 React.Component，并通过扩展该类来定义自己的组件。类组件中必须包含一个 render() 方法，该方法返回组件的 JSX 结构。类组件还可以定义其他生命周期方法和自定义方法来控制组件的行为。

以下是一个简单的类组件的示例：
```
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}
```
```
函数组件（Function Components）：函数组件是使用 JavaScript 函数定义的组件。它们是一种更简洁的组件形式，通常用于定义无状态的、只负责根据输入数据渲染界面的组件。函数组件接收一个名为 props 的参数，并返回一个 JSX 元素。

以下是一个简单的函数组件的示例：
```
import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}
```
```

类组件和函数组件都可以接收来自父组件的数据和回调函数作为 props，并根据这些输入数据渲染界面。它们也可以拥有自己的状态（通过 state 属性）和生命周期方法，以处理组件的内部状态和行为。

React 组件与钩子函数 ｜ 青训营

钩子

组件

React 组件与钩子函数｜青训营