对React Hooks（useState和useEffect) 的总结思考

一、为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程)

        Hooks是React16.8版本后新增加的特性，目的是让你用函数组件的写法代替原来的类组件写法，同时让函数组件支持state，同时用useEffect代替原来的生命周期的业务功能编写代码

风格，目的就是解决原来用class写组件的痛点，痛点有哪些自行查阅资料,主要有：

  (1) 选择性烦恼：是使用状态组件还是无状态组件?   拥有了hooks后，现在一切组件均是Function。

  (2)搞不清生命周期的钩子函数？  拥有了hooks后，生命周期钩子函数可以先丢一边了。

（3）组件的this搞晕了？拥有了hooks后，不需面对this.

二、useState理解：

   1.useState是异步的，定义方法(语法叫数组解构写法），例如：

// 声明一个叫 “count” 的 state 变量 
 const [count, setCount] = useState(0);
// 更新state
<button onClick={() => setCount(count + 1)}>
    Click me
  </button>

2. state变量可以定义多个，也可以存储对象和数组，这边有一个规则：它总是替换它，而不象class一样合并它，即有闭包的概念。

三、useEffect的理解(原则：让你忘记类组件的生命周期的函数写法）

useEffect出现的需求背景：我们只想在 React 更新 DOM 之后运行一些额外的代码   (所以叫副作用函数）

  （一） 它是一个钩子函数的定义，即对于dom的渲染后会产生相应的副作用（这个副作用中定义相关的功能），达于原来类组件的对生命周期函数一样的应用效果，但比它更灵活省事。

（二）定义一个useEffect主要分为四种定义方法（总结：需不要return，需不要第二个参数，第二个参数要不要[])：

1.每次渲染都要执行：则第二个参数不需要。

2.在组件销毁或者调用函数前调用。：   则第一个参数中增加return语句。

3.只在组件挂载时执行一次：则第二个参数用空数组:[].

4.只在某一个state或者prop值发生变化后，才执行，则第二个参数[变量名]。

（三）useEffect可以定义多个，把功能实现进行分离。

（四）useEffect 使用规则：

     1.只在最顶层使用 Hook

      2.只在 React 函数中调用 Hook

四、useState和useEffect声明时有先后顺序，产生的结果是不一样，所以根据业务需要灵活确定他们先后顺序的组合。