React类式组件基础内容补充

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

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

[](()PureComponent

============================ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ===========================================

• 什么是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={()=>{

this.setState({man:true})

}}>点击man

)

}

}