useState

 返回

 

　 const [state, setState] = useState(initialState)

        实现class组件状态的功能，返回一个state，以及更新state的函数。在初始渲染期间，返回的状态 ( state ) 与传入的第一个参数 ( initialState ) 值相同。

        setState函数用于更新state。它接收一个新的state值并将组件的一次重新渲染加入队列。

　　 setState(newState); // 将状态更改为 'newState' 并触发重新渲染，重新渲染`state`后的值为`newState`

        在后续的渲染中，useState返回的第一个值始终是更新后的state

 

使用useState：

 1 　　// 第一步：从 react 库中引入 useState Hook 
 2 　　import React, { useState } from 'react'; 
 3 　　function Example() { 
 4 　　/* 第二步：通过调用 useState Hook 声明了一个新的 state 变量。 
 5 　　 * 它返回一对值（数组）解构到我们命名的变量上。 
 6  　　* 第一个返回的是状态 count，它存储的是点击次数。我们通过传 0 作为 useState 唯一的参数来将其初始化 0。 
 7 　　 * 第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。 
 8  　　*/ 
 9 　　const [count, setCount] = useState(0); // 声明一个叫 "count" 的 state 变量 return 
10  　return ( <div>
11 　　// 第三步：读取 state，即count 
12 　　<p>You clicked {count} times</p>
13  
14 　　// 第四步：更新 state，通过 setCount() 
15 　　<button onClick={() => setCount(count + 1)}> Click me </button> 
16 　　</div> ); }        
17 　　//通过上面的分析，我们可以看到使用 useState Hook 管理状态简直太爽了。不用写繁琐的 class 组件，不用担心 this 指向，代码是如此的清晰。