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

import { useEffect } from 'react'；

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

如果只是像class组件那样，在事件函数中通过setState设置表格数据，表格不会及时更新，需要结合useEffect使用！

function App() {
  const [data, setData] = useState({ hits: [] });
  const [query, setQuery] = useState('redux');
  const [search, setSearch] = useState('redux');
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `http://hn.algolia.com/api/v1/search?query=${search}`,
      );
      setData(result.data);
    };
    fetchData();
  }, [search]);
  return (
    <Fragment>
      <input
        type="text"
        value={query}
        onChange={event => setQuery(event.target.value)}
      />
      <button type="button" onClick={() => setSearch(query)}>
        Search
      </button>
      <ul>
        {data.hits.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </Fragment>
  );
}