React学习（三）-函数概览

在React中，函数是构建组件和处理逻辑的核心部分。React函数可以分为以下几类：

---

1. 函数组件

• 用途：用于定义无状态或使用Hooks的组件。
• 语法：

  function MyComponent(props) {
    return 
  Hello, {props.name}!
  ;
  }
  

• 特点：
  • 函数组件是纯函数，接收props并返回JSX。
  • 可以使用Hooks（如useState、useEffect）来管理状态和副作用。

---

2. 箭头函数组件

• 用途：与普通函数组件类似，但语法更简洁。
• 语法：

  const MyComponent = (props) => {
    return 
  Hello, {props.name}!
  ;
  };
  

• 特点：
  • 箭头函数没有自己的this，适用于函数组件。
  • 常用于定义小型组件。

---

3. 事件处理函数

• 用途：用于处理用户交互事件（如点击、输入等）。
• 语法：

  function handleClick() {
    console.log("Button clicked!");
  }
  
  return Click Me;
  

• 特点：
  • 事件处理函数通常绑定到JSX元素的事件属性（如onClick、onChange）。
  • 可以使用箭头函数直接定义内联事件处理函数。

---

4. Hooks函数

• 用途：用于在函数组件中添加状态、生命周期和其他功能。
• 常见Hooks：
  • useState：管理组件状态。

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

  • useEffect：处理副作用（如数据获取、订阅等）。

    useEffect(() => {
      console.log("Component mounted or updated");
    }, []);
    

  • useContext：访问上下文数据。

    const theme = useContext(ThemeContext);
    

  • useRef：创建Ref变量。

    const inputRef = useRef(null);
    

• 特点：
  • Hooks只能在函数组件或自定义Hooks中使用。
  • Hooks使得函数组件可以替代类组件的功能。

---

5. 高阶组件（HOC）

• 用途：用于增强组件的功能，是一个接收组件并返回新组件的函数。
• 语法：

  function withLogging(WrappedComponent) {
    return function(props) {
      console.log("Rendering:", WrappedComponent.name);
      return ;
    };
  }
  
  const EnhancedComponent = withLogging(MyComponent);
  

• 特点：
  • 高阶组件通常用于复用逻辑（如日志记录、权限校验等）。
  • 可以嵌套使用多个高阶组件。

---

6. 渲染函数

• 用途：用于返回JSX或渲染逻辑。
• 语法：

  function renderList(items) {
    return items.map((item) => 
  {item.name}
  );
  }
  
  return 
  {renderList(items)}
  ;
  

• 特点：
  • 渲染函数通常用于封装复杂的JSX逻辑。
  • 可以在组件内部定义，也可以作为工具函数复用。

---

7. 工具函数

• 用途：用于封装通用逻辑，供组件调用。
• 语法：

  function formatDate(date) {
    return new Date(date).toLocaleDateString();
  }
  

• 特点：
  • 工具函数通常与组件无关，可以独立测试和复用。
  • 可以在组件内部或外部定义。

---

8. 生命周期函数（类组件）

• 用途：在类组件中处理组件的生命周期事件。
• 常见生命周期方法：
  • componentDidMount：组件挂载后调用。

    componentDidMount() {
      console.log("Component mounted");
    }
    

  • componentDidUpdate：组件更新后调用。

    componentDidUpdate(prevProps, prevState) {
      console.log("Component updated");
    }
    

  • componentWillUnmount：组件卸载前调用。

    componentWillUnmount() {
      console.log("Component will unmount");
    }
    

• 特点：
  • 生命周期函数仅适用于类组件。
  • 在函数组件中，可以使用useEffect实现类似功能。

---

9. 自定义Hooks

• 用途：封装可复用的逻辑，供多个组件使用。
• 语法：

  function useCustomHook(initialValue) {
    const [value, setValue] = useState(initialValue);
    const increment = () => setValue(value + 1);
    return { value, increment };
  }
  
  function MyComponent() {
    const { value, increment } = useCustomHook(0);
    return {value};
  }
  

• 特点：
  • 自定义Hooks必须以use开头。
  • 可以组合多个Hooks来实现复杂逻辑。