React中逻辑复用的进化之路：从八种实现窥探其本质

2023-10-29 12:29:19

在React中，逻辑复用是一个非常重要的概念。它可以帮助我们减少代码重复，提高代码的可维护性，并优化应用程序的性能。

1. 使用类组件

在React早期，我们通常使用类组件来实现逻辑复用。类组件可以定义自己的状态和方法，并可以通过props传递数据。我们可以通过继承的方式来复用类组件的逻辑，从而实现代码复用。

class Button extends React.Component {
  render() {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  }
}

class SubmitButton extends Button {
  render() {
    return <Button text="提交" onClick={this.props.onSubmit} />;
  }
}

2. 使用函数组件

随着React的发展，函数组件逐渐成为主流。函数组件没有状态，也没有生命周期方法，但是它们更简单、更易于维护。我们可以通过使用useState和useEffect钩子来实现函数组件的逻辑复用。

function Button({ onClick, text }) {
  return <button onClick={onClick}>{text}</button>;
}

function SubmitButton() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const onSubmit = () => {
    setIsSubmitting(true);
    // 提交表单
    setIsSubmitting(false);
  };

  return <Button text="提交" onClick={onSubmit} />;
}

3. 使用高阶组件

高阶组件是一种函数，它可以接受一个组件作为参数，并返回一个新的组件。高阶组件可以用来包装现有组件，并为其添加新的功能。我们可以通过使用高阶组件来实现逻辑复用。

const withLoading = (Component) => {
  return (props) => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
      // 加载数据
      setIsLoading(false);
    }, []);

    return isLoading ? <Loading /> : <Component {...props} />;
  };
};

const SubmitButton = withLoading((props) => {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const onSubmit = () => {
    setIsSubmitting(true);
    // 提交表单
    setIsSubmitting(false);
  };

  return <Button text="提交" onClick={onSubmit} />;
});

4. 使用自定义Hook

自定义Hook是一种函数，它可以接受一些参数，并返回一个值。自定义Hook可以用来实现逻辑复用，并使代码更具可读性和可维护性。

const useLoading = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 加载数据
    setIsLoading(false);
  }, []);

  return isLoading;
};

const SubmitButton = () => {
  const isLoading = useLoading();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const onSubmit = () => {
    setIsSubmitting(true);
    // 提交表单
    setIsSubmitting(false);
  };

  return <Button text="提交" onClick={onSubmit} />;
};

5. 使用Render Props

Render Props是一种设计模式，它可以让我们在组件之间传递渲染逻辑。我们可以通过使用Render Props来实现逻辑复用。

const Loading = ({ isLoading, children }) => {
  return isLoading ? <Loading /> : children;
};

const SubmitButton = () => {
  const [isLoading, setIsLoading] = useState(true);

  const onSubmit = () => {
    setIsSubmitting(true);
    // 提交表单
    setIsSubmitting(false);
  };

  return (
    <Loading isLoading={isLoading}>
      <Button text="提交" onClick={onSubmit} />
    </Loading>
  );
};

6. 使用Context

Context是一种全局状态管理机制，它可以让我们在组件之间传递数据。我们可以通过使用Context来实现逻辑复用。

const LoadingContext = React.createContext(false);

const Loading = ({ children }) => {
  const isLoading = useContext(LoadingContext);

  return isLoading ? <Loading /> : children;
};

const SubmitButton = () => {
  const [isLoading, setIsLoading] = useState(true);

  const onSubmit = () => {
    setIsSubmitting(true);
    // 提交表单
    setIsSubmitting(false);
  };

  return (
    <LoadingContext.Provider value={isLoading}>
      <Loading>
        <Button text="提交" onClick={onSubmit} />
      </Loading>
    </LoadingContext.Provider>
  );
};

7. 使用Redux

Redux是一种状态管理库，它可以让我们在应用程序中集中管理状态。我们可以通过使用Redux来实现逻辑复用。

const store = Redux.createStore(reducer);

const SubmitButton = () => {
  const isLoading = useSelector((state) => state.isLoading);
  const dispatch = useDispatch();

  const onSubmit = () => {
    dispatch(submitForm());
  };

  return <Button text="提交" onClick={onSubmit} />;
};

8. 使用Apollo Client

Apollo Client是一种GraphQL客户端，它可以让我们在应用程序中使用GraphQL查询数据。我们可以通过使用Apollo Client来实现逻辑复用。

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
});

const SubmitButton = () => {
  const { loading, data } = useQuery(SUBMIT_FORM_MUTATION);

  const onSubmit = () => {
    client.mutate({
      mutation: SUBMIT_FORM_MUTATION,
    });
  };

  return <Button text="提交" onClick={onSubmit} />;
};