关于Redux面试题

什么是Redux?

在react中每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享等，如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后期我们将比较难以维护，所以我们可以把数据进行集中式的管理，redux就是一个实现上述集中管理的容器的工具，redux并不是只应用在react中，还与其他界面库一起使用，如Vue

Redux的三大原则

state数据必须是单一数据源
redux中的state数据必须 是只读的，只能通过dispatch调用actions修改
Reducer必须使用纯函数来执行修改

redux的执行原理

React的组件需要获取或者修改页面的数据，通过dispatch方法调用actions进入到Reducer函数中修改state的数据内容，state更新后，通知组件更新页面即可。

redux的使用步骤

创建一个store文件夹，新建一个index.js文件
文件中导入redux的createStore方法，用于创建公共数据区域
创建一个reducer纯函数，接受两个参数state，actions分别表示分别表示数据和操作state的方法，返回state数据给组件页面
把reducer作为createStore的参数抛出
在需要使用的页面导入store文件，通过store.getState获取数据，通过store.dispatch触发action修改state数据
store.subscrible 方法监听 store 的改变，避免数据不更新

state和props有什么区别

相同点：
两者都是 JavaScript 对象
两者都是用于保存信息
props 和 state 都能触发渲染更新
区别：
props 是外部传递给组件的，而 state 是在组件内被组件自己管理的，一般在 constructor 中初始化
props 在组件内部是不可修改的，但 state 在组件内部可以进行修改
state 是多变的、可以修改

super() 和super(props)有什么区别?

在 React 中，类组件基于 ES6，所以在 constructor 中必须使用 super
在调用 super 过程，无论是否传入 props，React 内部都会将 porps 赋值给组件实例 porps 属性中
如果只调用了 super()，那么 this.props 在 super() 和构造函数结束之间仍是 undefined

说说 React中的setState执行机制

一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state, 当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用
setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据
在使用setState更新数据的时候，setState的更新类型分成：同步更新，异步更新
在组件生命周期或React合成事件中，setState是异步
在setTimeout或者原生dom事件中，setState是同步
对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果

React的事件机制总结

React事件机制总结如下：

• React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
• React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation()无效的原因。
• React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
• React 有一套自己的合成事件 SyntheticEvent

说说对React refs 的理解？应用场景？

创建ref的形式有三种：

• 传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素
• 传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素
• 传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，更多情况我们是通过props与state的方式进行去重新渲染子元素

但下面的场景使用refs非常有用：

• 对Dom元素的焦点控制、内容选择、控制
• 对Dom元素的内容设置及媒体播放
• 对Dom元素的操作和对组件实例的操作
• 集成第三方 DOM 库

说说对高阶组件的理解？应用场景?

一个函数的参数是一个函数，或者 函数的返回值是一个函数，我们称这类函数是高阶函数。
什么是React高阶组件：一个组件的参数是组件，并且返回值是一个组件，我们称这类组件为高阶组件
withRouter() memo() react-redux中connect方法是高阶组件
React 中的高阶组件主要有两种形式：属性代理 和 反向继承。
属性代理: 是 一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了 React.Component 组件的类，且在该类的 render() 方法中返回被传入的 WrappedComponent 组件

反向继承:是 一个函数接受一个 WrappedComponent 组件作为参数传入，并返回一个继承了该传入 WrappedComponent 组件的类，且在该类的 render() 方法中返回 super.render() 方法。

说说对Redux中间件的理解？常用的中间件有哪些？

Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理
前面我们了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作
那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件，其本质上一个函数，对store.dispatch方法进行了改造，在发出 Action和执行 Reducer这两步之间，添加了其他功能

常用的redux中间件，如：
redux-thunk：用于异步操作
redux-logger：用于日志记录

中间件都需要通过applyMiddlewares进行注册，作用是将所有的中间件组成一个数组，依次执行然后作为第二个参数传入到createStore中

const store = createStore(
reducer,
applyMiddleware(thunk, logger)
);

React中常见的Hooks方法有哪些？

useState

useState()用于为函数组件引入状态。在useState()中，数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState

useEffect

useEffect()接受两个参数，第一个参数是你要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项。只要这个数组发生变化，useEffect()就会执行

useRef

相当于class组件中的createRef的作用，ref.current获取绑定的对象

useContext

接受context状态树传递的数据内容

useReducer

接受reducer函数和状态的初始值作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数

userMemo useCallback

useMemo 和 useCallback接收的参数都是一样,第一个参数为回调，第二个参数为要依赖的数据
共同作用：仅仅依赖数据发生变化, 才会调用，也就是起到缓存的作用。useCallback缓存函数，useMemo 缓存返回值。

useMemo, useCallback做了那些性能优化

useMemo 主要缓存复杂运算的数据的结果，第二个参数，定义监听的变量，需要返回一个结果。

当父组件的组件更新的时候会导致子组件的重新渲染，但是如果父组件的更新的数据没有传递给子组件的话，这个时候如果还让子组件重新渲染的化，就会导致组件的更新的性能消耗比较大。

所以说这个时候我们可以使用useMemo, 或者React中内置的memo方法对子组件进行缓存，这样的话只有父组件更新跟子组件相关联的数据的时候才会导致子组件的重新渲染，从而提高组件的渲染性能。

但是如果我们给子组件传递方法的时候，上面memo方法的缓存就不起作用了，原因是父组件没更新一次会导致方法的重新调用，进而导致子组件的重新更新，所以这个时候我们可以使用useCallback对传递的方法进行缓存，监听数据更新后才会重新调用方法，从而提高组件的渲染性能。

A组件是B组件的父组件，那么A组件加载完成，请详细叙述A，B组件执行流程

执行A组件的constructor, componentWillMount, render方法
执行B组件的 constructor, componentWillMount, render componentDidMount方法
在执行A的的componentDidMount方法，更新的方法类比