react笔记_07函数组件与类组件的区别之capture value特性

乖女子@@@

已于 2023-07-21 10:26:58 修改

阅读量467

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2023-01-04 12:26:34 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/128536329

版权

React 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

函数组件与类组件在写法没有好坏之分，性能差距也几乎可以忽略，而且 React 会长期支持这两种写法。
React的函数式组件和类组件之间的根本区别在心智模型上。

函数式组件具有 capture value 特性。

capture value特性

Capture Value 从字面上可以理解为固化的值。

可以认为每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。

也就是说在当前这个render中， state与props可以看作是 常量！

举例说明-props

类组件

现在存在 类式子组件Classson, 父组件将count作为属性传递到该子组件中

父组件

function Fa (){
  const [count, setCount] = React.useState(5)
  return(
    <div>
      {count}
      <br />
      <button onClick={()=>{setCount(precount => precount+1)}}> 点我修改count </button>
     
      <br />
      <Classson count={ count }/>
    </div>
  )
}
ReactDOM.render(<Fa />, document.getElementById('test'))

Classson子组件

class Classson extends React.Component{
  getCountValue = ()=>{
    setTimeout(()=>{
      console.log('@@@class', this.props.count)
    },3000)
  }
  render(){
    return(
      <button onClick={this.getCountValue}> class - 点我显示props.count值</button>
    )
  }
}

页面展示
执行步骤
- [1]点击 “ class - 点我显示props.count值” 按钮 -> 在子组件打印通过父组件传递过去的count值；
- [2]在3s内(子组件打印是延迟3s 的)通过 “ 点我修改count ” -> 在父组件修改count值 -> 由5变为6；
- 等待定时器结束 -> 在控制台查看子组件打印的值
执行结果
- 控制台打印 -> @@@class 6
- 打印的是最新数据

原因 -> React 文档中描述的 props 不是不可变数据吗？为什么类组件可以展示修改后的数据呢？
- 虽然props是不可变的，但是在class组件中 this是可变的，react在更新过程中会修改this上的数据，保证你能够在 render和其他的生命周期方法里，读取到最新的数据(props, state)，因此this.props 的调用会导致每次都访问最新的 props;
```
class Classson extends React.Component{
  getCountValue = ()=>{
    const {count} = this.props
    setTimeout(()=>{
      console.log('@@@class', count)
    },3000)
  }
  render(){
    return(
      <button onClick={this.getCountValue}> class - 点我显示props.count值</button>
    )
  }
}
```
  若是如上代码，打印的值就是5了，因为在render之前就将count值获取并赋值给变量了，之后的使用就和props的更新没有关系了

函数组件

现在存在 函数式子组件Classson, 父组件将count作为属性传递到该子组件中

父组件

function Fa (){
const [count, setCount] = React.useState(5)
return(
  <div>
    {count}
    <br />
    <button onClick={()=>{setCount(precount => precount+1)}}> 点我修改count </button>
   
    <br />
    <Functionson count={ count }/>
  </div>
)
}
ReactDOM.render(<Fa />, document.getElementById('test'))

函数式组件

function Functionson (props){
  const getCountValue = ()=>{
    setTimeout(()=>{
      console.log('@@@function', props.count)
    },3000)
  }
  return (
    <button onClick={getCountValue}> function - 点我显示props.count值</button>
  )
}

页面展示
执行步骤
- [1]点击 “ function - 点我显示props.count值 ” 按钮 -> 在子组件打印通过父组件传递过去的count值；
- [2]在3s内通过 “ 点我修改count ” -> 在父组件修改count值 -> 由5变为6；
- 等待定时器结束 -> 在控制台查看子组件打印的值
执行结果
- 控制台打印 -> @@@function 5
- 打印的是之前render的数据
原因 -> React 文档中描述的 props 是不可变数据
- 函数组件中不存在this,因此在函数组件中props是不可变的；
- 因此在每次render中 props就可以看作一个常量
- 逻辑如下
  挂载组件时，count值为5 ，此时生成了一个快照，当我点击按钮时，此时放入异步队列的想当于
```
setTimeout(()=>{
   console.log('@@@function', 5)
 },3000)
```
  而不是
```
setTimeout(()=>{
  console.log('@@@function', props.count) 
},3000)
```
  因此当在父组件修改count值，造成子组件rerender时，不会影响上一次的render的数据，而是重新形成一个新的快找，在这个render中count值为6