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. python之设置windows背景图片

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'jiangwenwen' from PIL import Image impo ...

  2. Codeforces 691E题解 DP+矩阵快速幂

    题面 传送门:http://codeforces.com/problemset/problem/691/E E. Xor-sequences time limit per test3 seconds ...

  3. 让网站动起来!12款优秀的 jQuery 动画

    Textillate.js 介绍:Textillate.js 是一个简单的 CSS3 文本动画插件.结合了一些非常棒的库,把 CSS3 动画轻松应用到任何文本.只需要在项目中简单地引入 textill ...

  4. python-docx 添加表格时很慢的解决方法

    我们做监控系统的时候常需要给客户发送邮箱报告,附带一个word的文档,文档中插入表格给用户更直观的数据. 我用的时python-docx库操作文档,最近碰到,当往文档中插入表格时,随着表格行数的增多, ...

  5. PowerDesigner 使用说明

    1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner 快捷工具栏 palette 不见了,怎么重新打开,找回来呢 上网搜索了一下"powerdesig ...

  6. 部分DOM事件总结

    复习: 1.1 DOM:Docment Object Model  文档对象模型 当页面加载时,就会创建文档对象模型.文档对象模型被构造为DOM树: DOM树种任何一个部分都可以看做是节点对象,结构中 ...

  7. AOP技术介绍--(AOP技术基础)

    2.1 AOP技术起源        AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto Research Lab(即PARC)的研究人员就对面向对象思想的局限性进行了分 ...

  8. random模块 os模块

    # random# import random# random.random() # 大于0且小于1之间的小数# random.randint() # 大于等于1且小于等于3之间的整数# random ...

  9. [转]php判断mysql_query是否成功执行

    针对update 语句等会对数据表进行修改的语句 在mysql_query($sql);后面加上 $result = mysql_affected_rows(); 如果$result 值为-1表明语句 ...

  10. Python3解leetcode Reach a Number

    问题描述: You are standing at position 0 on an infinite number line. There is a goal at position target. ...