react面试题

这是一篇关于react面试题的思维导图，内容有props与state的区别、组件间通信、组件的生命周期、react中key的作用、react的工作原理等。

react

• 1、props和state的区别？
  • props是父组件传递的参数，属于外部传入参数，不能修改。 state是用来保存组件内部状态，可以通过setState修改
• 2、组件间通信
  • 1、父传子：父组件调用的时候传递，子组件通过props获取 2、子传父：一般通过回调函数，父组件定义函数，子组件调用并传递参数 3、其他：层层传递，发布订阅，使用context对象，自定义事件
• 3、组件的生命周期
  • 1、初始化阶段 getDefaultProps:获取实例的默认属性 getInitialState:获取每个实例的初始化状态 componentWillMount：组件即将被装载、渲染到页面上 render:组件在这里生成虚拟的 DOM 节点 componentDidMount:组件真正在被装载之后 2、运行中状态 componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接 收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了） componentWillUpdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentDidUpdate:组件已经更新 3、销毁阶段 componentWillUnmount:组件即将销毁，此时可以清除定时器
• 4、setState之后发生
  • 1、setState是用来修改state的值 2、调用setState()之后新旧状态合并，触发一个调和过程，进行一个diff算法，判断是否有改变，diffDOM判断是否要更新DOM 3、同一个方法中多次调用setState，react会将state的改变加入队列，一起处理，批量更新
• 5、什么是虚拟DOM 为什么虚拟dom会提高性能
  • 1、虚拟DOM实际上是用js对象结构表示Dom树的结构：然后用这个树构建一个真正的Dom树，插到文档当中当状态变更的时候，重新构造一颗新的对象数 2、虚拟dom相当于在js和真是dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能
• 6、refs
  • Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回
• 7、react中key的作用
  • 主要是用来减少没必要的diff算法对比 key相同：若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。 key值不同：则react先销毁该组件，然后重新创建该组件。
• 8、react的工作原理
  • react会创建虚拟DOM，当state改变时，react利用diff算法标记虚拟dom中的改变，最后利用diff的结果更新dom
• shouldComponentUpdate 是做什么的？
  • shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能
• 调用 super(props) 的目的是什么
  • 在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。 传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
• React 优势
  • 1、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚 DOM 的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。 2、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们 提供了标准化的 API，甚至在 IE8 中都是没问题的。 3、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。 4、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构， 它随着 React 视图库的开发而被 Facebook 概念化。 5、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响 应而不 是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。 6、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
• diff 原理
  • 1、把树形结构按照层级分解，只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性，方便比较。 2、React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty. 3、到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。