React面试知识汇总

React中keys的作用

Keys是一个标识，用于追踪哪些列表中元素被修改、被添加或者被移除。

render() {
	return {
    	<ul>
			{this.state.todoItems.map((item, key) => {
				return <li key={key}>{item}</li>
			)}
		</ul>
    }
}

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

注：key值设置不建议使用 纯数字1、2、3、4，最好使用唯一的id值

调用 setState 之后发生了什么？

在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。
在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

简述：
状态合并（参数对象+当前状态 ）
  |
  |
触发调和过程
  |
  |
根据新的状态构建React元素树
  |
  |
重新渲染整个UI界面

react 声明周期函数

• 初始化阶段：
  getDefaultProps: 获取实例的默认属性
  getInitialState: 获取每个实例的初始化状态
  componentWillMount: 组件即将被装载、渲染到页面上
  render: 组件在这里生成虚拟的DOM节点
  componentDidMount: 组件真正在被装载之后
• 运行中状态：
  componentWillReceiveProps: 组件将要接收到属性的时候调用
  shouldComponentUpdate: 组件接收到新的组件或新的状态时