Question

下面是https://codepen.io/vasilly/pen/LkZKzj

处的一些代码示例

我试图弄清楚如何将Main类更改为功能组件，但是我仍然坚持如何转换

setCategory(category) {
    this.setState({
      displayCategory: category
    });
  }

第72-76行。

有人对如何做到这一点有任何建议吗？我是新来的反应者，正试图找出最好的方法。

Answer 1

状态方法可以替换为React hooks，特别是the useState hook

我建议您检查文档，但要记住的要点是

没有this（所以没有.bind(this)！）
一切都是功能

和钩子规则

挂钩只能从react函数中调用（不能从普通js函数中调用）。也就是说，从功能组件或其他挂钩中调用它们
钩子，这意味着您不能有条件地调用钩子（例如在if内部）或循环调用。因此，还必须在组件的“顶层”调用它们（也就是说，不能在组件中定义的函数内部调用它们）

牢记这一点，让我们看看如何替换状态。为此，您可以使用useState钩子。

const [displayCategory, setDisplayCategory] = useState('all');

唯一参数是您所在州的initialValue。这是可选的，如果未提供默认值，则与提供undefined相同。
如您所见，它返回一个包含两个元素的数组，我们在这里正在进行结构分解；和做一样

const stateHook = useState('all')
const displayCategory = stateHook[0]
const setDisplayCategory= stateHook[1]

这意味着您可以命名任何想要的变量。现在，displayCategory是您的实际状态值。您可以像使用this.state.displayCategory一样使用它。 setDisplayCategory是使您能够更新状态的功能。

要记住的区别之一是，用钩子更新状态的功能将覆盖整个状态-意味着没有类中的状态合并。这对于对象尤其重要。像这样

const [state, setState] = useState({ foo: 1, baz: 2 })
// later in one event
setState({ baz: 3 })

在那里，在下一个渲染中，state的值将为{ baz: 3 }-前一个丢失了

为了保留状态，从useState返回的数组中的第二个参数（即setState，setDisplayCategory或您所谓的名称）在其中接受回调您可以手动进行属性合并。像这样

setState(prevState => ({ ...prevState, baz: 3 })

现在，在下一个渲染中，您的状态值为{ foo: 1, baz 3 }

建模复杂状态

在挂接之前，您只能具有一种状态。因此，您要在状态中存储的所有内容都必须属于此唯一对象。但是，使用钩子可以具有 multiple 状态。例如，遵循您的代码，您可能会遇到类似的情况

const [displayCategory, setDisplayCategory] = useState('all')
const [products, setProducts] = useState([])
const [myComplexObject, setMyComplexObject] = useState({ foo: 1, baz: 2, bar: [1, 2, 3] })

考虑到这一点，并且属性不会自动合并，因此将在同一useState对象下一起更改的状态对象/变量/属性组合在一起很方便。这样可以提供更大的灵活性，尤其是在将状态的不同部分传递给不同的子组件时-当这些组件的道具不变时，您可以节省一些报废

Answer 2

在功能组件中，您具有可以用于此目的的钩子。您可以使用useState()初始化状态变量。在功能组件中，代码片段看起来像这样-

const [displayCategory, setDisplayCategory] = useState('defaultStateValue');
const setCategory = (category) => {
    setDisplayCategory(category);
}

在上面的代码片段中，您只是在使用useState()钩子初始化状态变量和状态变量设置器函数。然后，调用setDisplayCategory()并向其传递您希望将状态变量displayCategory更新到的参数。您应该以类似的方式初始化Main组件中的所有其他状态变量。

您应该在此处更多了解钩子-https://reactjs.org/docs/hooks-intro.html，并熟悉它们，因为它们经常会在功能组件中使用，

将类组件转换为功能组件

2 个答案: