React函数式组件useState的使用（保姆式演示）_墨·殇_import react, { usestate } from 'react

网络投稿 02-07 3157

1.简单的函数式组件搭建（快捷生成：rsf）

2.hook（函数组件必不可少）

Hook 是什么？?Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。（官话）

2.1 usestate import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

????????在函数式组件中，我们是无法用到state的，函数式组件缺失了自己的this，没有实例对象（this的指向永远是我们前端的一块绊脚石，请认真学习并教教我）所以，脸书团队殚精竭虑的发明了：usestate！！！

第一步-记得引入它：import React, { useState } from 'react';

第二步-创建useState： // 声明一个叫 “count” 的 state 变量 const [count, setCount] = useState(0);

? 调用 useState?方法的时候做了什么??它定义一个 “state 变量”。我们的变量叫?count，但是我们可以叫他任何名字，比如?banana。（摘抄自react管网）

这样，useState这个内置方法的调用，可以返回一个结果（结果是一个数组），数组里面包含两个元素，第一个就是我们熟悉的状态，第二个就是我们更新状态的方法，所以我们用数组的解构赋值来表示：[count, setCount]，而useState(0)的0就是我们的初始值（来自尚硅谷-天禹男神），这样，我们就可以在函数式组件中肆意妄为的使用状态。（潜规则：set后的首字母大写）

第三步-读取~更新状态：

? ?这样，你可以结合jsx语法和useState，肆无忌惮的去使用函数式组件，但是，不能高兴得太早，react那无比汪洋的大海还等着你去探索。学成归来记得苟富贵，勿相忘。