初级
- React是哪个公司贡献的开源软件
当然是facebook啦
- state 和 props 有什么区别
state
是自身的状态修改会导致组件重新渲染,只能再constructor中初始化
,用于保存控制和修改自己
的状态.
props
是外部传进来的参数,一般用于父传子,不可变
,不会主动渲染
- 什么是JSX
JSX是JavaScript一种扩展语法,就是把
HTML 模板直接嵌入到 JS 代码
里面,一般需要用bebel等编译器编译
,通过编译后会生成js对象,然后才能用.
中等
- 什么场景适合用class声明组件/function声明组件
无状态
stateless和无需生命周期
的时候,用function
有状态
或者需要生命周期
或者数据结构复杂
的情况下就用class
- 什么是shouldComponentUpdate函数,有什么作用
生命周期中的
shouldComponentUpdate函数
是重渲染时render()函数调用前
被调用的函数,它接受两个参数:nextProps和nextState,分别表示下一个props和下一个state的值。并且,当函数返回false
时候,阻止接下来的render()函数的调用,阻止组件重渲染
,而返回true
时,组件照常重渲染
。
- 当setState被调用之后会发生什么,简单描述一下
当setState被调用之后会发生什么,会导致
重新渲染
,无论state的值有没有变化
,然后一系列的函数调用,shouldComponentUpdate也是这个时候调用
- 为什么利用循环产生的组件要用key
确保key的
唯一
性,利于遍历
的优化;对渲染性能
的提升(react中渲染dom是通过render方式,也就是通过虚拟的dom与真实dom比较之后发现哪不一样,再进行渲染,这样的渲染对于性能的提升很有帮助).
高阶
1.setState接收函数做为参数的作用是什么
setState接收函数作为
回调函数
,会在setState
操作结束后,也就是组件被渲染完成后
调用的.
2.什么是Fiber,解决了什么问题
解决掉帧问题
1.Fiber重写reconciliation算法(reconciliation 算法,是 React 用来比较两棵 DOM 树差异、从而判断哪一部分应当被更新的算法),支持异步渲染
2.优先级执行顺序
管理,React 计算了 DOM 树的一部分,之后将暂停渲染
,来看看主线程是否有任何的绘图或者更新需要去完成,当所有高优先级任务执行完之后,react通过callback
回到之前渲染到一半的组件,继续渲染。
3.两个组件,不是父子关系,如何实现组件间的通信,请描述尽量多的方法,说下各自的优缺点
父 → 子
:parent组件传给child组件,符合react的单向数据流理念,自上到下传递props
。子 → 父
:child 组件通知 parent 组件, 主要是依靠 parent 传下来的callback
函数执行,改变 parent 组件的状态,或者把 child 自己的state
通知 parent无关联组件
:有时候可能出现页面中的某两部分通信,比如省市的级联选择,点击 button 改变颜色等等,组件并不是父子级,没有嵌套关系的时候。这种时候通常是依赖共有的顶级 Container
处理或者利用Context
,或者第三方的状态管理器
Redux 或者 Mobx发布订阅/观察者模式
:一个地方发送消息,另一个地方接收做出变化的需求,就是观察者模式了。具体的实现会有很多种,可以参考 node 中的 EventEmitter 类。
4.讲解一下React生命周期
组件的生命周期可分成
三个状态
:
Mounting
:已插入真实 DOMUpdating
:正在被重新渲染Unmounting
:已移出真实 DOM
生命周期的方法有:
componentWillMount
在渲染前调用,在客户端也在服务端。componentDidMount
: 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。shouldComponentUpdate
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用。componentWillUnmount
在组件从 DOM 中移除之前立刻被调用。