前端关于Recat面试题(十)

最新推荐文章于 2024-07-20 05:50:55 发布

Jojorain

最新推荐文章于 2024-07-20 05:50:55 发布

阅读量314

点赞数

文章标签： react 前端面试

本文链接：https://blog.csdn.net/Jojorain/article/details/105522211

版权

本文深入探讨了React Hooks的使用，包括如何使用hooks获取数据、是否需要重写类组件、Hooks的覆盖范围，以及React的Portal概念和应用场景。还涉及了useEffect和useLayoutEffect的区别，以及在React Router中的应用。此外，文章还讨论了优化React应用的策略，如减少打包后JS大小、提高组件渲染效率等。

摘要由CSDN通过智能技术生成

180.我需要用 hooks 重写所有类组件吗?

不需要。但你可以在某些组件（或新组件）中尝试使用 hooks，而无需重写任何已存在的代码。因为在 ReactJS 中目前没有移除 classes 的计划。

181.如何使用 React Hooks 获取数据?

名为 useEffect 的 effect hook 可用于使用 axios 从 API 中获取数据，并使用 useState 钩子提供的更新函数设置组件本地状态中的数据。让我们举一个例子，它从 API 中获取 react 文章列表。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(async () => {
    const result = await axios(
      'http://hn.algolia.com/api/v1/search?query=react',
    );

    setData(result.data);
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

记