• react关于setState的使用


    参考React官方文档,这里做下笔录

    (1)setState语法

    setState(updater, [callback])

    解析:
      参数一为带有形式参数的 updater 函数:
      参数二为可选的回调函数

      1、参数一介绍

      

      注意:当然,它不应直接被修改。你应该使用基于 state 和 props 构建的新对象来表示变化。例如,假设我们想根据 props.step 来增加 state:

      

      updater 函数中接收的 state 和 props 都保证为最新。updater 的返回值会与 state 进行浅合并

      

      

      所以我们一般在使用时会用其简洁语法

    简洁语法格式如下:
    this
    .setState({ counter })

      2、问题:参数一什么时候使用对象格式、什么时候使用函数格式?

      案例如下,两种形式实现累加效果

      

    对象方式是函数方式的简写方式
    如果新状态不依赖于原状态 ===> 使用对象方式
    如果新状态依赖于原状态 ===> 使用函数方式
    如果需要在setState()后获取最新的状态数据, 在第二个callback函数中读取

      关于依赖和不依赖,如下:

      

      

      3、参数二介绍

    setState() 的第二个参数为可选的回调函数,它将在 setState 完成合并并重新渲染组件后执行。
    通常,我们建议使用 componentDidUpdate() 来代替此方式。
    参数二:回调函数执行时机:状态更新且界面更新之后回调。

      

      

    .

  • 相关阅读:
    实验六 继承定义与使用
    第四周java实验
    解决 GitHub 提交次数过多 .git 文件过大的问题
    添加开机启动项目
    bash启用 z(同理git bash)
    WIndows to go安装win10系统到移动硬盘
    Make for Windows
    zotero引用3GPP标准暂不完善——使用BibTeX
    Spyder中内嵌的IPython Console自动续行而不运行的问题
    texstudio.org打不开——下载最新版TeXstudio
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/12629894.html
Copyright © 2020-2023  润新知