react组件卸载调用的方法_React 相关问题

1、 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

render () {  return (    

{this.state.todoItems.map(({item}) => { return {item.name} })} )}

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

尽量不要使用元素在列表中的索引值作为key，因为列表中的元素顺序一旦发生改变，就可能导致大量的key失效，进而引起大量的修改操作，最好用item项的id作为key值。

2、setState相关

React中constructor是唯一可以初始化state的地方，也可以把它理解成一个钩子函数，该函数最先执行且只执行一次。即直接通过this.state = {}来对state进行初始化，在其他位置需要通过this.setState函数来更新状态。直接修改this.state虽然状态可以改变，但不会触发组件的更新。

this.setState()，该方法接收两种参数：对象或函数。

对象：即想要修改的state 函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是state改变后触发的回调。

官方有这样一段描述：setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. 从这段描述可以看出，setState函数可能是异步的。先了解下setState执行后会发生什么：

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

假如setState是同步更新的，每更新一次，这个过程都要完整执行一次，无疑会造成性能问题。为了批次和效能，多个setState有可能在执行过程中还会被合并，所以setState延时异步更新是很合理的。

下面看看setState是何时同步何时异步的？由React控制的事件处理程序，以及生命周期函数调用setState不会同步更新state 。大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false，表示 setState 会同步更新 this.state；但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。

3、子组件的数据依赖于父组件componentWillReceiveProps

如果子组件的数据依赖于父组件，将会执行一个钩子函数componentWillReceiveProps，在生命周期的第一次render后不会被调用，但是会在之后的每次render中被调用 = 当父组件再次传送props

componentWillReceiveProps(nextProps){    if(this.props.activeKey !== nextProps.activeKey){      this.doSomething();    }  }

4、shouldComponentUpdate 是做什么的，(react 性能优化是哪个周期函数？)

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

5、为什么说虚拟dom会提高性能？

说Virtual DOM高效的一个理由就是它不会直接操作原生的DOM节点，因为这个很消耗性能。当组件状态变化时它会通过某些diff算法去计算出本次数据更新真实的视图变化，然后只改变“需要改变”的DOM节点。 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。 用过React的人可能都会体会到React并没有想象中那么高效，框架有时候会做很多无用功，这体现在很多组件会被“无缘无故”进行重渲染(re-render)。注意这里说的re-render和对原生DOM进行操作是两码事！所谓的re-render是你定义的class Component的render方法被重新执行，或者你的组件函数被重新执行。组件被重渲染是因为Vitual DOM的高效是建立在diff算法上的，而要有diff一定要将组件重渲染才能知道组件的新状态和旧状态有没有发生改变，从而才能计算出哪些DOM需要被更新。

6、react组件什么时候会重渲染？

只有在组件的state变化时才会出发组件的重新渲染。状态的改变可以因为props的改变，或者直接通过setState方法改变。组件获得新的状态然后React决定是否应该重新渲染组件。不幸的是，React难以置信简单地将默认行为设计为每次都重新渲染。 比如，有一个state每两秒调用一个setState，甚至这个state在整个组件中完全没有使用到，但是组件每次都会进行重渲染，这就造成了极大的性能浪费。当然，这是为了安全考虑，如果状态改变但是组件没有正确渲染的话更糟。 于是，为了避免这种情况，我们可以告诉React跳过重新渲染，即使用shouldComponentUpdate函数。 shouldComponentUpdate方法默认返回true，这就是导致每次更新都重新渲染的原因。但是你可以在需要优化性能时重写这个方法来让React更智能。比起让React每次都重新渲染，你可以告诉React你什么时候不触发重新渲染。

7、react diff 原理

• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每个单元添加唯一的 key 属性，方便比较。
• React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)
• 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
• 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

8、无状态组件与纯组件

无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。从本质上来说，无状态组件就是一个单纯的render函数，所以无状态组件的缺点也是显而易见的。因为它没有shouldComponentUpdate生命周期函数，所以每次state更新，它都会重新绘制render函数。

纯组件是通过控制shouldComponentUpdate生命周期函数，减少render调用次数来减少性能损耗的。这相对于Component来说，减少了手动判断state变化的繁琐操作，但该组件也具有一定的缺陷，因为它只能进行一层浅比较，简单来说，它只比较props和state的内存地址，如果内存地址相同，则shouldComponentUpdate生命周期就返回false。PureComponent的使用场景应该是局部数据发生改变的场景，比如带有输入框、switch开关等的UI组件就可以使用PureComponent组件封装。PureComponent中如果有数据操作最好配合一个第三方组件——Immutable一起使用，Immutable需要使用npm安装该插件才可以使用，因为Immutable可以保证数据的不变性。

9、类组件(Class component)和函数式组件(Functional component)之间有何不同

• 类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态
• 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

10、React hooks使用

基础hook useState和useReducer提供了可以刷新(更新)函数组件的途径。同样，也是自定义hook刷新的途径。如果想让自定义hook去刷新函数组件，那只能在自定义组件中使用useState或者useReducer来强制刷新，达到类似以前forUpdate的效果。 State hook的主要作用就是获取需要的 state 和 更新state的方法

const [state, setState] = useState(initialState);

import React, { useState } from 'react'export default function () {    const [count, setCount] = useState(0)    return 

{ setCount(count + 1) }}>+ {count} { setCount(count - 1) }}>-

}

Effect hook方法是在每次渲染之后执行，可以理解为class写法中的 componentDidMount / componentDidUpdate(为了方便理解可以这么理解，但不完全一样)

useEffect(didUpdate);

11、状态(state)和属性(props)之间有何不同

• State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
• Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。