前端面试题-React

[ly2011]

1. 说说React, 为什么选择React?

(一) React特点

1. 高效、虚拟DOM, 最大限度地减少与DOM的交互
2. 服务器端渲染
3. 组件化编码
4. 声明式设计
5. 灵活
6. JSX
7. 单向响应的数据流

(二) 为什么选择React

1. 相比其他如 Vue、Angular的双向数据绑定的框架，个人比较喜欢这种比较流程化的单向数据流形式，因为可以更好地预测数据的变化；
2. React社区完善，Facebook支撑，并拥有强大的全家桶

Vue 和 React 的区别？
[https://www.zhihu.com/question/31585377](https://www.zhihu.com/question/31585377)

你对React生命周期了解吗？

(一) 装载过程

• 当组件第一次被渲染时，依次调用的函数：
  • static propTypes(createClass创建的话：propTypes)
  • static defaultProps(createClass创建的话： getDefaultProps)
  • constructor(初始化state, createClass创建的话： getInitalState)
  • componentWillMount
  • render
  • componentDidMount

(二) 更新过程

• 更新过程会依次调用以下生命周期函数，其中render函数和"装载"过程一样
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate
• 并不是所有的更新过程都会执行全部函数

(三) 卸载过程

• React组件的卸载过程只涉及一个函数 componentWillUnMount
• 当React组件要从DOM树上删除之前，对应的 componentWillUnMount函数会被调用，所以这个函数适合做一些清理性的工作。

什么时候使用 Class Component 而非 Functional Component?

如果你的组件有state或者使用了生命周期函数，那么请使用 Class Component。否则，使用 Functional Component。

refs 是什么，还有为什么它很重要？

Refs是你访问DOM元素或者组件实例的一个安全门。为了使用它们，你可以在组件上加上一个 ref 属性，ref的值是一个回调函数，这个回调函数接受底层的DOM元素或者被挂载的组件实例作为它的第一个参数。

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type='text' ref={input => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
      )
  }
}

从上述所知，我们的输入框有一个ref属性，它的值是一个函数。这个函数接受这个input对应的真实DOM元素，我们绑定到this后得到该实例以在handleSubmit这个方法里访问它。

人们常常会误解，为了使用refs必须使用 Class Component, 单实际refs还可以通过闭包在 Functional Component 中使用。

function CustomForm({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input type='text' ref={input => inputElement = input} />
      <button type='submit'>Submit</button>
    </form>
    )
}

什么时候keys 而且为什么他们很重要？

keys负责帮助React跟踪列表中哪些元素被改变/添加/删除。

在生命周期的哪个阶段发生ajax请求而且为什么？

Ajax请求应该在 componentDidMount 函数中进行。

参考文档

1. 关于React面试题汇总
2. 【react面试题】不可错过的react 面试题 「务必收藏」