react hook是什么？react hook详解

react hook是什么

react hook是react中引入新特性，它可以让react函数组件也拥有状态；
通过自定义hook可以实现在组件间公用状态操作；React Hook 从具象上来说就为函数组件（纯函数）提供副作用能力的 React API，从抽象意义上来说是确定状态源的解决方案。

Hook 是如何运行的

React在处理函数组时直接将其作为函数调用。但我们知道的是，Hook 在函数组件「第一次执行」时的表现和「重渲染」时的表现是不一样的。React 为了保证以同样的姿势调用 Hook，开发者却能在「第一次执行」函数组件和无数次的「重渲染」中得到想要的结果，函数组件「第一次执行」和「重渲染」所调用的 Hook 实际上指向的是不同的 Hook。函数组件在「第一次执行」时所使用的 Hook (useXXX) 指向的是对应的 mountXXX，而在更新时，Hook 指向的是对应的 updateXXX。

react-hook的用法

react提供了useState、useEffect两个hook函数来创建stack hook和effect hook

state hook

在函数组件内使用useState可以给组件使用状态；
useState的入参为初始状态，出参为当前state以及更新state的函数；

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me      </button>
    </div>
  );}

useState第一次执行时将创建一个状态，之后执行都是使用这个状态；

effect hook

使用useEffect可以给组件添加副作用逻辑；
所谓副作用个人理解是与react范围外的世界产生的交互，如dom操作、网络请求等(说实话，副作用具体是啥我还没完全弄明白)；
useEffect入参有两个第一个参数是副作用函数、第二个参数是个用于判断是否执行副作用的数组；

function useEffect(effect: EffectCallback, deps?: DependencyList): void;type EffectCallback = () => (void | (() => void | undefined));type DependencyList = ReadonlyArray<any>;

副作用有一个执行过程和一个可选的清除过程，副作用函数定义了执行过程，它的返回值函数定义了清除过程；
在组件函数中定义的副作用像是渲染结果的一部分，副作用在每次渲染后都会执行，在渲染前、组件销毁前清除之前的副作用；这样做使得我们的副作用可以读到每次的props、state；

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...}

如果不想每次渲染都执行副作用，可以给useEffect第二个参数传一数组，当数组中的元素没有变化时，不会触发副作用；

自定义hook

自定义hook其实就是个内部使用了useState、useEffect的普通函数，并且函数名以use开头；
使用自定义hook可以将组件逻辑提取到可重用的函数中；

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;}

TODO
render props、高阶组件、effect性能优化的注意事项

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。

立即免费在线制作一个APP，新手注册即送开发大礼包

提交app定制需求，免费获取报价和周期：

电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500

手机请点击https://www.qianyuthink.com/?url=/m/customizedservice