React Self-Interview之常规知识点整理

初级

  1. React是哪个公司贡献的开源软件

当然是facebook啦

  1. state 和 props 有什么区别

state是自身的状态修改会导致组件重新渲染,只能再constructor中初始化,用于保存控制和修改自己的状态.
props是外部传进来的参数,一般用于父传子,不可变,不会主动渲染

  1. 什么是JSX

JSX是JavaScript一种扩展语法,就是把 HTML 模板直接嵌入到 JS 代码里面,一般需要用bebel等编译器编译,通过编译后会生成js对象,然后才能用.

中等

  1. 什么场景适合用class声明组件/function声明组件

无状态stateless和无需生命周期的时候,用function
有状态或者需要生命周期或者数据结构复杂的情况下就用class

  1. 什么是shouldComponentUpdate函数,有什么作用

生命周期中的shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数,它接受两个参数:nextProps和nextState,分别表示下一个props和下一个state的值。并且,当函数返回false时候,阻止接下来的render()函数的调用,阻止组件重渲染,而返回true时,组件照常重渲染

  1. 当setState被调用之后会发生什么,简单描述一下

当setState被调用之后会发生什么,会导致重新渲染,无论state的值有没有变化,然后一系列的函数调用,shouldComponentUpdate也是这个时候调用

  1. 为什么利用循环产生的组件要用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生命周期

整理by zhengkai.blog.csdn.net


组件的生命周期可分成三个状态

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • 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 中移除之前立刻被调用。
    在这里插入图片描述
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页