redux中间件中间件提供第三方插件方式，自定义拦截action->reducer的流程。变成action->middlewares->reducer。这个机制可以让我们改变数据流向，实现异步action、action过滤、日志输出、异常上报等功能redux-logger：提供日志输出redux-thunk：处理异步操作value是promise对componentWillReceiveProps的理解.当props改变时执行此方法，但不会在渲染器初始化时执行。在这个回调函数中，你可以根据属性的变化调用this.setState()来更新你的组件状态。Old的属性仍然可以通过this.props获取。在这里调用更新状态是安全的，不会触发额外的渲染调用。好处：在这个生命周期中，可以在子组件的render函数执行之前获取到新的props，从而更新子组件自身的状态。数据请求可以放在这里执行，传递的参数从componentWillReceiveProps(nextProps)中获取。而不是把所有的请求都放在父组件中。那么只有在组件渲染时才会发送请求，从而减轻请求负担。componentWillReceiveProps不会在render初始化时执行，当Component接收到新的状态（Props）时会被触发，一般用于父组件状态更新时子组件的重新渲染。引入虚拟DOM比直接操作原生DOM效率更高。为什么虚拟DOM不一定比原生DOM更高效？如果只修改一个按钮的文本，虚拟DOM的操作无论如何是不可能比真实DOM操作更快的。第一次渲染大量DOM时，由于多了一层虚拟DOM的计算，虚拟DOM的插入速度也会比innerHTML慢。可以保证性能的下限，在真正的DOM操作中进行针对性优化时还是比较快的。因此，需要根据具体场景进行讨论。在整个DOM操作的演进过程中，主要矛盾不在性能上，而是开发者写得好不好，研发经验/研发效率上。VirtualDOM无非是前端开发者为了追求更好的研发体验和研发效率而打造的高级产品。VirtualDOM并不一定能带来更好的性能，React官方也从未在性能层面将virtualDOM作为卖点输出。**虚拟DOM的优势在于可以提供更酷更高效的研发模型（即函数式UI编程方式），同时还能保持良好的性能。store的理解Store是将它们联系在一起的对象。Store有以下职责：维护应用程序的状态；提供getState()方法获取状态；提供dispatch(action)方法来更新状态；通过subscribe(listener)注册监听器；通过subscribe(listener)返回的函数取消监听组件，将父组件的值传给子组件。使用label属性的=形式在父组件中传递值。在子组件中使用props获取值。子组件将值传递给父组件。在组件中传递一个函数。在子组件中使用props获取传入的函数，然后执行该函数。在执行函数时，将要传递的值作为函数的实参，在兄弟组件之间传递值。使用父组件先通过【子组件】传递数据===》【父组件】】然后通过【父组件】订阅数据===〉【子组件】消息订阅使用PubSubJs插件React性能优化shouldComponentUpdatepureComponent自带浅比较优化shouldComponentUpdate结合Immutable.js实现最优setstate函数第二个参数有什么作用第二个参数是一个函数，调用setState函数，组件启动时会调用重新渲染，可以使用这个函数来监控渲染是否完成。渲染列表时，key是什么?设置key的目的是什么Keys会帮助React识别哪些item发生了改变，被添加或被移除。应将键分配给数组中的元素，以便为(DOM)元素提供稳定的标识。选择键的最佳方法是使用唯一标识列表项的字符串。很多时候您会使用数据中的ID作为键。当渲染的item没有稳定的id时，可以使用itemindex作为渲染item的key，但不推荐这种方式。如果项目可以重新排序，它会导致重新渲染更慢。refs在React中的作用是什么？有哪些应用场景？Refs提供了一种访问在render方法中创建的React元素或DOM节点的方法。应谨慎使用Refs。Refs更适合以下场景：处理焦点、文本选择或媒体控制以触发必要的动画。集成第三方DOM库Refs是使用React.createRef()方法创建的，它通过ref属性附加到React元素上。要在整个组件中使用Refs，您需要在构造函数中将ref分配给它的实例属性：{return}}因为函数式组件没有实例，你不能直接在函数式组件上使用refs：functionMyFunctionalComponent(){return;}classParentextendsReact.Component{构造函数（道具）{超级（道具）；this.textInput=React.createRef();}render(){//这行不通！返回();但它可以在闭包Refs的帮助下在函数组件内部使用：functionCustomTextInput(props){//textInput必须在这里声明，以便ref回调可以引用它itlettextInput=null;函数handleClick(){textInput.focus();}return(

);注意：Refsref不能过度使用返回值取决于节点的类型：当ref属性被用在一个普通的HTML元素上时，React.createRef()会接收底层的DOM元素作为它的当前属性来创建一个ref当ref属性用于自定义类组件时，ref对象将接收组件的已安装实例作为其当前实例。当父组件需要访问子组件中的refs时，可以使用传递Refs或回调Refs。refs在React中的作用是什么？Refs是React为我们提供对DOM元素或组件实例的安全访问的句柄。您可以为元素添加一个ref属性，然后在回调函数中接受DOM树中元素的句柄。该值将作为回调函数的第一个参数返回react-router4的核心路由，组件分散到各个页面。不需要配置比如哪些方法会触发React重新渲染？render又做了什么？(1)哪些方法会触发react重新渲染？setState()方法被调用。setState是React中最常用的命令。通常，执行setState会触发render。但这里有一点值得关注。执行setState时，不一定会重新渲染。当setState传null时，render不会被触发。类App扩展了React。组件{state={a:1};渲染（）{控制台。日志（“渲染”）；return(

{this.state.a}

{this.setState({a:1});//这里不改变值ofa}}>Clickmethis.setState(null)}>setStatenull);}}父组件重新渲染只要父组件重新渲染，即使传入子组件的props没有改变，那么子组件也会重新渲染，然后触发render(2)会怎样重新渲染渲染呢？它会比较新旧VNodes，也就是我们所说的Diff算法。对新老树进行一次深度优先遍历，这样每个节点都会有一个标记。深度遍历时，每遍历一个结点，将该结点与新的结点树进行比较。如果有差异，则将其放入一个对象中，遍历差异对象，根据差异类型更新VNodeReact处理render，并根据相应的规则更新VNodeReact处理render。基本的思维模式是每次有变化就重新渲染整个应用。在VirtualDOM出现之前，最简单的方式就是直接调用innerHTML。VirtualDOM的伟大之处不在于它比直接操作DOM更快，而在于无论数据如何变化，它都会尝试以最小的代价更新DOM。React将渲染函数返回的虚拟DOM树与旧树进行比较，以确定是否以及如何更新DOM。当DOM树很大时，遍历两棵树进行各种比较是相当耗费性能的，尤其是顶层setState的一个小变化，默认会遍历整棵树。尽管React使用了高度优化的Diff算法，但这个过程仍然会消耗性能。在React中使用构造函数和getInitialState有什么区别？constructor和getInitialState的区别就是ES6和ES5本身的区别。使用ES6类时，应在构造函数中初始化状态，并在使用React.createClass时定义getInitialState方法。类MyComponent扩展React.Component{constructor(props){super(props);this.state={/*初始状态*/};}}等同于：varMyComponent=React.createClass({getInitialState(){return{/*初始状态*/};},});react-router中的标签和标签有什么区别与相比，Link组件避免了不必要的重新渲染哪个生命周期发送ajaxcomponentWillMount在新版本的react中已经被废弃。做ssr项目时，componentWillMount需要获取服务端数据，不能被占用。因此，在componentDidMount中请求react性能优化方案重写shouldComponentUpdate，避免不必要的dom操作。使用生产版本的react.js使用keys帮助React识别列表中所有子组件的最小变化React中的事件处理逻辑概述平滑浏览器差异并实现更好的跨平台。为了避免垃圾回收，React引入了事件池，在事件池中获取或释放事件对象，避免频繁创建和销毁。促进统一的事件管理和交易机制。为了解决跨浏览器的兼容性问题，React会将浏览器原生事件（BrowserNativeEvent）封装为一个合成事件（SyntheticEvent），传入设置好的事件处理器中。这里的合成事件提供了与原生事件相同的接口，但是屏蔽了底层浏览器差异的细节，保证了行为的一致性。还有一点比较有意思的是，React并没有直接给子元素附加事件，而是将所有的事件以单个事件监听器的形式发送到顶层进行处理。这样，React在更新DOM时就不需要考虑如何处理附加在DOM上的事件监听器，最终达到优化性能的目的。为什么要使用React。孩子们。map(props.children,()=>)而不是props.children.map(()=>)？因为不能保证props.children会是一个数组。以下面的代码为例。

Thereareclassfront-endnetwork

在父组件内部，如果尝试使用props.children.map映射子对象，会抛出错误，因为props.children是一个对象，而不是数组。如果有多个孩子，React会将props.children变成一个如下所示的数组。

优客前端网

前端技术学习平台

;//不建议使用下面的方法，会报错在这种情况下抛出。classParentextendsComponent{render(){return

{this.props.children.map((obj)=>obj)}

;}}推荐使用下面的方法，避免抛出前面case的错误。classParentextendsComponent{render(){return

{React.Children.map(this.props.children,(obj)=>obj)}

;}}什么是React高阶组件，和普通组件有什么区别，适用于哪些场景？官方解释：高阶组件（HOC）是React中复用组件逻辑的一种高级技术。HOC本身并不是ReactAPI的一部分，它是一种基于React的组合特性的设计模式。高阶组件(HOC)是一个接受组件作为参数并返回新组件的函数。它只是一种组件设计模式，它是由React本身的组合特性必然产生的。我们称它们为纯组件，因为它们接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。//hoc函数的定义withSubscription(WrappedComponent,selectData){returnclassextendsReact.Component{constructor(props){super(props);this.state={data:selectData(DataSource,props)};}//一些常见的逻辑处理render(){//...并用新数据渲染包装的组件！返回;}};//使用constBlogPostWithSubscription=withSubscription(BlogPost,(DataSource,props)=>DataSource.getBlogPost(props.id));1）HOC的优缺点优点：逻辑走，不影响被包裹组件的内部逻辑。缺点：hoc传递给被包裹组件的props容易与被包裹组件重名，进而被覆盖2）适用场景代码复用，逻辑抽象渲染劫持状态抽象，改变Props3）具体应用实例权限控制:使用高级组件的条件渲染特性可以控制页面的权限。权限控制一般分为页面级别和页面元素级别两个维度getCurrentUserRole();this.setState({isAdmin:currentRole==='Admin',});}render(){if(this.state.isAdmin){return;}else{return(

您没有权限查看此页面，请联系管理员！

);}}};}//pages/page-a.jsclassPageAextendsReact.Component{constructor(props){super(props);//这里有些东西...}UNSAFE_componentWillMount(){//获取数据}render(){//渲染页面with数据}}exportdefaultwithAdminAuth(PageA);//pages/page-b.jsclassPageBextendsReact.Component{constructor(props){super(props);//这里有些东西...}UNSAFE_componentWillMount(){//获取数据}render(){//使用数据渲染页面}}exportdefaultwithAdminAuth(PageB);组件渲染性能跟踪：借助父组件子组件生命周期规则捕捉子组件的生命周期，方便记录组件的渲染时间：classHomeextendsReact.Component{render(){return(

HelloWorld.

);}}functionwithTiming(WrappedComponent){returnclassextendsWrappedComponent{constructor(props){super(props);这个。开始=0；这个。结束=0；}UNSAFE_componentWillMount(){super.componentWillMount&&super.componentWillMount();this.start=Date.now();}componentDidMount(){super.componentDidMount&&super.componentDidMount();this.end=Date.now();console.log(`${WrappedComponent.name}组件渲染时间为${this.end-this.start}ms`);}render(){返回super.render();}};}导出默认withTiming(Home);注：withTiming是一个使用反向继承实现的高阶组件，其作用是计算被包裹组件（这里是Home组件）的渲染时间页面复用constwithFetching=fetching=>WrappedComponent=>{returnclassextendsReact.Component{state={data:[],}asyncUNSAFE_componentWillMount(){constdata=awaitfetching();this.setState({数据,});}render(){return;}}}//pages/page-a.jsexportdefaultwithFetching(fetching('science-fiction'))(MovieList);//pages/page-b.jsexportdefaultwithFetching(fetching('action'))(MovieList);//pages/page-other.jsexportdefaultwithFetching(fetching('some-other-type'))(MovieList);