极简React教程 Day Two —— hook

简介

hook是react库里的一类函数，每种hook功能不同，函数式组件常常使用它增加对页面的控制。

useState——赋予函数式组件state

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

得到两个对象，count即是()中的值。setCount为state专用的赋值语句 ，setCount(1)等同于count=1

useEffect——模拟函数式组件的“生命周期”

在函数初始化，某个state更新，函数卸载时浏览器会自动在组建内顺序调用effect。

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

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

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

• 初始化 运行顺序 1 2 return(3)
• state改变 运行顺序 3 1 2 return(3)

可以使effect只监控某些state的改变

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

Hook使用规则

不要在循环，条件或嵌套函数中调用 Hook，  确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。

其他hook

useCallback和useMemo：优化性能用的juejin.cn/post/684490…