1 useState函数的第一个参数,是state变量的初始值。

2 每次渲染时,多个State Hook的顺序、数量都是一样的。(不能多、不能少)

3 state变量是只读的

4 state变量发生变化(比较引用地址),会触发新的渲染(再次执行渲染函数);

state变量没变化(比较引用地址),不触发新的渲染。

import React, { useState } from "react";

// 记录渲染次数
let times = 0; export default function App(props) {
// 打印渲染次数
console.log("函数式组件", ++times); const [counter, setCounter] = useState(0); return (
<div>
<button onClick={e => setCounter(counter + 1)}>按钮:{counter}</button>
</div>
);
}

State Hook的更多相关文章

  1. [React] Write a Custom State Hook in React

    Writing your own custom State Hook is not as a daunting as you think. To keep things simple, we'll r ...

  2. 【React 资料备份】React Hook

    Hooks是React16.8一个新增项,是我们可以不用创建class组件就能使用状态和其他React特性 准备工作 升级react.react-dom npm i react react-dom - ...

  3. [React] Write a Custom React Effect Hook

    Similar to writing a custom State Hook, we’ll write our own Effect Hook called useStarWarsQuote, whi ...

  4. [React] Use the React Effect Hook in Function Components

    Similar to the State Hook, the Effect Hook is “first-class” in React and handy for performing side e ...

  5. [React]Hook初探

    Hook是什么 Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render pro ...

  6. React使用hook

    Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 为什么会有hook 在组件之间复用状态逻辑很难,需要重新组织你 ...

  7. 七天接手react项目 —— state&事件处理&ref

    state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...

  8. 开发中常用的Hook

    开发中常用的Hook 什么是Hook? Hook 是一些可以让你在函数组件里"钩入" React state 及生命周期等特性的函数,用来实现一些 class 组件的特性的. 1 ...

  9. 【Android应用开发】RecycleView API 翻译 (文档翻译)

    . RecyclerView extends ViewGroupimplements ScrollingView NestedScrollingChild java.lang.Object    ↳ ...

随机推荐

  1. Log4j指定输出日志的文件

    在Log4j的配置文件中,有一个log4j.rootLogger用于指定将何种等级的信息输出到哪些文件中, 这一项的配置情况如下: log4j.rootLogger=日志等级,输出目的地1,输出目的地 ...

  2. Html标签替换(过滤掉html特殊符号)

    /// <summary> /// 替换标签,把 <>" 替换为HTML标记 /// </summary> /// <param name=&quo ...

  3. Python 中三大框架各自的应用场景??

    django:主要是用来搞快速开发的,他的亮点就是快速开发,节约成本,正常的并发量不过 10000,如果要实现高并发的话,就要对 django 进行二次开发,比如把整个笨重的框架给拆掉,自己写 soc ...

  4. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

  5. wxpython程序基本功能源码整理,包括基本文字,输入框,字体设置,按钮绑定事件触发

    #coding=utf-8 import wx class MyApp(wx.App): def __init__(self): wx.App.__init__(self) def OnInit(se ...

  6. mongoDB学习笔记(2)

    一.删数据库 1.语法 MongoDB 删除数据库的语法格式如下: db.dropDatabase() 删除当前数据库,默认为 test,你可以使用 db 命令查看当前数据库名. 2.实例 以下实例我 ...

  7. 6个优秀的微信小程序ui组件库

    开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...

  8. PAT考砸有感

    今天下午1点半到4点半是考PAT的时间,考场很安静,大家都在安静地思考,唯一能够听到的是键盘敲击的声音,和几只ACM大牛提前离场的自信的声音,那仿佛就是在说着:哈哈哈,又一次轻松过.考试结束,我还在调 ...

  9. 64bit assembly

    16个通用寄存器: %rax %rbx %rcx %rdx %rsi %rdi %rbp %rsp %r8 %r9 %r10 %r11 %r12 %r13 %r14 %r15

  10. 从Excel粘到Word的图片只有下面一半

    把图片粘贴到WORD上为什么只显示最底下一部分? 出现此故障的原因,有可能是设置为固定值的文档行距小于图形的高度,从而导致插入的图形只显示出了一部分.所以要调整图片的段落格式中的行间距. 解决方法 选 ...