一、react 生命周期函数
-
初始化阶段:
- getDefaultProps:获取实例的默认属性
- getInitialState:获取每个实例的初始化状态
- componentWillMount:组件即将被装载、渲染到页面上
- render:组件在这里生成虚拟的 DOM 节点
- componentDidMount:组件真正在被装载之后
-
运行中状态:
- componentWillReceiveProps:组件将要接收到属性的时候调用
- shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
- componentWillUpdate:组件即将更新不能修改属性和状态
- render:组件重新描绘
- componentDidUpdate:组件已经更新
-
销毁阶段:
- componentWillUnmount:组件即将销毁
-
错误信息阶段:
- componentDidCatch:组件错误信息之后
二、react 性能优化是哪个周期函数?
shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。
三、(组件的)状态(state)和属性(props)之间有何不同
- State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
- Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。
四、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。
五、React 中 key 的重要性是什么?
key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。
六、setState第二个参数的作用
因为setState是一个异步的过程,所以说执行完setState之后不能立刻更改state里面的值。如果需要对state数据更改监听,setState提供第二个参数,就是用来监听state里面数据的更改,当数据更改完成,调用回调函数。
七、运行阶段生命周期调用顺序
componentWillReceiveProps–>shouldComponentUpdate --> componentWillupdate --> componentDidUpdate
八、react中如何修改state中的数据?this.setState是同步的还是异步的?this.setState中的第二个参数的作用是什么?为什么是异步的?
- 通过this.setState来修改state中的数据;
- this.setState是异步的;
- 为什么是异步的,一位state可以批量执行,也就是说当多个setState一起同时执行时会被合并,提高DOM的渲染效率;
- this.setState什么时候是同步的?原生js绑定的事件,setTimeout/setInterval等,(就是不受react机制控制时)
- this.setState本身其实是一个同步的,异步不是因为本身的运行机制或者代码,而是因为他所在的合成事件和钩子函数的调用顺序在更新之前,导致函数内没法立即拿到更新后的值,形成了所谓的异步,可以通过第二个参数中的callback拿到更新后的结果;
九、react性能优化的方案
(1)重写shouldComponentUpdate来避免不必要的dom操作。
(2)使用 production 版本的react.js。
(3)使用key来帮助React识别列表中所有子组件的最小变化。
十、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对象中管理的。
十一、sass和less的区别
1、定义变量的符号不同,less是用@,sass使用$
2、变量的作用域不同,less在全局定义,就作用在全局,在代码块中定义,就作用于整哥代码块。而sass只作用域全局。
3、编译环境不同,less在开发者环境编译,sass在服务器环境下编译
十二、react中组件传值
- 父组件向子组件通信: props
- 子组件向父组件通信: 回调函数/自定义事件
- 跨级组件通信: 层层组件传递props/context
- 没有嵌套关系组件之间的通信: 自定义事件
在进行组件通信的时候,主要看业务的具体需求,选择最合适的;当业务逻辑复杂到一定程度,就可以考虑引入Mobx,Redux等状态管理工具
十三、Es6中箭头函数与普通函数的区别?
1.普通function的声明在变量提升中是最高的,箭头函数没有函数提升
2.箭头函数没有this,arguments
3.箭头函数不能作为构造函数,不能被new,没有property,
4.call和apply方法只有参数,没有作用域
十四、react中路由传递参数的方法有哪些?
- 动态路由:
路由跳转时:路径+key形式;
接收:this.props.match.params;
- query传值:
定义路由时:与正常时相同;
路由跳转时:使用字符串拼接;
接收:this.props.location.search
- 对象传值:
定义路由时:与正常时相同;
路由跳转时:使用对象,内部包含定义路径的对象和传递参数的对象;
接收:this.props.history.query
- 编程式导航:
this.props.history.push({路径部分},{参数部分})
注意:使用对象传值以及编程式导航传值时如果页面刷新,那么传递的值就会消失;
十五、Redux实现原理解析
Redux
是将整个应用状态存储到一个地方上称为store
,里面保存着一个状态树store tree
,组件可以派发(dispatch
)行为(action
)给store
,而不是直接通知其他组件,组件内部通过订阅store
中的状态state
来刷新自己的视图
十六 、React实现的移动应用中,如果出现卡顿,有哪些可以考虑的优化方案
- 增加
shouldComponentUpdate
钩子对新旧props
进行比较,如果值相同则阻止更新,避免不必要的渲染,或者使用PureReactComponent
替代Component
,其内部已经封装了shouldComponentUpdate
的浅比较逻辑 - 对于列表或其他结构相同的节点,为其中的每一项增加唯一
key
属性,以方便React
的diff
算法中对该节点的复用,减少节点的创建和删除操作 render
函数中减少类似onClick={() => {doSomething()}}
的写法,每次调用render函数时均会创建一个新的函数,即使内容没有发生任何变化,也会导致节点没必要的重渲染,建议将函数保存在组件的成员对象中,这样只会创建一次- 组件的
props
如果需要经过一系列运算后才能拿到最终结果,则可以考虑使用reselect
库对结果进行缓存,如果props值未发生变化,则结果直接从缓存中拿,避免高昂的运算代价 webpack-bundle-analyzer
分析当前页面的依赖包,是否存在不合理性,如果存在,找到优化点并进行优化
十七、HOC(高阶组件)
简述:
- 高阶组件不是组件,是 增强函数,可以输入一个元组件,返回出一个新的增强组件;
- 高阶组件的主要作用是 代码复用,操作 状态和参数;
用法:
- 属性代理 (Props Proxy): 返回出一个组件,它基于被包裹组件进行 功能增强;
- 默认参数: 可以为组件包裹一层默认参数;
- 提取状态: 可以通过 props 将被包裹组件中的 state 依赖外层,例如用于转换受控组件:
应用场景:
权限控制,通过抽象逻辑,统一对页面进行权限判断,按不同的条件进行页面渲染: