前端关于Recat面试题(六)

100.如何每秒更新一个组件?

你需要使用 setInterval() 来触发更改，但也需要在组件卸载时清除计时器，以防止错误和内存泄漏。

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000)
}

componentWillUnmount() {
  clearInterval(this.interval)
}

101.如何将 vendor prefixes 应用于 React 中的内联样式?

默认情况下，Autoprefixer插件已经在create-react-app中被支持，但是React不会对内联样式应用 vendor prefixes，你需要手动添加 vendor prefixes。

<div style={{
  transform: 'rotate(90deg)',
  WebkitTransform: 'rotate(90deg)', // note the capital 'W' here
  msTransform: 'rotate(90deg)' // 'ms' is the only lowercase vendor prefix
}} /

102.如何使用 React 和 ES6 导入和导出组件?

导出组件时，你应该使用默认导出：

import React from 'react'
import User from 'user'

export default class MyProfile extends React.Component {
  render(){
    return (
      <User type="customer">
        //...
      </User>
    )
  }
}

103.在 React 中如何定义常量?

你可以使用 ES7 的 const 来定义常量。

const user = {
   firstName:"陈亮",
   secondName:'哈哈'
}

104.在 React 中如何以编程方式触发点击事件?

你可以使用 ref 属性通过回调函数获取对底层的 HTMLinputeElement 对象的引用，并将该引用存储为类属性，之后你就可以利用该引用在事件回调函数中，使用 HTMLElement.click 方法触发一个点击事件。这可以分为两个步骤：

在 render 方法创建一个 ref：

<input ref={input => this.inputElement = input} />

在事件处理器中触发点击事件
```
this.inputElement.click()
```

105.在 React 中是否可以使用 async/await?

如果要在 React 中使用 async/await，则需要 Babel 和 transform-async-to-generator 插件。

106.最流行的动画软件包是什么?

React Transition Group 和 React Motion 或者React spring 是React生态系统中流行的动画包。

107.模块化样式文件有什么好处?

开启样式的模块化作用域，避免样式的冲突问题

108.什么是 React 流行的特定 linter?

ESLint 是一个流行的 JavaScript linter，可以帮我们检查js代码是否符合规范。在 React 中最常见的一个是名为 eslint-plugin-react npm 包。默认情况下，它将使用规则检查许多最佳实践，检查内容从迭代器中的键到一组完整的 prop 类型。

扫描二维码关注公众号，回复： 10798700 查看本文章

109.如何发起 AJAX 调用以及应该在哪些组件生命周期方法中进行 AJAX 调用?

你可以使用 AJAX 库，如 Axios，jQuery AJAX 和浏览器内置的 fetch API。你应该在 componentDidMount() 生命周期方法中获取数据。这样当获取到数据的时候，你就可以使用 setState() 方法来更新你的组件。

例如，从 API 中获取员工列表并设置本地状态：

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      employees: [],
      error: null
    }
  }

  componentDidMount() {
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            employees: result.employees
          })
        },
        (error) => {
          this.setState({ error })
        }
      )
  }

  render() {
    const { error, employees } = this.state
    if (error) {
      return <div>Error: {error.message}</div>;
    } else {
      return (
        <ul>
          {employees.map(item => (
            <li key={employee.name}>
              {employee.name}-{employees.experience}
            </li>
          ))}
        </ul>
      )
    }
  }
}

110.在 React Router v4 中的`<Router>`组件是什么?

React Router v4 提供了以下三种类型的 <Router> 组件:

<BrowserRouter>
<HashRouter>
<MemoryRouter>

以上组件将创建browser，hash和memory的 history 实例。React Router v4 通过router对象中的上下文使与您的路由器关联的history实例的属性和方法可用。

111.history`中的`push()`和`replace() 方法的目的是什么?

一个 history 实例有两种导航方法：

push()
replace()

如果您将 history 视为一个访问位置的数组，则push()将向数组添加一个新位置，replace()将用新的位置替换数组中的当前位置。

112.如何使用在 React Router v4 中以编程的方式进行导航?

在组件中实现操作路由/导航有三种不同的方法。

使用withRouter()高阶函数：

withRouter()高阶函数将注入 history 对象作为组件的 prop。该对象提供了push()和replace()方法，以避免使用上下文。

import { withRouter } from 'react-router-dom' // this also works with 'react-router-native'

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    {'Click Me!'}
  </button>
))

使用组件和渲染属性模式：

<Route>组件传递与withRouter()相同的属性，因此您将能够通过 history 属性访问到操作历史记录的方法。

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history }) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      {'Click Me!'}
    </button>
  )} />
)

113.如何在 React Router v4 中获取查询字符串参数?

在 React Router v4 中并没有内置解析查询字符串的能力，因为多年来一直有用户希望支持不同的实现。因此，使用者可以选择他们喜欢的实现方式。建议的方法是使用 query-string 库。

const queryString = require('query-string');
const parsed = queryString.parse(props.location.search);

114.为什么你会得到 “Router may have only one child element” 警告?

此警告的意思是Router组件下仅能包含一个子节点。

你必须将你的 Route 包装在<Switch>块中，因为<Switch>是唯一的，它只提供一个路由。

首先，您需要在导入中添加Switch：

import { Switch, Router, Route } from 'react-router'

然后在<Switch>块中定义路由：

<Router>
  <Switch>
    <Route {/* ... */} />
    <Route {/* ... */} />
  </Switch>
</Router>

115.如何在 React Router v4 中将 params 传递给 `history.push` 方法?

在导航时，您可以将 props 传递给history对象：

this.props.history.push({
  pathname: '/template',
  search: '?name=sudheer',
  state: { detail: response.data }
})

search属性用于在push()方法中传递查询参数。

116.如何实现默认页面或 404 页面?

<Switch>呈现匹配的第一个孩子<Route>。没有路径的<Route>总是匹配。所以你只需要简单地删除 path 属性，如下所示：

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={NotFound} />
</Switch>

117.登录后如何执行自动重定向?

react-router包在 React Router 中提供了<Redirect>组件。渲染<Redirect>将导航到新位置。与服务器端重定向一样，新位置将覆盖历史堆栈中的当前位置。

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class LoginComponent extends Component {
  render() {
    if (this.state.isLoggedIn === true) {
      return <Redirect to="/your/redirect/page" />
    } else {
      return <div>{'Login Please'}</div>
    }
  }
}

118.什么是 Flux?

Flux 是应用程序设计范例，用于替代更传统的 MVC 模式。它不是一个框架或库，而是一种新的体系结构，它补充了 React 和单向数据流的概念。在使用 React 时，Facebook 会在内部使用此模式。

在 dispatcher，stores 和视图组件具有如下不同的输入和输出：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LjBsWufb-1586870346861)(D:\前端备课\其他\面试题\Front-end-knowledge\assets\1575947647567.png)]

119.什么是 Redux?

Redux 是基于 Flux设计模式 的 JavaScript 应用程序的可预测状态容器。Redux 可以与 React 一起使用，也可以与任何其他视图库一起使用。它很小（约2kB）并且没有依赖性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy4B9BcI-1586870346863)(D:\前端备课\其他\面试题\Front-end-knowledge\assets\1575947676243.png)]

120.Redux 的核心原则是什么？?

Redux 遵循三个基本原则：

单一数据来源： 整个应用程序的状态存储在单个对象树中。单状态树可以更容易地跟踪随时间的变化并调试或检查应用程序。
状态是只读的： 改变状态的唯一方法是发出一个动作，一个描述发生的事情的对象。这可以确保视图和网络请求都不会直接写入状态。
使用纯函数进行更改： 要指定状态树如何通过操作进行转换，您可以编写reducers。Reducers 只是纯函数，它将先前的状态和操作作为参数，并返回下一个状态。

Jojorain

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

私信关注