Question

借助React相对较新的状态钩子，我想知道最佳实践在用例方面有哪些规定。例如，下面的两个是首选：

const [water, setWater] = useState('');

然后致电：

if (args._d) {
  setWater(args._d);
}

或：

const [state, setState] = React.useState({ water: '' });

然后致电：

if (args._d) {
  setState({ water: 'something' })
}

Answer 1

我看过的大多数示例（包括React文档）都使用您的第一种方法，尤其是在仅处理一种状态时。也就是说，这两种方法本质上都不比另一种更好/更糟（the React docs对此有一些指导）。

要注意的一件事是，从useState返回的设置者将 替换而不是合并 ，即现有状态。在处理多个状态值时，这一点很重要：

const [state, setState] = useState({ water: '', food:  []});

// Incorrect! This will overwrite state, removing `food`:
setState({ water: 'H2O' });

// Correct, but more verbose than class-based setState:
setState(prevState => ({
  ...prevState,
  water: 'H2O'
}));

如果您确实在一个状态下设置了多个值，那么React文档会这样说：

我们建议根据状态值一起变化将状态分为多个状态变量。

当状态逻辑变得更加复杂时，文档也倾向于使用useReducer。这是文档中的相关部分：https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

React的setState的最佳实践

1 个答案: