前端基础知识与常见面试题(十二)

forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。
​forEach()方法需要一个回调函数（这种函数，是由我们创建但是不由我们调用的）作为参数回调函数中传递三种参数：
一、第一个参数，就是当前正在遍历的元素
二、第二个参数，就是当前正在遍历的元素的索引
三、第三个参数，就是正在遍历的数组
myArr.forEach((item,index,arr))=>{
console.log('item:'+item)
console.log('index:'+index)
console.log('arr:'+JSON.stringify(arr)
//如果想要更改最好采用以下方法
arr[index].name='李华'
}
——————————————————————————
React & Redux 扩展面试题
    1、纯函数
        定义
            一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数     Pure Component
        特点
            ① 返回结果只依赖于参数
            ② 执行过程没有任何副作用，例如：修改DOM，异步调用API，刷新页面，控制台输出...
            ③ 没有额外的依赖，例如：使用当前系统时间、使用随机数、使用全局共享变量...
        示例
            非纯函数
                function  add ( a,  b ){
     console.log( a + b*Math.random() )
}
            纯函数
                function  add ( a,  b ){
     return  a + b*0.5
}
        价值
            如果应用程序大多数函数都是由纯函数组成，那么测试、调试起来会非常方便，不用担心会产生不可预料的行为，也不会对外部产生影响
    2、Context
        问题
            如何在"多层"父子组件间共享数据？
        定义
            Context：上下文，是一种在一段组件树上的所有组件间共享数据的方法
        API
            ① React.createContext( dataInitValue )
            ② Class.contextType  /  useContext( )
            ③ Context.Provider / Context.Consumer
        示例
            示例1：在class组件上使用Context
            示例2：在function组件上使用Context
    3、高阶组件(HOC)
        问题
            如何为多个组件添加相同的附加功能？
        定义
            高阶组件：High Order Component（简称HOC），是一种为多个React 组件添加公共扩展功能的设计模式，这些扩展功能也称为”横切关注点“
        实现
            ① HOC模式不会修改原始组件，也不继承原始组件，而是用函数将原始组件用新功能包装起来组成新组件
            ② HOC封装函数是纯函数，没有任何副作用
            ③ HOC可以为被包装组件添加功能或属性，被包装组件不需要知道这些属性是怎么来的
    4、Redux
        概述
            Redux（作者：Dan Abramov，同时也是React核心团队成员）是 JavaScript 状态容器，提供具有响应式特性的全局状态管理
            作用类似于Vue.js中的Vuex，可以在组件间共享全局状态数据
            Redux可以运行于Node.js服务器端应用、Web客户端应用、原生App应用；也可以配合jQuery、React、Angular等框架组合使用。
        面试题：Redux和H5中的sessionStorage / localStorage的区别？
            ① Redux是保存在内存中的，刷新页面即恢复初始值，无法持久化保存；sessionStorage保存在内存中，localStorage保存在磁盘中，刷新也不会丢失
            ② Redux中的数据具有响应式特征，订阅了该数据的组件都会自动发生改变；sessionStorage / localStorage中的数据不具备响应式特征
            ③ Redux可以用于Web客户端应用、原生App应用、Node.js服务器端应用；sessionStorage / localStorage主要应用于Web客户端页面间的数据共享
        四大核心概念
            ① state
                应用在当前时刻需要记录的需要具备响应式特性的数据，尤其是需要在多个组件间共享的数据，故需要集中存储
                例如：服务器响应数据、缓存数据、本地生成尚未持久化到服务器的数据、UI 状态数据等
                React组件也有“状态(state)”数据，二者有本质的不同
                    ① Redux中的state是没有setState()方法的，即不能随意修改
                    ② Redux中的state用于多组件共享，而React中的state仅在当前组件中使用
                    ③ React中的state数据具有“合并”特性；而Redux中的数据修改不具备“合并”特性
            ② action
                要对数据执行的动作；要想更新 state 中的数据，需要发起一个 action
                每个action都是一个普通 JavaScript 对象，用来描述发生想要对state执行什么操作
                每个action都需要有一个type属性，描述操作的目标
                    { type: 'CHANGE_NEWS_PNO',  pno: 6 }
                    { type: 'TOGGLE_AGREEMENT',  value: true }
                    { type: 'SET_FAVORITE_TOPICS',  list: [10, 25, 31] }
            ③ reducer
                指定对 state 执行 action 动作应该如何实现
                reducer是一些纯函数，接收当前的state和要执行的action作为参数，返回根据action修改后的新的state对象，从而实现action想要实现的操作
                function appReducer(state = initState, action){
            if(action.type === ' CHANGE_NEWS_PNO '){
                    return { ...state,  newsPageNum: action.pno }
            }else if(action.type === ' TOGGLE_AGREEMENT '){
                    return { ...state,  agreementChecked: action.value }
            }else if(action.type === ' SET_FAVORITE_TOPICS '){
                    return { ...state,  favoriteTopics: action.list }
            }else {
                    return state
            }
}
            ④ store
                状态数据存储仓库； 所有的状态最终都被存储到一个唯一的“存储仓库”中
                仓库的职责
                    ① 存储所有的state
                    ② 提供 getState( ) 供外界查询数据状态 —— 返回全部的状态数据
                    ③ 提供 dispatch(action) 供外界更新状态
                    ④ 通过 subscribe(listener) 注册监听器
                    ⑤ 通过 subscribe(listener) 返回的函数注销监听器
                
        演示1：在Node.js应用中使用Redux
        演示2：在React应用中使用Redux（单一文件）
        演示3：在React应用中使用Redux（多个文件）
    5、React-Redux
        问题
            在多模块文件的React应用中，如果在根模块中创建 Redux store，然后通过props依次传递给所有的子组件，实在太麻烦了
        方案
            react-redux模块可用于使用了Redux的React项目中，提供了两方面的扩展功能
                ① 一个“Context.Provider”：为它所包含的所有子组件提供store使用
                ② 一个HOC高阶组件函数：connect()函数将自定义组件提升为“高阶组件”，将Redux的dispatch和state映射为被包装组件的props
        步骤
            ① 安装依赖模块  npm  i    redux   react-redux
            ② 顶级组件中创建 store 和 reducer，使用Provider为子组件共享store
            ③ 将store.dispatch()映射为子组件的props
            ④ 将store.getState()映射为子组件的props
————————————————————————————
Redux是一个状态管理库/状态容器
工作流程
1.组件通过dispatch方法触发Action(type+payload荷载)
2.Store接受Action并将Action分发给Reducer
3.Reducer根据Action类型对状态进行更改并将更改后的状态返还给Store
4.组件订阅Store中的状态，Store中的状态更新会同步到组件
React-redux核心概念：
connect(mapStateToprops,mapDispatchToProps)(Component)
connect方法接受两个参数，返回一个高阶组件
connect方法的第一个参数是mapStateToprops方法，将store中的state传递到组件的props中
connect方法的第二个参数是mapDispatchToProps方法，将store中的dispatch传递到组件的props中
connect方法还可以帮我们订阅store，当store中状态发生变更的时候，帮助我们重新渲染组件