React函数式组件useState的使用（保姆式演示）

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那无比汪洋的大海还等着你去探索。学成归来记得苟富贵，勿相忘。