Redux实现原理分析为什么要用redux在React中，数据在组件中单向流动，数据从父组件到子组件单向流动（通过props），所以两个非父子组件之间的通信比较麻烦。redux的出现就是为了解决状态下的数据问题。Redux设计理念Redux是将整个应用的状态存储在一个叫做store的地方，store存储了一个statetreestoretree。组件可以向store调度（dispatch）行为（action），而不是直接通知其他组件，组件内部通过订阅状态state在store里面刷新自己的视图，而这个状态树，只存在于唯一的store保持只读状态。状态是只读的。改变状态的唯一方法是触发一个动作。动作是用来描述发生时间的常用对象。数据更改只能通过纯函数来执行使用纯函数来执行修改。为了描述动作如何改变状态，你需要写reducersRedux源代码letcreateStore=(reducer)=>{letstate;//获取状态对象//存放所有的监听函数letlisteners=[];让getState=()=>状态；//提供外部调用dispatchactions的方法letdispath=(action)=>{//调用管理员reducer获取新状态state=reducer(state,action);//执行所有监听函数listeners.forEach((l)=>l())}//订阅状态变化事件，当状态发生变化时执行监听函数letsubscribe=(listener)=>{listeners.push(listener);}dispath();return{getState,dispath,订阅}}letcombineReducers=(renducers)=>{//传入一个reducers管理组，返回一个reducer返回函数(state={},action={}){letnewState={};for(reducers中的varattr){newState[attr]=renducers[attr](state[attr],action)}returnnewState;}}出口{createStore，combineReducers};Redux中使用Action需要注意哪些问题？在Redux中使用Action时，尽量保持Action文件的纯净，传入什么数据就返回什么。最好将请求的数据与Action方法分开，以保持Action的纯净。如何使用React(build)生产模式构建？通常，使用Webpack的DefinePlugin方法将NODEENV设置为生产环境。这将去除propType验证和额外的警告。除此之外，还可以减少代码，因为React使用了Uglify的死代码来消除开发代码和注释，这将大大减少包的占用空间。如何告诉React它应该为生产编译通常我们使用Webpack的DefinePlugin方法将NODE_ENV变量值设置为生产。在编译版本中，React会忽略propType验证等警告信息，同时也会减少代码库的大小。React使用Uglify插件去除生产环境中不需要的注释等信息。什么是状态？当组件初始化时传递这个.state为组件设置一个初始状态。第一次渲染时，状态将用于渲染组件。使用this.setState方法更新状态。什么是反应钩子？Hooks是React16.8中的新增功能。它们允许在不编写类的情况下使用状态和其他React特性。使用Hooks，可以从组件中提取有状态逻辑，以便可以独立测试和重用。Hooks允许我们在不更改组件层次结构的情况下重用有状态逻辑，从而可以轻松地在许多组件之间或与社区共享Hooks。参考前端高级面试题详解React中elements和components有什么区别？简单地说，React中的元素（虚拟DOM）描述了你在屏幕上看到的DOM元素。换句话说，React中的元素是页面中DOM元素的对象表示。React中的组件是接受输入并返回元素的函数或类。注意：在工作中，为了提高开发效率，通常使用JSX语法来表示React元素（虚拟DOM）。在编译时，将其转换为React.createElement调用方法。ReactNative中adbdevices找不到连接的设备怎么解决？使用Genymotion时，首先需要在SDK的platform-tools中添加环境变量，然后在Genymotion中点击Setting，选择ADB标签，点击UsecustomAndroidSDKtools，浏览本地SDK所在位置，点击OK按钮。好的。启动虚拟机后，在cmd中输入adbdevices查看设备。shouldComponentUpdate的作用shouldComponentUpdate可以让我们手动判断是否更新组件。根据组件的应用场景设置合理的函数返回值，可以帮助我们避免不必要的更新。refs在React中的作用是什么？refs是React提供给我们的安全访问DOM元素或者组件实例的句柄，可以给元素加上ref属性，然后在回调函数中接受DOM树中元素的句柄，取值为作为回调函数的第一个参数返回。react-router4的核心路由变成组件分布到各个页面，不需要配置，比如调用setState后会发生什么代码中调用setState函数后，React会合并传入的参数与之前的状态，然后触发所谓的对帐过程（Reconciliation）。在协调过程之后，React将以一种相对高效的方式根据新的状态构建React元素树，并开始重新渲染整个UI界面。React拿到元素树后，React会计算新旧树的差异，然后根据差异最小化并重新渲染界面。通过diff算法，React可以准确地指导哪些位置发生了变化以及应该如何变化，从而确保按需更新而不是完全重新渲染。setState时，React会为当前节点创建一个updateQueue的更新队列。然后将触发对帐过程。在此过程中，将使用一种称为Fiber的调度算法开始生成新的Fiber树。Fiber算法最大的特点就是可以异步、可中断地执行。然后ReactScheduler会根据优先级优先执行优先级高的节点，具体执行doWork方法。在doWork方法中，React会执行updateQueue中的方法获取新的节点。然后比较新旧节点，并用更新、插入和替换标记旧节点。当前节点的doWork完成后，会执行performUnitOfWork方法获取新的节点，然后重复上述过程。当所有节点都完成doWork后，会触发commitRoot方法，React进入commit阶段。在commit阶段，React会为每个节点根据之前的Tag一次性更新整个dom元素。React中的严格模式是什么？？React的StrictMode是一个辅助组件，可以帮助我们写出更好的React组件。可以使用包裹一组组件，可以帮助我们检查以下内容：验证内部组件是否遵循某些推荐的做法，如果不遵循，则会在控制台中给出警告。验证是否使用了已弃用的方法，如果是，将在控制台中给出警告。通过识别潜在风险来防止一些副作用。什么是Redux中间件？它接受多少个参数？柯里化函数两端的参数是什么？Redux的中间件提供了在action发起之后和reducer之前的扩展点。也就是说，原来的view->action->reducer->store的数据流，加入了中间件，变成view->action->middleware->reducer->store这个环节，可以做一些“边effect”操作，比如异步请求，打印日志等。applyMiddleware源码：exportdefaultfunctionapplyMiddleware(...middlewares){returncreateStore=>(...args)=>{//使用传入的createStore和reducer创建storeconststore=createStore(...args)letdispatch=()=>{thrownewError()}constmiddlewareAPI={getState:store.getState,dispatch:(...args)=>dispatch(...args)}//让每个中间件携带middlewareAPI参数执行一次constchain=middlewares.map(middleware=>middleware(middlewareAPI))//然后compose将链中的所有匿名函数组装成一个新的函数，即newdispatchdispatch=compose(...chain)(store.dispatch)return{...store,dispatch}}}从applyMiddleware可以看出redux中间件接受一个对象作为参数，而对象的参数上有两个字段dispatch和getState，分别代表两个函数和在Redux商店中使用相同的名称。curried函数的两端之一是middewares，另一端是store.dispatch。什么情况下使用异步组件来提高页面加载速度，使用reloadable将每个页面单独打包。按需加载类组件和函数组件有什么区别？类组件可以使用附加功能，例如状态和生命周期挂钩。当组件只接收props渲染到页面时，它是无状态组件，属于功能组件，也称为哑组件或展示组件。当然，函数组件和类组件是有区别的，函数组件的性能要高于类组件，因为类组件在使用的时候需要实例化，而函数组件可以直接执行函数并返回结果。为了提高性能，尽量使用函数组件。区别在于功能组件有没有这个。它有生命周期吗？它有状态吗？它有状态吗？React-Router有几种模式？React-Router支持使用hash（对应HashRouter）和browser（对应BrowserRouter）两种路由规则。react-router-dom提供了BrowserRouter和HashRouter两个组件来实现应用UI和URL同步：BrowserRouter创建的URL格式：xxx.com/pathHashRouter创建的URL格式：xxx.com/#/path（1）BrowserRouter使用历史HTML5提供的API（pushState、replaceState和popstate事件）使UI和URL保持同步。由此可见，BrowserRouter使用了HTML5的historyAPI来控制路由跳转：属性如下:basename所有路由的基本URL。basename的正确格式是前面有一个前导斜杠，但没有尾随斜杠；等同于forceRefresh如果为true，导航时会刷新整个页面.一般情况下，该功能仅在不支持HTML5historyAPI的浏览器中使用；getUserConfirmation是用来确认导航的函数，默认使用window.confirm。例如，从/a导航到/b时，会弹出提示，使用默认的确认功能，用户点击确定后导航，否则什么都不做；//这是默认的确认函数constgetConfirmation=(message,callback)=>{constallowTransition=window.confirm(message);callback(allowTransition);需要和一起使用。KeyLength用于设置Location.Key的长度。(2)HashRouter使用URL的哈希部分（即window.location.hash）来保持UI和URL的同步。从这里可以看出，HashRouter是通过URL的hash属性来控制路由跳转的：与BrowserRouter功能相同；hashTypewindow.location.hash使用以下类型的哈希：斜杠-后跟斜杠，例如#/和#/sunshine/lollipops；noslash-没有斜杠，例如#和#sunshine/lollipops；hashbang-Google风格的ajax可抓取，如#!/和#!/sunshine/lollipops.Redux中间件如何获取store和action？那怎么处理呢？redux中间件的本质是函数柯里化。在reduxapplyMiddlewareApi源码中，每个中间件接受2个参数，Store的getState函数和dispatch函数，分别获取store和action，最后返回一个函数。该函数将传递给下一个中间件的next的dispatch方法，并返回一个接收action的新函数。这个函数可以直接调用next(action)，也可以在其他需要的时候调用，甚至根本不调用。调用链中的最后一个中间件将接受真实商店的dispatch方法作为下一个参数，从而结束调用链。所以，中间件的函数签名是({getState,dispatch})=>next=>action。根据下面定义的代码，您能找出存在的两个问题吗？请看下面的代码：答：1.构造函数中没有传递给super的props，它应该包括以下行constructor(props){super(props);//...}2.事件监听器（通过addEventListener()分配时作用域不正确，因为ES6不提供自动绑定。因此，开发人员可以在构造函数中重新分配clickHandler以包含正确的绑定：bind(this);//...}react生命周期初始化阶段：getDefaultProps：获取实例的默认属性getInitialState：获取各个实例的初始化状态componentWillMount：组件即将加载并渲染到页面render:组件在这里生成一个虚拟DOM节点componentDidMount:组件加载后实际运行中状态:componentWillReceiveProps:当组件即将接收属性时调用shouldComponentUpdate:当组件接收到新属性或新状态（可返回false，接收数据后不更新，阻止render调用，后续函数不会执行）componentWillUpdate：组件即将更新，不能修改属性和状态componentDidUpdate:组件已经更新销毁阶段:componentWillUnmount:组件即将被销毁shouldComponentUpdate是做什么的？（哪个周期函数是react性能优化？）shouldComponentUpdate这个方法用来判断是否需要调用render方法重绘dom。因为dom的渲染是非常耗性能的，如果我们能在shouldComponentUpdate方法中写一个更优化的domdiff算法，性能可以有很大的提升。在react17中，将删除以下三个生命周期：componentWillMount、componentWillReceiveProps、componentWillUpdate
