Reactjs 将react中的类基组件转换为挂钩

我对react hooks是新手，我很难改变这个课程， 使用ES6语法生成react钩子。谁能帮帮我吗。这是我的护照

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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../../actions/searchActions”导入{fetchMovie，setLoading}；
从“../layout/Spinner”导入微调器；
导出类电影扩展组件{
componentDidMount（）{
this.props.fetchMovie（this.props.match.params.id）；
this.props.setLoading（）；
}
render（）{
const{loading，movie}=this.props；
让movieInfo=(
jsx。。。。。。
);
让内容=加载？：movieInfo；
返回{content}；
}
}
常量mapStateToProps=状态=>({
加载：state.movies.load，
电影：国家电影
});
导出默认连接(
MapStateTops，
{fetchMovie，setLoading}
)（电影）；

一些最常用的钩子是

useState

，

useffect

。useState在某些方面与setState类似，不同之处之一是useState没有回调功能。您可以使用useEffect实现类似的功能

useEffect

可以作为

componentDidMount

、

componentDidUpdate

和

componentWillUnmount

工作。如果传递一组空的依赖项，

[]

（如以下示例中所示），则其行为类似于

componentDidMount

。如果您希望根据某些条件（如正在更新的状态等）触发特定功能，可以将其作为依赖项传递。然后，

useffect

表现为

componentdiddupdate

useffect

接受第三个参数作为回调函数。这在卸载组件时触发，从而添加

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);

import React，{useffect}来自“React”；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../../actions/searchActions”导入{fetchMovie，setLoading}；
从“../layout/Spinner”导入微调器；
康斯特电影=（）=>{
useffect（（）=>{
props.fetchMovie（props.match.params.id）；
props.setLoading（）；
}, [])
const{loading，movie}=道具；
让movieInfo=(
jsx。。。。。。
);
让内容=加载？：movieInfo；
返回{content}；
}
常量mapStateToProps=状态=>({
加载：state.movies.load，
电影：国家电影
});
导出默认连接(
MapStateTops，
{fetchMovie，setLoading}
)（电影）；

一些最常用的钩子是

useState

，

useffect

。useState在某些方面与setState类似，不同之处之一是useState没有回调功能。您可以使用useEffect实现类似的功能

useEffect

可以作为

componentDidMount

、

componentDidUpdate

和

componentWillUnmount

工作。如果传递一组空的依赖项，

[]

（如以下示例中所示），则其行为类似于

componentDidMount

。如果您希望根据某些条件（如正在更新的状态等）触发特定功能，可以将其作为依赖项传递。然后，

useffect

表现为

componentdiddupdate

useffect

接受第三个参数作为回调函数。这在卸载组件时触发，从而添加

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);

import React，{useffect}来自“React”；
从'react redux'导入{connect}；
从'react router dom'导入{Link}；
从“../../actions/searchActions”导入{fetchMovie，setLoading}；
从“../layout/Spinner”导入微调器；
康斯特电影=（）=>{
useffect（（）=>{
props.fetchMovie（props.match.params.id）；
props.setLoading（）；
}, [])
const{loading，movie}=道具；
让movieInfo=(
jsx。。。。。。
);
让内容=加载？：movieInfo；
返回{content}；
}
常量mapStateToProps=状态=>({
加载：state.movies.load，
电影：国家电影
});
导出默认连接(
MapStateTops，
{fetchMovie，setLoading}
)（电影）；

您可以重写为这样的钩子

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

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

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

export const Movie = ({ match}) => {
  const dispatch = useDispatch();
  const movie = useSelector(state => state.movies.movie);
  const loading = useSelector(state => state.movies.loading);
  useEffect(() => {
        dispatch(fetchMovie(match.params.id));
        dispatch(setLoading());
     }, []);

  return (
    <div>
      {
        loading 
         ? <Spinner /> 
         : <div className="container">
            jsx......
          </div>
      }
    </div>
  )
}

import React，{useffect}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从'react router dom'导入{Link}；
从“../../actions/searchActions”导入{fetchMovie，setLoading}；
从“../layout/Spinner”导入微调器；
导出常量电影=（{match}）=>{
const dispatch=usedpatch（）；
const movie=useSelector（state=>state.movies.movie）；
const loading=useSelector（state=>state.movies.loading）；
useffect（（）=>{
调度（fetchMovie（match.params.id））；
调度（setLoading（））；
}, []);
返回(
{
加载
?  
: 
jsx。。。。。。
}
)
}

---

使用空数组作为参数的useEffect与componentDidMount类似。我将connect改为useSelector和useDispatch，您可以像这样重写为hook

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

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

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

export const Movie = ({ match}) => {
  const dispatch = useDispatch();
  const movie = useSelector(state => state.movies.movie);
  const loading = useSelector(state => state.movies.loading);
  useEffect(() => {
        dispatch(fetchMovie(match.params.id));
        dispatch(setLoading());
     }, []);

  return (
    <div>
      {
        loading 
         ? <Spinner /> 
         : <div className="container">
            jsx......
          </div>
      }
    </div>
  )
}

import React，{useffect}来自“React”；
从'react redux'导入{useDispatch，useSelector}；
从'react router dom'导入{Link}；
从“../../actions/searchActions”导入{fetchMovie，setLoading}；
从“../layout/Spinner”导入微调器；
导出常量电影=（{match}）=>{
const dispatch=usedpatch（）；
const movie=useSelector（state=>state.movies.movie）；
const loading=useSelector（state=>state.movies.loading）；
useffect（（）=>{
调度（fetchMovie（match.params.id））；
调度（setLoading（））；
}, []);
返回(
{
加载
?  
: 
jsx。。。。。。
}
)
}

Useffect wi