zoukankan      html  css  js  c++  java
  • react 核心技术点

    1、react生命周期
    react生命周期分为初始化阶段、运行阶段、销毁阶段。
    (1) 初始化阶段:
    componentWillMount:实例挂载之前
    Render:渲染组件
    componentDidMount:实例挂载完成。一般在这个函数中与后台进行初始化数据交互。
     
    (2)运行阶段:
    componentWillReceiveProps:父组件改变时调用。注意只要父组件此方法触发,那么子组件也会触发,也就是说父组件更新,子组件也会跟着更新。
     
    state 发生改变时更新
    sholudComponentUpdate:
    主要是用来手动阻止组件渲染,一般在这个函数中做组件的性能优化。
    方法在接收了新的props或state后触发,你可以通过返回true或false来控制后面的生命周期流程是否触发。
    方法在setState后state发生改变后触发,你可以通过返回true或false来控制后面的生命周期流程是否触发。
     
     
    componentWillUpdate:组件数据更新前调用 在state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。
     
    render
    componentDidUpdate:组件数据更新完成时调用
     
    (3)销毁阶段:
    componentUnmount:销毁阶段。一般用来销毁不用的变量或者是解除无用定时器以及解绑无用事件。防止内存泄漏问题。
     
     
    2、运行阶段生命周期调用顺序
    componentWillReceiveProps–>shouldComponentUpdate --> componentWillupdate --> componentDidUpdate
     
    使用redux时候情况
    在使用redux做状态管理时候,基本不需要透过生命周期去做setState这样的状态管理了,基本都是用props来传递来重新渲染,需要注意的仅仅是在哪个生命周期时候触发action,比如需要进行ajax请求时候一般都是在componentDidMount和componentWillReceiveProps时候进行,在reducer中处理完,然后在通过props传入组件执行组件的更新周期。
     
     
     
    3、react中key的作用
    key是React中用于追踪哪些列表中元素被修改、删除或者被添加的辅助标识。在diff算法中,key用来判断该元素节点是被移动过来的还是新创建的元素,减少不必要的元素重复渲染。
     
    4、setState第二个参数的作用
    因为setState是一个异步的过程,所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听,setState提供第二个参数,就是用来监听state里面数据的更改,当数据更改完成,调用回调函数。
     
    5、sass和less的区别
    定义变量的符号不同,less是用@,sass使用$
    变量的作用域不同,less在全局定义,就作用在全局,在代码块中定义,就作用于整哥代码块。而sass只作用域全局。
    编译环境不同,less在开发者环境编译,sass在服务器环境下编译。
     
    6、vue和react的区别
    1、react严格上针对的是mvc模式的view层,vue则是mvvm模式。
    2、操作dom的方式不同,vue使用的是指令操作dom,react是通过js进行操作。
    3、数据绑定不同,vue实现的是双向绑定,react的数据流动是单向的。
    4、react中state是不能直接改变的,需要使用setState改变。vue中的state不是必须的,数据主要是由data属性在vue对象中管理的。
     
    7、react中的高阶函数
    高阶函数就是一个纯js且没有副作用的函数。
    高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。
     
    8、react生命周期中,最适合与服务端进行数据交互的是哪个函数
    componentDidMount:在这个阶段,实例和dom已经挂载完成,可以进行相关的dom操作。
     
    9、react中组件传值
    父传子(组件嵌套浅):父组件定义一个属性,子组件通过this.props接收。
    子传父:父组件定义一个属性,并将一个回调函数赋值给定义的属性,然后子组件进行调用传过来的函数,并将参数传进去,在父组件的回调函数中即可获得子组件传过来的值。
     
    10、react性能优化阶段函数是哪一个?
    shouldComponentUpdate
     
    11、react性能优化的方案
    (1)重写shouldComponentUpdate来避免不必要的dom操作。
    (2)使用 production 版本的react.js。
    (3)使用key来帮助React识别列表中所有子组件的最小变化。
     
     
    12、介绍一下webpack
    webpack是一个前端模块化打包工具,主要由入口,出口,loader,plugins四个部分。前端的打包工具还有一个gulp,不过gulp侧重于前端开发的过程,而webpack侧重于模块,例如他会将css文件看作一个模块,通过css-loader将css打包成符合css的静态资源。
     
     
    13、Es6中箭头函数与普通函数的区别?
    1.普通function的声明在变量提升中是最高的,箭头函数没有函数提升
    2.箭头函数没有this,arguments
    3.箭头函数不能作为构造函数,不能被new,没有property,
    4.call和apply方法只有参数,没有作用域
     
    14、什么是闭包?闭包有什么危害?如何解决闭包带来的危害?
    简单来说,闭包就是一个定义在函数内部的函数。因为js中存在作用域的问题,所以在函数内部定义的变量在函数外部是没有办法直接获取到。而闭包就是沟通函数内部和外部的桥梁,这样在函数外部接可以得到函数内部的值。并且闭包可以实现函数属性和方法的私有化。
    闭包的危害:
    因为闭包会将内部变量储存在内存中,如果长时间不清除的话会造成内存泄漏的问题,影响程序的性能。
    解决方法:对于不使用的变量及时的清除。
     
  • 相关阅读:
    UVA12125 March of the Penguins (最大流+拆点)
    UVA 1317 Concert Hall Scheduling(最小费用最大流)
    UVA10249 The Grand Dinner(最大流)
    UVA1349 Optimal Bus Route Design(KM最佳完美匹配)
    UVA1212 Duopoly(最大流最小割)
    UVA1395 Slim Span(kruskal)
    UVA1045 The Great Wall Game(二分图最佳匹配)
    UVA12168 Cat vs. Dog( 二分图最大独立集)
    hdu3488Tour(KM最佳完美匹配)
    UVA1345 Jamie's Contact Groups(最大流+二分)
  • 原文地址:https://www.cnblogs.com/iOS-mt/p/11088869.html
Copyright © 2011-2022 走看看