react hooks学习

接触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);
  }
  // ...

原文地址：https://www.cnblogs.com/zoeeying/p/11087469.html