阿里前端二面react面试题

最新推荐文章于 2024-09-19 22:54:01 发布

beifeng11996

最新推荐文章于 2024-09-19 22:54:01 发布

阅读量170

点赞数

文章标签：前端框架 reactjs

本文链接：https://blog.csdn.net/beifeng11996/article/details/129253740

版权

本文详述了React和Redux的重要概念与实践，包括Redux的实现原理、React的生命周期、状态管理、优化技巧和React Native的调试方法。讨论了Action在Redux中的使用注意事项、React的生产构建以及如何利用React Hooks和Refs提升开发效率。还涵盖了React Router的配置和Redux中间件的工作流程，最后提出了React组件类型、状态管理和路由模式的选择策略。

摘要由CSDN通过智能技术生成

Redux实现原理解析

为什么要用redux

在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题

Redux设计理念

Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图

Redux三大原则

唯一数据源

整个应用的state都被存储到一个状态树里面，并且这个状态树，只存在于唯一的store中

保持只读状态

state是只读的，唯一改变state的方法就是触发action，action是一个用于描述以发生时间的普通对象

数据改变只能通过纯函数来执行

使用纯函数来执行修改，为了描述action如何改变state的，你需要编写reducers

Redux源码

let createStore = (reducer) => {
   
    let state;
    //获取状态对象
    //存放所有的监听函数
    let listeners = [];
    let getState = () => state;
    //提供一个方法供外部调用派发action
    let dispath = (action) => {
   
        //调用管理员reducer得到新的state
        state = reducer(state, action);
        //执行所有的监听函数
        listeners.forEach((l) => l())
    }
    //订阅状态变化事件，当状态改变发生之后执行监听函数
    let subscribe = (listener) => {
   
        listeners.push(listener);
    }
    dispath();
    return {
   
        getState,
        dispath,
        subscribe
    }
}
let combineReducers=(renducers)