生命周期

React v16.3之前

初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上（在整个生命周期中只会触发一次）
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后（在整个生命周期中只会触发一次）
运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段：
componentWillUnmount:组件即将销毁

React v16.3之后

新增生命周期
getDerivedStateFromProps
React生命周期的命名一直都是非常语义化的，这个生命周期的意思就是从props中获取state，可以说
是太简单易懂了。
可以说，这个生命周期的功能实际上就是将传入的props映射到state上面。
由于16.4的修改，这个函数会在每次re‐rendering之前被调用，这意味着什么呢？
意味着即使你的props没有任何变化，而是父state发生了变化，导致子组件发生了re-render，这
个生命周期函数依然会被调用。看似一个非常小的修改，却可能会导致很多隐含的问题。

getSnapshotBeforeUpdate
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组
件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回
值将作为参数传递给 componentDidUpdate()。
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等。

redux

https://www.yuque.com/liuhui-qqzxo/hvzglp/zfirmr 链接

route

bind绑定方式

• 使用Function.prototype.bind()
• 使用在constructor里定义的方法

• 使用箭头方法和构造函数

  react状态提升

  通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。

  react创建方式

• React createClass

• React.Component（ES6 classes）

• 无状态函数(stateless function)

  react获取DOM节点方式

• ReactDOM.findDOMNode(this)

• ref属性

  无状态函数创建与class创建组件的区别

注意：使用class关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；
注意：使用function创建的组件，只有props,没有自己的私有数据和生命周期函数；
1.用构造函数创建出来的组件：叫做无状态组件【无状态组件用的不多】
2.用class关键字创建出来的组件叫做有状态组件【用的最多】
3.什么情况下使用有状态组件？什么情况下用无状态组件？

• 如果一个组件需要有自己的私有数据，则推荐使用 ：class创建的有状态组件；
  
• 如果一个组件不需要私有的数据，则推荐使用，无状态组件；
  
• React 官方说：无状态组件，由于没有自己的state和生命周期函数，所以运行效率会比又状态组件稍微高一些；
  

有状态组件和无状态组件的本质区别就是：有无state属性和有无生命周期函数
4。组件中的props和state/data之间的区别

• props中的数据都是外界传递过来的；
  
• state/data中的数据，都是组件私有的；（通过ajax获取回来的数据一般都为私有数据）
  
• props中的数据都是只读的，不能重新赋值；
  
• state/data中的数据，都是可读可写的；

  state改变时如何渲染dom的

  
  react 遍历生成组件时，key值有什么作用

  主要是为了对子组件进行唯一性识别。
  当子组件发生变化时，通过 key 的识别，可以准确地判断这一个子组件是应该移动顺序、插入还是移除。

为什么有个方法被称为不安全方法，不建议使用？

为什么虚拟 dom 会提高性能?

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。

然后用新的树和旧的树进行比较，记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。

react diff 原理

把树形结构按照层级分解，只比较同级元素。

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

(组件的)状态(state)和属性(props)之间的区别

Props是一个属性值，里面数据是不能改变的；
State是一个状态机，根据数据的改变更改视图。

refs 是什么?

Refs是能访问DOM元素或组件实例的一个函数；

React 的工作原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diffing” 算法来标记虚拟 DOM 中的改变；
第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。

什么是redux？

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，
工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据。

新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，
同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。
一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们。

对webpack的理解

webpack是一个预编译模块方案，它会分析你的项目结构将其打包成适合浏览器加载的模块。
打包原理：把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。

调用 setState 之后发生了什么

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

React 中 keys 的作用

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。

渲染同类型元素不带key只会产生性能问题，如果渲染的是不同类型的状态性组件，组件将会被替换，状态丢失

你对受控组件和非受控组件了解多少？

什么是高阶组件（HOC）？

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。

你能用HOC做什么？

HOC可用于许多任务，例如：

• 代码重用，逻辑和引导抽象
• 渲染劫持
• 状态抽象和控制
• Props 控制

  什么是纯组件？

  纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。