了解react-hook以及State Hook

react更新到16.8版本后最主要的内容就是增加了hook这个特性，它的主要作用可以理解为对react的函数组件进行了一次升级，使react的函数组件拥有了和react类组件一样的功能（关于以前版本react的组件的介绍可以移步到这里观看：react创建组件的几种方法，以及区别）。

Hook是什么：

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。

首先我们来学习第一个hook

useState()

import React, { useState } from 'react'export default function Main() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>)
}

使用步骤：

首先引入从’react’中引入useState。
在return之前定义一个数组，数组里面有俩个参数，第一个相当于类组件当中的this.state.xxx，而第二个参数就是一个方法，改变前一个参数值的方法。赋值为上面导入的useState()括号里面设置初始值，传递多个参数无用，只会找到你的第一个参数然后解构给你的数组第一个值。我们控制台输出一下useState()会更直观一些。

console.log(useState())
console.log(useState(1))
console.log(useState('12',55))

输出结果如下：

可以看到，我们如果不给初始值的话就是undefined，如果给多个值的话会忽略后面的值。PS：定义初始值的时候要注意数据类型哦。
第二个参数的方法就是用来改变这个值的。

<button onClick={() => setCount(count + 1)}>Click me
</button>

此例子在button按钮每次被点击的时候就会使count+1。

在一个组件内部可以创建多个State变量。

const [count, setCount] = useState(0);
const [age, setAge] = useState(16);
const [name, setName] = useState('吴小迪');

注意点：
state变量名或者函数名是不可以重复的哦，需要保证每一个都是唯一的。否则就会报错！

const [count, setCount] = useState(0);
const [count, setCount] = useState(0);

了解react-hook以及State Hook相关推荐

reactjs三个常用的Hook：State Hook、 Effect Hook、 Ref Hook
1. React Hook/Hooks是什么? (1). Hook是React 16.8.0版本增加的新特性/新语法 (2). 可以让你在函数组件中使用 state 以及其他的 React 特性 2. ...
这可能是你们都在找的：React 纯原生纯hook多标签微前端
项目地址:https://github.com/X-neuron/antdFront.git 项目特点: 1.采用webpack.babel.antd 等较为原生的配置和函数组件搭建,支持pw ...
Hook是什么，React为什么要引入Hook
简介 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性.Hook 是向下兼容的. Hook 是一些可以让你在函数组 ...
使用 State Hook
前文介绍了如下的Hooks例子 https://blog.csdn.net/qq_39606853/article/details/122283215?spm=1001.2014.3001.5501 ...
react 进阶必学 hook （一）：useState 来一碗大碗宽面
系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook ( ...
react 进阶必学 hook （三）：useContext 面馆分店开张了
系列文章传送门: react 进阶必学 hook (一):useState 来一碗大碗宽面 react 进阶必学 hook (二):useEffect 专治不吃宽面 react 进阶必学 hook ( ...
hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook
简介在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们 ...
Hook技术之Hook Activity
一.Hook技术概述 Hook技术的核心实际上是动态分析技术,动态分析是指在程序运行时对程序进行调试的技术.众所周知,Android系统的代码和回调是按照一定的顺序执行的,这里举一个简单的例子,如图所 ...
【Android 插件化】Hook 插件化框架 ( Hook 实现思路 | Hook 按钮点击事件 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
[react] react组件的state和props两者有什么区别？
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...