react 面试
react
redux (所有数据都放入redux管理)
1、redux中间件原理(middleware)
-
中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。
-
变为 action -> middlewares -> reducer。
-
这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能
-
常见的中间件：
redux-logger：提供日志输出
redux-thunk（async/await）：处理异步操作
redux-promise：处理异步操作，actionCreator的返回值是promise
- middleware作用:
改装dispatch
2、redux有什么缺点
-
一个组件所需要的数据，必须由父组件(provider)传过来，而不能像flux中直接从store取
-
当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。
react组件的划分业务组件技术组件？
-
根据组件的职责通常把组件分为UI组件和容器组件。
-
UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
-
两者通过React-Redux 提供connect方法联系起来。
具体使用可以参照如下链接：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
react生命周期函数
1. react性能优化是哪个周期函数？
-
shouldComponentUpdate 这个方法用来判断是否需要调用render方法重新描绘dom。
-
因为dom的描绘非常消耗性能，如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法，可以极大的提高性能。
为什么虚拟dom会提高性能?
虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
具体实现步骤如下：
-
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
-
状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了
react性能优化方案
- key值相同, 就直接复用, 不用再创建虚拟DOM对象
jsx
什么是 JSX 和我们怎样在 JavaScript 代码中书写它 —— 浏览器是如何识别它的？
-
JSX 只是一种 Facebook 普及的标记语法，受益于 Babel/TSC 这些工具
-
我们能够以一种更令赏心悦目的方式书写 React.createElement 调用。
JSX 的技术原理以及随之而来的限制;为什么甚至在我们的代码并没有使用 React 的情况下，也需要在文件顶部 import React from 'react'；
为什么JSX中的组件名要以大写字母开头？
React 如何知道要渲染的是组件还是 HTML 元素就够了。
解释下“状态提升(Context)”理念吗?
- 它允许你在兄弟组件间传递数据
- 它允许你拥有更多纯展示组件，更易复用
如果不能在组件间传递数据，你怎样给多级组件传递数据:
简述flux 思想
Flux 的最大特点，就是数据的"单向流动"。
1.用户访问 View
2.View 发出用户的 Action
3.Dispatcher 收到 Action，要求 Store 进行相应的更新
4.Store 更新后，发出一个"change"事件
5.View 收到"change"事件后，更新页面
受控组件与非受控组件 :
受控组件:
在HTML中，标签<input>、<textarea>、<select>的值的改变通常是根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 更新，而呈现表单的React组件也控制着在后续用户输入时该表单中发生的情况，以这种由React控制的输入表单元素而改变其值的方式，称为：“受控组件”。
非受控组件:
表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）
用法:
受控和非受控元素都有其优点，根据具体情况选择。如果表单在UI反馈方面非常简单，则对ref进行控制是完全正确的，即使用非受控组件
diff 算法:
immutale + redux + pureComponent对项目性能优化
调用 setState, 会发生什么
- 两种开发写法 :
// 对象时简写:
setSate({
age: this.state.age + 1
})
browser's
// 官方推荐:
setState(()=>{
age: this.state.age + 1
})
- 由于setState是异步更新的所以, 当连续点击更新触发setState, 导致数据变化过多
// 解决方法 :
setState((prevState)=>{
age: this.state.age + 1
}, ()=>{
})
- setState第二回调, 是在setState的第一个回调页面数据渲染后再调用
