如何在不写callback的情况下进行组件间数据更新？【React Hooks 进阶】

2023-10-06 04:07:47

组件间数据更新的传统方法：callback 函数

在传统的React中，如果一个组件需要更新另一个组件的数据，通常需要使用callback函数。例如，以下代码展示了如何在父组件中更新子组件的数据：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} incrementCount={this.incrementCount} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.incrementCount}>Increment Count</button>
        <p>Count: {this.props.count}</p>
      </div>
    );
  }
}

在这个例子中，父组件ParentComponent拥有一个名为count的状态，子组件ChildComponent通过props接收这个状态。当子组件中的按钮被点击时，它调用父组件传递的incrementCount函数来更新count状态。

这种方法虽然简单易懂，但存在一些局限性：

它需要在父组件和子组件之间传递callback函数，增加了代码的复杂性。
当组件嵌套较深时，callback函数可能会变得非常冗长。
它不适用于函数组件，因为函数组件不能使用state和生命周期方法。

使用赋值函数作为prop的新方法

为了解决上述问题，我们可以使用一种新的方法来实现组件间数据更新：使用赋值函数作为prop。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };

    this.incrementCount = () => {
      this.setState({ count: this.state.count + 1 });
    };
  }

  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} setCount={this.incrementCount} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.setCount}>Increment Count</button>
        <p>Count: {this.props.count}</p>
      </div>
    );
  }
}

在这个例子中，我们使用了一个名为setCount的prop，它是一个函数，可以用来更新父组件的count状态。子组件通过调用setCount函数来更新父组件的数据，而无需编写任何callback函数。

这种方法具有以下优点：

它简化了代码，减少了组件间传递callback函数的需要。
它适用于函数组件和类组件。
它可以与useReducer结合使用，进一步简化代码逻辑。

使用useReducer简化代码

useReducer是一个React Hook，可以用来管理组件的状态。它提供了比setState更强大的功能，并且可以与赋值函数作为prop的方法结合使用，进一步简化代码。

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const initialState = {
  count: 0
};

const ParentComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <ChildComponent count={state.count} setCount={dispatch} />
    </div>
  );
};

const ChildComponent = ({ count, setCount }) => {
  return (
    <div>
      <button onClick={() => setCount({ type: 'INCREMENT_COUNT' })}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
};