前端工程师的20道react面试题自检

什么是 React Fiber?

Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。
React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

Redux 原理及工作流程

（1）原理 Redux源码主要分为以下几个模块文件

• compose.js 提供从右到左进行函数式编程
• createStore.js 提供作为生成唯一store的函数
• combineReducers.js 提供合并多个reducer的函数，保证store的唯一性
• bindActionCreators.js 可以让开发者在不直接接触dispacth的前提下进行更改state的操作
• applyMiddleware.js 这个方法通过中间件来增强dispatch的功能

const actionTypes = {
   
    ADD: 'ADD',
    CHANGEINFO: 'CHANGEINFO',
}

const initState = {
   
    info: '初始化',
}

export default function initReducer(state=initState, action) {
   
    switch(action.type) {
   
        case actionTypes.CHANGEINFO:
            return {
   
                ...state,
                info: action.preload.info || '',
            }
        default:
            return {
    ...state };
    }
}

export default function createStore(reducer, initialState, middleFunc) {
   

    if (initialState && typeof initialState === 'function') {
   
        middleFunc = initialState;
        initialState = undefined;
    }

    let currentState = initialState;

    const listeners = [];

    if (middleFunc && typeof middleFunc === 'function') {
   
        // 封装dispatch 
        return middleFunc(createStore)(reducer, initialState);
    }

    const getState = () => {
   
        return currentState;
    }

    const dispatch = (action) => {
   
        currentState = reducer(currentState, action);

        listeners.forEach(listener => {
   
            listener();
        })
    }

    const subscribe = (listener) => {
   
        listeners.push(listener);
    }

    return {
   
        getState,
        dispatch,
        subscribe
    }
}

（2）工作流程

• const store= createStore（fn）生成数据;
• action: {type: Symble('action01), payload:‘payload’ }定义行为;
• dispatch发起action：store.dispatch(doSomething(‘action001’));
• reducer：处理action，返回新的state;

通俗点解释：

• 首先，用户（通过View）发出Action，发出方式就用到了dispatch方法
• 然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State
• State—旦有变化，Store就会调用监听函数，来更新View

以 store 为核心，可以把它看成数据存储中心，但是他要更改数据的时候不能直接修改，数据修改更新的角色由Reducers来担任，store只做存储，中间人，当Reducers的更新完成以后会通过store的订阅来通知react component，组件把新的状态重新获取渲染，组件中也能主动发送action，创建action后这个动作是不会执行的，所以要dispatch这个action，让store通过reducers去做更新React Component 就是react的每个组件。

高阶组件

高阶函数：如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。

高阶组件：如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。

react 中的高阶组件

React 中的高阶组件主要有两种形式：属性代理和反向继承。

属性代理 Proxy

• 操作 props
• 抽离 state
• 通过 ref 访问到组件实例
• 用其他元素包裹传入的组件 WrappedComponent

反向继承

会发现其属性代理和反向继承的实现有些类似的地方，都是返回一个继承了某个父类的子类，只不过属性代理中继承的是 React.Component，反向继承中继承的是传入的组件 WrappedComponent。

反向继承可以用来做什么：

1.操作 state

高阶组件中可以读取、编辑和删除WrappedComponent组件实例中的state。甚至可以增加更多的state项，但是非常不建议这么做因为这可能会导致state难以维护及管理。

function withLogging(WrappedComponent) {
       
    return class extends WrappedComponent {
       
        render() {
       
            return (    
                <div>;    
                    <h2>;Debugger Component