react-hooks知识梳理—1.useState

待我称王封你为后i 2022-10-31 00:59 26阅读 0赞

### 1.函数组件和类组件 ###

**函数组件**：被动的接受props,不能有自己的状态，也不能有自己的生命周期，类组件复用的问题，只要函数里面有this，这个函数就不纯

**类组件：**使用setState，有生命周期

缺点： 类组件的复用很麻烦，其他组件要用的话，必须使用高阶组件包一层，这样封装的成本很大， 而且中间层的存在只是为了传递数据，没有其他任何意义，render props复用的方式，复用起来不是很优雅。

facebook非常推崇函数式编程

利用hooks实现副作用（副作用：比如说请求），Hooks既不能失去组件的作用，又能有函数的方式

### 2.useState ###

1) 一个hooks组件可以声明多个useState

import React, { useState } from 'react';
    const ClickCount = () => {
      // 1.一个hooks组件可以声明多个useState
      const [count, setCount] = useState(0);
      const [count1, setCount1] = useState(0);
    
      const handleClick = () => {
        setCount(count+1);
        setCount1(count1+2)
      };
    
      return (
        <div>
          <p>count: {count}</p>
          <p>count1: {count1}</p>
          <button onClick={handleClick}>+1</button>
        </div>
      )
    };
    
    function UseState() {
      return (
        <div className="App">
          <ClickCount />
        </div>
      );
    }
    
    export default UseState;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

2) 不推荐将所有的state放在一起管理，因为

// 2. 不推荐下面这种写法，因为a。这种写法比较冗余b。每次setState的时候其实生成一个新的对象，
      // 这样一个子组件依赖stateCount的话，会导致一个不必要的刷新，所以尽量一个state单独维护一个状态
      // const [stateCount, setStateCount] = useState({count: 0, count1: 0});
      // const handleClick = () => {
      //   setStateCount({
      //     ...stateCount,
      //     count1: stateCount.count1 + 1,
      //   });
      // };

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221024/14ce8239cbcf4836b1598850fda0c6cd.png