react hooks学习

Posted 2022-02-12 zoeeying

接触React项目快两个月了，还在研究摸索各种知识点的过程中，充实且幸福。

在项目中学习新知识，还是很有效率的，一边写项目，一边实验新的知识点，比如react hooks！嘻嘻嘻~~~

写了好一段时间class组件了，想尝试尝试函数式组件，之前也有试过，但是一碰到需要使用state的地方，只能又把function改成了class，心塞塞，然后没事刷博客，看到了react hooks，有一种缺什么，就有什么新知识冒出来的感觉。

1、State Hook，使用state

import  useState  from ‘react‘;

function Example() 
  const [count, setCount] = useState(0);
  //const [age, setAge] = useState(42);
  //const [fruit, setFruit] = useState(‘banana‘);
  //const [todos, setTodos] = useState([ text: ‘Learn Hooks‘ ]);

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

2、Effect Hook，使用生命周期，在第一次render和每次update后触发useEffect

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

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => 
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => 
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    ;
  );

  function handleStatusChange(status) 
    setIsOnline(status.isOnline);
  
  // ...