React常用面试题分析整理

备份看：
http://www.zhangxinxu.com/php/myRecommBackup.php?id=2017-ali-view
知乎-如何考察候选人的react技术水平？ https://www.zhihu.com/question/60548673

调用setState之后发生了什么？

调用setState函数之后，react会将传入的参数对象与组件当前的状态合并，然后触发调和过程(Reconciliation)。以高效方式根据新的状态构建React元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。（按需渲染，不是全部渲染）

React 中 Element 与 Component 的区别是？

React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为createElement的调用组合；
React Component 则是可以接收参数输入并且返回某个 React Element 的函数或者类。

React 中 refs 的作用是什么？

访问 DOM 元素或者某个组件实例的句柄。

在什么情况下你会优先选择使用 Class Component 而不是 Functional Component(函数式组建)？

在组件需要包含内部状态或者使用到生命周期函数的时候使用 Class Component ，否则使用函数式组件。

//  类组件
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>
    )
  }
}

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

React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

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

componentWillMount

shouldComponentUpdate 的作用是啥以及为何它这么重要？

允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。

传入 setState 函数的第二个参数的作用是什么？

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：

this.setState(
  { username: 'tylermcginnis33' },
  () => console.log('setState has finished and the component has re-rendered.')
)