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. VBA中如何用environ$ 或 environ方法取得环境变量?

    用索引号取得环境变量Sub EnumSEVars() Dim strVar As String Dim i As Long strVar = Environ$(i) & Then Exit F ...

  2. Springboot(java)程序部署到k8s

    新建rc(replication controller) 以下操作在master1做 rc是一套程序部署的配置,k8s会根据配置自动运行和管理程序,例如自动启动程序,程序挂了自动重启等等 rc配置一般 ...

  3. es6 promise 结束回调地狱

    promise的三种状态: pending---进行中 fulfiled---执行成功 rejected---执行失败 var promise = new Promise(function(resol ...

  4. 脚本_统计 Linux 进程相关数量信息

    #!bin/bash#作者:liusingbon#功能:统计 Linux 进程相关数量信息,running(运行的进程),sleeping(睡眠中的进程),stoped(停止的进程),zombie(僵 ...

  5. 剖析 Vue.js 内部运行机制 (1)

    1. new Vue() 之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周 期.事件. props. methods. data. computed ...

  6. 關於mac os系統的一些快捷鍵和操作

    一.了解mac os 1.桌面的组成元素 2.认识“Dock栏” Dock是一个神奇的东西,可以把Dock理解为Windows的任务栏,在这个地方可以随意拖放你想常驻在你屏幕底部的应用. Dock在工 ...

  7. vue @import css

    @import '~@/assets/scss/helpers/_mixin'; 原理:CSS loader 会把把非根路径的url解释为相对路径, 加~前缀才会解释成模块路径.

  8. python生成HTMl报告(unittest)

      Python3 使用HTMLTestRunner.py 报错ImportError: No module named 'StringIO'处理方法 HTMLTestRunner.py文件是基于Py ...

  9. Intent.java分析

    代码位于frameworks/base/core/java/anroid/Content/Intent.java Intent是对要进行操作的一种抽象描述.用action抽象操作,用data(andr ...

  10. POJ 1502 MPI MaeIstrom ( 裸最短路 || atoi系统函数 )

    题意 : 给出 N 个点,各个点之间的路径长度用给出的下三角矩阵表示,上上角矩阵和下三角矩阵是一样的,主对角线的元素都是 0 代表自己到达自己不用花费,现在问你从 1 到 N 的最短路,矩阵的 x 代 ...