React类式组件基础内容补充,前端面试题大全

47 阅读2分钟

受控组件与非受控组件

====================================================================

受控组件


  • 什么是受控组件:

类似于vue的双向数据绑定,数据和视图之间可以相互影响

  • 什么时候使用受控组件:

需要对组件的value值进行修改时,使用受控组件。比如:页面中有一个按钮,每点击一次按钮受控组件的值加1

非受控组件


  • 什么是非受控组件:

类似于单项数据流,只可以数据改变视图

  • 什么时候使用受控组件:

任何时候都不需要改变组件的value值,这时候可以使用非受控组件。

PureComponent

=======================================================================

  • 什么是PureComponent

  • React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。

  • 在PureComponent中,如果包含比较复杂的数据结构,可能会因深层的数据不一致而产生错误的否定判断,导致界面得不到更新。

ref

=============================================================

  • 引入

import React,{PureComponent, createRef} from 'react';

  • 创建

myNewRef = createRef();

  • 挂载

render(){

return (

...

)

}

  • 执行

componentDidMount(){

new BScroll(this.myNewRef.current)

}

children

==================================================================

使用过vue的话一定知道slot插槽,作用就是站位,在React中可以使用children来代替

import React,{PureComponent} from 'react';

// 父级

class App extends PureComponent {

state={

show : false,

man : false

}

render(){

let {show,man} = this.state;

return (

{

show?(

准备国庆快乐

我想回学校

):null

}

{

man?(

邓州窝子面

味道好极了

):null

}

<button onClick={()=>{

this.setState({show:true})

}}>点击show

<button onClick={()=>{

总结

前端资料汇总

  • 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

  • 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

  • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!! 喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!

开源分享:docs.qq.com/doc/DSmRnRG…