共计 3887 个字符，预计需要花费 10 分钟才能阅读完成。
一、React 组件生命周期有几个阶段
初始渲染阶段：这是组件行将开始其生命之旅并进入 DOM 的阶段。
getDefaultProps: 获取实例的默认属性
getInitialState: 获取每个实例的初始化状态
componentWillMount：组件行将被装载、渲染到页面上
render: 组件在这里生成虚构的 DOM 节点
componentDidMount: 组件真正在被装载之后
更新阶段：一旦组件被增加到 DOM，它只有在 prop 或状态发生变化时才可能更新和从新渲染。这些只产生在这个阶段。
componentWillReceiveProps: 组件将要接管到属性的时候调用
shouldComponentUpdate: 组件承受到新属性或者新状态的时候（能够返回 false，接收数据后不更新，阻止 render 调用，前面的函数不会被继续执行了）
componentWillUpdate: 组件行将更新不能批改属性和状态
render: 组件从新描述
componentDidUpdate: 组件曾经更新
卸载阶段：这是组件生命周期的最初阶段，组件被销毁并从 DOM 中删除。
componentWillUnmount: 组件行将销毁
二、React 组件的生命周期办法
componentWillMount() – 在渲染之前执行，在客户端和服务器端都会执行。
componentDidMount() – 仅在第一次渲染后在客户端执行。
componentWillReceiveProps() – 当从父类接管到 props 并且在调用另一个渲染器之前调用。
shouldComponentUpdate() – 依据特定条件返回 true 或 false。如果你心愿更新组件，请返回 true 否则返回 false。默认状况下，它返回 false。
componentWillUpdate() – 在 DOM 中进行渲染之前调用。
componentDidUpdate() – 在渲染产生后立刻调用。
componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。
三、受控组件和非受控组件的区别
受控组件是 React 管制的组件,input 等表单输入框值不存在于 DOM 中，而是以咱们的组件状态存在。每当咱们想要更新值时，咱们就像以前一样调用 setState。
不受管制组件是您的表单数据由 DOM 解决，而不是 React 组件，Refs 用于获取其以后值；
四、React 组件事件代理的原理
和原生 HTML 定义事件的惟一区别就是 JSX 采纳驼峰写法来形容事件名称，大括号中依然是规范的 JavaScript 表达式，返回一个事件处理函数。在 JSX 中你不须要关怀什么机会去移除事件绑定，因为 React 会在对应的实在 DOM 节点移除时就主动解除了事件绑定。
React 并不会真正的绑定事件到每一个具体的元素上，而是采纳事件代理的模式：在根节点 document 上为每种事件增加惟一的 Listener，而后通过事件的 target 找到实在的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React 都会触发对应的事件处理函数。这就是所谓的 React 模仿事件零碎。
五、为什么虚构 dom 会进步性能
虚构 dom(virtual dom) 是 JS 对象，是一个实在 dom 的 JS 对象；虚构 dom 相当于在 js 和实在 dom 两头加了一个缓存，利用 dom diff 算法防止了没有必要的 dom 操作，从而进步性能。
用 JavaScript 对象构造示意 DOM 树的构造；而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，从新结构一棵新的对象树。而后用新的树和旧的树进行比拟，记录两棵树差别把 2 所记录的差别利用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
六、React 中的 key 有什么作用？
跟 Vue 一样，React 也存在 diff 算法，而元素 key 属性的作用是用于判断元素是新创建的还是被挪动的元素，从而缩小不必要的 Diff，因而 key 的值须要为每一个元素赋予一个确定的标识。
如果列表数据渲染中，在数据前面插入一条数据，key 作用并不大；后面的元素在 diff 算法中，后面的元素因为是完全相同的，并不会产生删除创立操作，在最初一个比拟的时候，则须要插入到新的 DOM 树中。因而，在这种状况下，元素有无 key 属性意义并不大。
如果列表数据渲染中，在后面插入数据时，当领有 key 的时候，react 依据 key 属性匹配原有树上的子元素以及最新树上的子元素，只须要将元素插入到最后面地位，当没有 key 的时候，所有的 li 标签都须要进行批改
并不是领有 key 值代表性能越高，如果说只是文本内容扭转了，不写 key 反而性能和效率更高，次要是因为不写 key 是将所有的文本内容替换一下，节点不会发生变化，而写 key 则波及到了节点的增和删，发现旧 key 不存在了，则将其删除，新 key 在之前没有，则插入，这就减少性能的开销
七、react 组件之间如何通信
父子：父传子：props；子传父：子调用父组件中的函数并传参；
兄弟：利用 redux 实现和利用父组件
所有关系都通用的办法：利用 PubSub.js 订阅
八、什么是高阶组件？
高阶组件就是一个函数，且该函数承受一个组件作为参数，并返回一个新的组件。基本上，这是从 React 的组成性质派生的一种模式，咱们称它们为“纯”组件，因为它们能够承受任何动静提供的子组件，但它们不会批改或复制其输出组件的任何行为。
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧
高阶组件的参数为一个组件返回一个新的组件
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件
九、说说你对 Redux 的了解？其工作原理？
redux 将所有的状态进行集中管理，当须要更新状态的时候，仅须要对这个治理集中处理，而不必去关怀状态是如何散发到每一个组件外部的，redux 是一个实现集中管理的容器，遵循三大根本准则：繁多数据源、state 是只读的、应用纯函数来执行批改；
留神的是，redux 并不是只利用在 react 中，还与其余界面库一起应用，如 Vue；
工作原理
redux 要求咱们把数据都放在 store 公共存储空间，一个组件扭转了 store 里的数据内容，其余组件就能感知到 store 的变动，再来取数据，从而间接的实现了这些数据传递的性能
依据流程图，能够设想，React Components 是借书的用户，Action Creactor 是借书时说的话(借什么书)，Store 是图书馆管理员，Reducer 是记录本(借什么书，还什么书，在哪儿，须要查一下)，state 是书籍信息；
整个流程就是借书的用户须要先存在，而后须要借书，须要一句话来形容借什么书，图书馆管理员听到后须要查一下记录本，理解图书的地位，最初图书馆管理员会把这本书给到这个借书人
转换为代码是，React Components 须要获取一些数据, 而后它就告知 Store 须要获取数据，这就是就是 Action Creactor , Store 接管到之后去 Reducer 查一下，Reducer 会通知 Store 应该给这个组件什么数据
十、Redux 遵循的三个准则是什么？
繁多事实起源：整个利用的状态存储在单个 store 中的对象 / 状态树里。繁多状态树能够更容易地跟踪随工夫的变动，并调试或查看应用程序。
状态是只读的：扭转状态的惟一办法是去触发一个动作。动作是形容变动的一般 JS 对象。就像 state 是数据的最小示意一样，该操作是对数据更改的最小示意。
应用纯函数进行更改：为了指定状态树如何通过操作进行转换，你须要纯函数。纯函数是那些返回值仅取决于其参数值的函数。
十一、数据如何通过 Redux 流动？
十二、react-redux 的两个最次要性能?
Provider：提供蕴含 store 的 context
connect：连贯容器组件和傻瓜组件；connect 接管两个参数 mapStateToProps 和 mapDispatchToProps。mapStateToProps 把 Store 上的状态转化为内层傻瓜组件的 prop,mapDispatchToProps 把内层傻瓜组件中的用户动作转化为派送给 Store 的动作
十三、Redux 中异步的申请怎么解决
redux 应用 redux-thunk 中间件解决异步状态治理申请；redux-thunk 容许咱们 dispatch 一个蕴含异步解决逻辑函数（thunk）；咱们能够借助这种简略的机制在 redux 中解决异步逻辑；
十四、介绍 Redux 中间件
什么是中间件：
中间件其实就是一个函数，中间件容许咱们扩大 redux 应用程序。具体体现在对 action 的解决能力上，当组件触发一个 action 后，这个 action 会优先被中间件解决，当中间件解决完后，中间件再把 action 传递给 reducer，让 reducer 持续解决这个 action
罕用中间件：
redux-thunk
redux-saga
redux-actions
十五、你在 React 我的项目中是如何应用 Redux 的? 我的项目构造是如何划分的？
在 Redux 介绍中，咱们理解到 redux 是用于数据状态治理，而 react 是一个视图层面的库。如果将两者连贯在一起，能够应用官网举荐 react-redux 库，其具备高效且灵便的个性；
react-redux 将组件分成：
容器组件：存在逻辑解决
UI 组件：只负责现显示和交互，外部不解决逻辑，状态由内部管制
通过 redux 将整个利用状态存储到 store 中，组件能够派发 dispatch 行为 action 给 store，其余组件通过订阅 store 中的状态 state 来更新本身的视图