【React】深入探索React：表单控制、组件通信、副作用管理、自定义Hook

DZSpace

于 2024-07-22 18:02:21 发布

阅读量405

点赞数 5

分类专栏：软件开发文章标签： react.js javascript 前端 reactjs

本文链接：https://blog.csdn.net/m0_46423830/article/details/140616309

版权

软件开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一、React表单控制

表单控制是React应用中常见的需求，React Hooks提供了两种方式来实现：受控组件和非受控组件。

1.1 受控组件

受控组件是将表单输入的值保存在组件的状态中。这样，表单数据就完全由React控制。

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
}

1.2 非受控组件

非受控组件不使用React的状态来控制输入值，而是通过直接操作DOM来获取输入值。

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleChange = () => {
    console.log(inputRef.current.value);
  };

  return <input type="text" ref={inputRef} onChange={handleChange} />;
}

二、React组件通信

组件通信是React应用中另一个重要的概念，它允许不同组件之间进行数据交换。

2.1 父子通信

父子组件之间的通信可以通过props实现。

function ParentComponent() {
  const name = 'Parent Name';

  return <ChildComponent name={name} />;
}

function ChildComponent(props) {
  return <div>{props.name}</div>;
}

2.2 子传父通信

子组件可以通过回调函数将数据传递给父组件。

function ParentComponent() {
  const getMsg = (msg) => console.log(msg);

  return <ChildComponent onGetMsg={getMsg} />;
}

function ChildComponent({ onGetMsg }) {
  const handleClick = () => {
    onGetMsg('this is son msg');
  };

  return <button onClick={handleClick}>Send Message</button>;
}

2.3 兄弟组件通信

兄弟组件通信通常通过提升状态到它们共同的父组件来实现。

function ParentComponent() {
  const [name, setName] = useState('');

  const handleAName = (name) => {
    setName(name);
  };

  return (
    <>
      <AComponent onGetAName={handleAName} />
      <BComponent name={name} />
    </>
  );
}

function AComponent({ onGetAName }) {
  const handleClick = () => {
    onGetAName('A Component Name');
  };

  return <button onClick={handleClick}>Send A Name</button>;
}

function BComponent({ name }) {
  return <div>B Component Name: {name}</div>;
}

2.4 跨层组件通信

跨层组件通信可以通过React的Context API实现。

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

const MsgContext = createContext();

function DeepChildComponent() {
  const msg = useContext(MsgContext);
  return <div>{msg}</div>;
}

function IntermediateComponent() {
  return <DeepChildComponent />;
}

function ParentComponent() {
  const msg = 'Message from Parent';

  return (
    <MsgContext.Provider value={msg}>
      <IntermediateComponent />
    </MsgContext.Provider>
  );
}

三、React副作用管理：`useEffect`

useEffect是React Hooks中用于处理副作用的函数，它可以在组件渲染后执行操作。

3.1 基本使用

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

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

  useEffect(() => {
    console.log('Component did mount and update');
  }, []); // 空依赖数组表示只在挂载时执行

  return (
    <div>
      Count: {count}
    </div>
  );
}

3.2 清除副作用

useEffect可以返回一个清除副作用的函数，通常用于定时器或订阅的清理。

function ComponentWithCleanup() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer tick');
    }, 1000);

    // 清除副作用
    return () => clearInterval(timer);
  }, []); // 空依赖数组

  return <div>Component with cleanup</div>;
}

四、自定义Hook实现

自定义Hooks允许你封装可复用的逻辑。

4.1 创建自定义Hook

import { useState, useCallback } from 'react';

function useToggle(defaultValue) {
  const [value, setValue] = useState(defaultValue);

  const toggle = useCallback(() => {
    setValue(prevState => !prevState);
  }, []);

  return [value, toggle];
}

4.2 使用自定义Hook

function App() {
  const [isOn, toggleOn] = useToggle(true);

  return (
    <div>
      {isOn ? 'Toggle is ON' : 'Toggle is OFF'}
      <button onClick={toggleOn}>Toggle</button>
    </div>
  );
}