React Hooks（一）

hooks出现的目的是为了避免必须使用class而产生mount造成的性能浪费

当前其提供了useState、useEffect、useContext Api来实现。

useState

useState只接受一个参数 ，并返回一个只有两个元素的数组，第一个元素为state，第二个元素为setState函数

下面举个🌰

import { useState } from 'react';

const renderNum = () => {  const [num, setState] = useState(0);    // 等同于
   const result = useState(0);
   const num = result[0];
   const setState = result[1];

  return (
    <div>
       <div>{num}</div>
       <button onClick={() => setState(num + 1)}>+</button>  
       <button onClick={() => setState(num - 1)}>-</button>  
    </div>
  );
};

由此可能会有同学问  这样的话每次执行renderNum() 那么state值不就会被初始化了吗 。其实是不会的，useState在内部会区分是第一次调用 还是后续的调用。因此也可以看出当使用useState函数时可以设置多个state。

例如

const renderNum = () => {    const [num, setState] = useState(0);
    // 千万不要写这种
    // if (count % 2 === 0) {
    //     const [even, updateEven] = useState('even');  
    // }
    const [odd, updateOdd] = useState('odd');  ...
}

值得注意的是千万不要在if或循环语句中使用，因为这种判断会导致useState调用次序不一致，从而导致影响获取上一次记录的值。