正文
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>
);
}
