时间戳

首页 > 解决方案 > 将 react 中的类基组件转换为钩子

reactjs - 将 react 中的类基组件转换为钩子

问题描述

我是反应钩子的新手，我很难将这个类转换为具有 ES6 语法的反应钩子。有人能帮帮我吗？这是我的朋友...

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { fetchMovie, setLoading } from '../../actions/searchActions';

import Spinner from '../layout/Spinner';

export class Movie extends Component {
  componentDidMount() {
    this.props.fetchMovie(this.props.match.params.id);
    this.props.setLoading();
  }
  render() {
    const { loading, movie } = this.props;

    let movieInfo = (
      <div className="container">
       jsx......
 </div>
    );

    let content = loading ? <Spinner /> : movieInfo;
    return <div>{content}</div>;
  }
}

const mapStateToProps = state => ({
  loading: state.movies.loading,
  movie: state.movies.movie
});

export default connect(
  mapStateToProps,
  { fetchMovie, setLoading }
)(Movie);

标签： reactjsreact-reduxreact-hooks

解决方案

一些最常用的钩子是useState, useEffect。useState 在某些方面类似于 setState，不同之处之一是您没有 useState 的回调功能。您可以使用 useEffect 来实现类似的效果。useEffect可以作为componentDidMount,componentDidUpdate和componentWillUnmount. 如果您传递一组空的依赖项[]（如下例所示），它的行为类似于componentDidMount. 如果您希望根据某些条件（例如正在更新的状态等）触发特定功能，您可以将其作为dependancy. 然后， 的useEffect行为为componentDidUpdate。useEffect接受第三个参数，作为回调函数。这在卸载组件时触发，从而添加componentWillUnmount行为。

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { fetchMovie, setLoading } from '../../actions/searchActions';

import Spinner from '../layout/Spinner';

const Movie = () => {
  useEffect(() => {
    props.fetchMovie(props.match.params.id);
    props.setLoading();
  }, [])
  const { loading, movie } = props;

    let movieInfo = (
      <div className="container">
       jsx......
      </div>
    );

  let content = loading ? <Spinner /> : movieInfo;
  return <div>{content}</div>;
}

const mapStateToProps = state => ({
  loading: state.movies.loading,
  movie: state.movies.movie
});

export default connect(
  mapStateToProps,
  { fetchMovie, setLoading }
)(Movie);

推荐阅读