Question

我找不到答案，这是我的问题。像钩子那样使用散布运算符的更好的做法是什么？

GOOGLE_SERVICE_INFO_PLIST_FROM="${PROJECT_DIR}/%YOUR_CUSTOM_PATH_TO_FOLDER%/${GOOGLE_SERVICE_INFO_PLIST_NAME}"
BUILD_APP_DIR="${BUILT_PRODUCTS_DIR}/${FULL_PRODUCT_NAME}"
GOOGLE_SERVICE_INFO_PLIST_TO="${BUILD_APP_DIR}/GoogleService-Info.plist"
cp "${GOOGLE_SERVICE_INFO_PLIST_FROM}" "${GOOGLE_SERVICE_INFO_PLIST_TO}"

还是按属性设定状态？

const [user, setUser] = useState({name: 'John', email: 'john@john.pl'})
setUser(prev => {...prev, name: 'New name'})

什么是更好的选择，为什么？

Answer 1

请在react docs中阅读此信息。

https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

两种方法各有利弊。

文档中的一些重要提示：

我们建议根据以下内容将状态分为多个状态变量   哪些值往往会一起改变。

将所有状态都放在一个useState调用中，   每个字段的useState调用都可以工作。组件往往是最多的   当您找到这两个极端之间的平衡时，可读   相关状态转化为几个独立的状态变量。如果状态   逻辑变得复杂，建议您使用简化器或   自定义挂钩。

Answer 2

很显然是第二个，因为您不需要在每个状态更新中传递整个用户状态，而只需传递用户名或电子邮件即可。尽可能地保持简单。

Answer 3

通常，使用钩子时最好具有简单的状态，因为setState()在类组件中的工作方式与this.setState()有所不同-它不合并更改，而只是更新这些更改：

// in class component
this.setState({ name: 'Hello' }); // update only name field of state

// in functional component
setState({ name: 'Hello' });  // sets { name: 'Hello' } as new state

对于复杂状态，可以使用useReducer()钩子。

Answer 4

挂钩状态比setState易于使用。您可以将钩子与传播运算符一起使用

const [user, setUser] = useState({name: 'John', email: 'john@john.pl'});
setUser({...user, name: 'New name'});

使用带有对象或单个值的钩子？

4 个答案: