面试题

什么是高阶组件，你能用Hoc做什么？

一个高阶组件只是一个包装了另外一个 React 组件的 React 组件
可以用来做：

• 渲染劫持
• state更新与修改
• props修改

什么是纯组件

React.PureComponent在内部通过shouldComponentUpdate浅层对比了props和state 使用方法如下：
父组件中使用：

import React from 'react'
import ReactDOM from 'react-dom'
 
/* 
  组件性能优化：
*/
 
// 生成随机数
class App extends React.PureComponent {
  state = {
    number: 0
  }
  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }
 
  render() {
    console.log('父组件中的render')
    return (
      <div>
        <h1>随机数：{this.state.number}</h1>
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}
 
ReactDOM.render(<App />, document.getElementById('root'))

子组件中使用：

import React from 'react'
import ReactDOM from 'react-dom'
 
/* 
  组件性能优化：
*/
 
// 生成随机数
class App extends React.Component {
  state = {
    number: 0
  }
 
  handleClick = () => {
    this.setState(() => {
      return {
        number: Math.floor(Math.random() * 3)
      }
    })
  }
 
  render() {
    return (
      <div>
        <NumberBox number={this.state.number} />
        <button onClick={this.handleClick}>重新生成</button>
      </div>
    )
  }
}
 
class NumberBox extends React.PureComponent {
  render() {
    console.log('子组件中的render')
    return <h1>随机数：{this.props.number}</h1>
  }
}
 
ReactDOM.render(<App />, document.getElementById('root'))

什么是redux,redux遵循的三个原则是什么

redux：状态管理模式。react可以使用redux来进行复杂数据的管理。
react的三个原则：

• 单一状态原则，整个应用的状态存在一个对象的strore中
• 状态只读原则，状态的更改只能通过dispatch进行触发
• reducer必须是纯函数，状态的输出至于状态的输入有关，其他无关

什么是redux-thunk，redux-thunk的作用？

redux是一个可以让store.dispatch接收一个函数或者对象，方便请求处理

在生命周期中的哪一步你应该发起 AJAX 请求

componentDidMount