react中hook是什么

react中hook是什么,第1张

react中hook是什么

react中,hook是React16.8新增的特性,用于在不编写class的情况下使用state及其他的react特性;可以用函数组件去使用react中的一些特性,也可以让函数组件也拥有状态,通过自定义hook实现在组件间公用状态 *** 作。

本教程 *** 作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react中hook是什么

react hook是react中引入新特性,它可以让react函数组件也拥有状态;

通过自定义hook可以实现在组件间公用状态 *** 作;

含义:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。简单来说就是可以使用函数组件去使用react中的一些特性

所要解决的问题:

解决组件之间复用状态逻辑很难得问题,hook能解决的就是在你无需修改之前组件结构的情况下复用状态逻辑,在不使用hook的情况下,需要使用到一些高级的用法如高级组件、provider、customer等,这种方式对于新手来说不太友好,可能在理解上就比较的困难

对于复杂组件可以去拆分其逻辑,例如在你使用生命周期函数时,不同的生命周期需要在不同的时刻进行,因此在此时对于复杂的组件来说,有的生命周期函数中就存在大量的逻辑,在可读性上面就大打折扣。当使用hook时,就可以进行组件逻辑的划分,将相同的逻辑给整合在一起,这样就大大增加可读性也在一方面利于维护

不需要对于class组件的理解,当你在最初去学习时,你不得不去理解this这个关键字,在当前组件所表示的含义,但是在hook中就不需要。能够解决你在不使用class组件的情况下去体现react的特性

需要注意的一点就是hook和class组件是不能够同时使用的,在实际的使用过程中一定要注意,否则就会出现报错。

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性能优化的注意事项

推荐学习:《react视频教程》

以上就是react中hook是什么的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/697591.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-22
下一篇 2022-04-22

发表评论

登录后才能评论

评论列表(0条)

保存