react hooks基本使用

1.为什么要使用hooks

---

1.hooks可以使react在无状态组件中声明并使用状态，提高运行速度。

2.react的class组件复用和组合，通过单向数据串联起来。但class组件本身包含或多或少的状态（state），使得组件的复用变的很复杂。目前react解决组件复用的方法是渲染属性和高阶组件。这两种方式都会增加代码的层级关系

3.class组件的this指向有问题。需要编写绑定函数来保证this的指向正确。大量函数绑定导致代码臃肿并且容易出错。

4.函数组件方便测试和复用，但是很多情况下需要使用状态便不得不转换为class组件，hooks出现后解决问题。

---

2.useState和useEffet的使用方法

---

useState 

声明状态变量接受参数为初始值返回当前状态的值和设置状态的函数

声明 const [count, setCount] = useState(0);

读取状态值{count}

变更状态值 onClick={()=> setCount(count + 1)}

当状态值为对象时，变更状态值需要将整个对象作参数，不能只写要改变的属性

useEffect

class组件会有很多生命周期函数，比如componentDidMount，componentDidUpdate和componentWillUnmount。useEffect就相当与这些声明周期函数钩子的集合体。

1.react首次渲染和之后的每次渲染都会调用一遍传给useEffect的函数。而之前我们要用两个声明周期函数来分别表示首次渲染（componentDidMount），和之后的更新导致的重新渲染（componentDidUpdate）。

2.useEffect中定义的副作用函数的执行不会阻碍浏览器更新视图，也就是说这些函数是异步执行的，而之前的componentDidMount或componentDidUpdate中的代码则是同步执行的。

3.每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。只需要给useEffect传第二个参数即可跳过某些不必要的副作用。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数。当第二个参数为空数组时，相当于只在首次渲染时才执行。

useEffect(() => {

  document.title = `You clicked ${count}times`;

}, [count]);

自定义hooks

自定义hooks的方法一句话总结：在返回时暴露状态值和设定状态值的方法以便在其他hooks或组件中调用。类似于Java中的getter和setter方法

自定义案例

function useFriendStatus(friendID) {

 const [isOnline, setIsOnline] = useState(null);

 function handleStatusChange(status) {

   setIsOnline(status.isOnline);

  }

 useEffect(() => {

   ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);

   return () => {

     ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);

   };

  });

return [isOnline, setIsOnline];

}

使用自定义hooks时可以直接调用

const[isOnline,setIsOnline]=useState(null);

其他函数

除了上文重点介绍的useState和useEffect，react还给我们提供来很多有用的hooks，可以参考API文档理解其使用方法

useContext

useReducer

useCallback

useMemo

useRef

useImperativeMethods

useMutationEffect

useLayoutEffect