react-hooks知识梳理—1.useState

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;

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

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