利用React 自定义Hooks实现业务逻辑复用实例

---

首先我们定义需要的 states:

// PostsAndTodos.js

const [posts, setPosts] = useState([]);

const [isPostsLoading, setIsPostsLoading] = useState();

const [todos, setTodos] = useState([]);

const [isTodosLoading, setIsTodosLoading] = useState();

• posts 用来保存远程加载的文章数据，isPostsLoading 保存文章数据的加载状态

• todos 保存待办事项，isTodosLoading保存待办事项数据的加载状态

• 这里我们定义了4个类似的状态

加载 Posts

---

我们使用 useEffect 来请求 posts 数据：

// PostsAndTodos.js

useEffect(() => {

const loadPosts = async () => {

setIsPostsLoading(true);

try {

let response = await fetch(

“https://jsonplaceholder.typicode.com/posts?_limit=5”

);

let data = await response.json();

setPosts(data);

} catch (e) {

console.log(e);

}

setIsPostsLoading(false);

};

loadPosts();

}, []);

1. 我们首先在 useEffect 里定义了 loadPosts() 函数，用来请求远程数据。

2. 在loadPosts()函数里，我们在请求开始，设置加载状态为true，在结束时，无论是否出错，都把加载状态设置为false。

3. 然后函数中间，我们发起请求，把返回的数据更新到 state 中。