Question

我有用类组件编写的App.js文件，但我想将其更改为功能组件。从那以后，我习惯了上课，对功能组件还是陌生的。任何建议，高度赞赏...在此先感谢

下面是我的App.js文件

DESCRIBE

我希望将其转换为功能组件...请帮助

Answer 1

      const App = () => {
        const [isLoading, setIsLoading] = useState(true);
        const [weather, setWeather] = useState();
        const [error, setError] = useState();
        const [city, setCity] = useState();
        const [country, setCountry] = useState();

        useEffect(async () => {
          const result = await axios(
            "https://hn.algolia.com/api/v1/search?query=redux"
          );
          setData(result.data);

          const api_call3 = await fetch(
            `https://api.weatherbit.io/v2.0/forecast/daily` +
              `?city=${city},${country}&days=5&key=${API_KEY3}`
          );
          const data3 = await api_call3.json();
          setWeather({
            temperature: data4.data[0].temp,
            city: data4.data[0].city_name,
            country: data4.data[0].country_code,
            humidity: data4.data[0].rh,
            wind: data4.data[0].wind_spd,
            description: data4.data[0].weather.description,
            forecastdays: data3.data
          });
          setIsLoading(false);
        });
        return null;
      };

这可能会帮助您入门

Answer 2

我不会做你的工作，但是很高兴我能向你解释有状态（类）和无状态（函数/功能/任何你想调用的东西，但是没有状态）之间的区别。

有状态组件具有状态，也像容器一样使用。例如，您可以拥有一个PageContainer，在其中您可以在componentDidMount中进行ajax调用以检索信息。

无状态组件只是一个UI组件，没有副作用。曾经因此，例如，您将拥有一个将在有状态组件中呈现的组件<ShowInfo data={this.state.data} />。该showinfo将成为无状态组件。

现在，您可以使用两种钩子的组合：它们在功能组件中包含状态。您可以在react docs中阅读很多文档。

Answer 3

首先，我将通过@marzelin指出一些极其无用的行为。您应该感到羞耻，将它称为function与functional组件绝对是没有必要的。如果您使用的是Google“功能组件”，那么您实际上会得到人们称其为“功能组件”的结果，因为它的意思是相同的，没有区别，而您只是刻薄。

第二，要回答您的问题，并且没有多余的蛇，您应该真正阅读docs。综上所述，您当前的实现不能转换为一个function（al）组件，主要是因为它具有状态。为什么？函数组件就是这样，它只是一个函数，而函数不能具有状态，因为它是React的东西，而不是整体Javascript的东西。这也是将功能组件称为无状态组件的原因。这些组件的主要用途是纯净的，并在相同的输入下返回相同的输出。

如何在reactjs中将类组件转换为功能组件？

3 个答案: