前端关于Recat面试题(十)

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;

记住，我们为 effect hook 提供了一个空数组作为第二个参数，以避免在组件更新时再次激活它，它只会在组件挂载时被执行。比如，示例中仅在组件挂载时获取数据。

182.Hooks 是否涵盖了类的所有用例?

Hooks 并没有涵盖类的所有用例，但是有计划很快添加它们。目前，还没有与不常见的 getSnapshotBeforeUpdate 和componentDidCatch 生命周期等效的钩子。

183.在 React 中什么是 Portal ?

Portal 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

ReactDOM.createPortal(child, container)

第一个参数是任何可渲染的 React 子节点，例如元素，字符串或片段。第二个参数是 DOM 元素。

184.portals 的典型使用场景是什么?

当父组件拥有 overflow: hidden 或含有影响堆叠上下文的属性（z-index、position、opacity 等样式），且需要脱离它的容器进行展示时，React portal 就非常有用。例如，对话框、全局消息通知、悬停卡和工具提示。

185.useEffect和useLayoutEffect有什么区别

useEffect：
基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好.

useLayoutEffect：
这个是用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制.

186.使用webpack打包React项目，怎么减小生成的js大小？

1: 分离出业务代码和第三方库
2: 分离css
3: 清除打包后的文件中的注释, 和copyright信息
4: 引入的React切换到产品版本

https://www.meiwen.com.cn/subject/wjdnattx.html

187.你最不喜欢React的哪一个特性（说一个就好）

React它不是一个框架，它只是MVC（模型 - 视图 - 控制器）中的view
—所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

React-Native还没有提供1.0正式版，坑多，打包出来的项目体积大，性能较原生App有显著差异。

188.immutable的原理是什么？

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。 Immutable 则提供了简洁高效的判断数据是否变化的方法，只需 === 和 is 比较就能知道是否需要执行 render()，而这个操作几乎 0 成本，所以可以极大提高性能

189.react如何提高组件的渲染效率呢？

子组件执行 shouldComponentUpdate 方法，自行决定是否更新
给列表中的组件添加key属性
使用PureComponent进行浅比较

190.写出React动态改变class切换组件样式

可以通过一个变量来控制样式的切换，当点击该变量的时候改变变量值为true或者false即可：

<p className={this.state.display?"active":"active1"}>你是我的唯一</p>

191.create-react-app创建新运用怎么解决卡的问题？

切换npm和yarn的源

192.在使用React过程中你都踩过哪些坑？

普通函数点击事件中的this是undefined

label标签要使用htmlFor

img标签指定src属性的时候要require()图片

指定class要用className

组件名字首字母要大写

create-react-app脚手架中配置less要安装react-app-rewired和customize-cra和 babel-plugin-import，并且在项目根目录下创建config-overrides.js，还需要修改package.json中的script命令才行

配置react-native环境的时候，package server使用8081端口，而8081被java.exe占用的问题

。。。

193.React-router怎么获取历史对象和URL的参数？

1.在使用Route包裹的组件中，可以直接获取location/history/match三个对象
this.props.location
this.props.history
this.props.match

2.在没有使用Router包裹的组件中，需要使用withRouter先将组件包裹起来，然后就可以获取上面三个对象了

194.React-Router的实现原理是什么？

底层原理：借助了h5 API中的pushState、replaceState以及location.hash location.replace来实现的

1.页面跳转实现
BrowserHistory：pushState、replaceState;
HashHistory：location.hash、location.replace

2.浏览器回退
BrowserHistory：popstate;
HashHistory：hashchang;

195.React-Router 4怎样在路由变化时重新渲染同一个组件？

当路由变化时，会执行getDerivedStateFromProps生命周期钩子函数，可以在该函数中重新获取数据，修改state

Jojorain

发布了29 篇原创文章 · 获赞 0 · 访问量 741

私信关注