- Objective:
- Breadcrumb:
# 概念阐释
## 语义
当代码变得复杂时，将这些值集合到对象或数组中是有意义的。为了让状态看上去更简洁，并易于修改和维护，我们要给不同的状态设定单独的 hooks
# 实例
## 例1
```jsx
import React, { useState } from "react";
//不分离的状态
function Musical() {
const [state, setState] = useState({
title: "Best Musical Ever",
actors: ["George Wilson", "Tim Hughes", "Larry Clements"],
locations: {
Chicago: {
dates: ["1/1", "2/2"],
address: "chicago theater"},
SanFrancisco: {
dates: ["5/2"],
address: "sf theater"
}
}
})
}
// 分离的状态
function MusicalRefactored() {
const [title,setTitle] = useState('Best Musical Ever');
const [actors,setActors] = useState(["George Wilson", "Tim Hughes", "Larry Clements"]);
const [locations,setLocations] = useState({
Chicago: {
dates: ["1/1", "2/2"],
address: "chicago theater"},
SanFrancisco: {
dates: ["5/2"],
address: "sf theater"
}
});
}
```
## 例2
```jsx
import React, { useState, useEffect } from 'react';
import { get } from './mockBackend/fetch';
//分离每一项的 state 和 effect
export default function SocialNetwork() {
const [menu,setMenu] = useState(null);
useEffect(()=>{
get('/menu').then((menuResponse)=>{setMenu(menuResponse.data);});
},[])
const [newsFeed,setNewsFeed] = useState(null);
useEffect(()=>{
get('/news-feed').then((newsFeedResponse)=>{setNewsFeed(newsFeedResponse.data);});
},[])
const [friends,setFriends] = useState(null);
useEffect(()=>{
get('/friends').then((friendsResponse)=>{setFriends(friendsResponse.data);});
},[])
return (
<div className='App'>
<h1>My Network</h1>
{!menu ? <p>Loading..</p> : (
<nav>
{menu.map((menuItem) => (
<button key={menuItem}>{menuItem}</button>
))}
</nav>
)}
<div className='content'>
{!newsFeed ? <p>Loading..</p> : (
<section>
{newsFeed.map(({ id, title, message, imgSrc }) => (
<article key={id}>
<h3>{title}</h3>
<p>{message}</p>
<img src={imgSrc} alt='' />
</article>
))}
</section>
)}
{!friends ? <p>Loading..</p> : (
<aside>
<ul>
{friends
.sort((a, b) => (a.isOnline && !b.isOnline ? -1 : 0))
.map(({ id, name, isOnline }) => (
<li key={id} className={isOnline ? 'online' : 'offline'}>
{name}
</li>
))}
</ul>
</aside>
)}
</div>
</div>
);
}
```
# 相关内容
#### 分离与不分离的区别
如果不分离，在写一个事件处理程序的时候就会变得复杂：
分离的状态
# 参考资料
[Separate Hooks for Separate Effects](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-effect-hook/exercises/separate-hooks-for-separate-effects)