reactjs - 将类组件转换为功能组件

Question

这里是 https://codepen.io/vasilly/pen/LkZKzj 的一些代码示例
我试图弄清楚如何将 Main 类更改为功能组件，但我被困在如何转换

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

在第 72 - 76 行。
有没有人对如何做到这一点有任何建议？我是新来的 react 并试图找出最好的方法来做到这一点。

Answer 1

状态方法可以替换为 React hooks ，具体来说，the useState hook
我建议您查看文档，但要记住的要点是

没有this (所以没有 .bind(this) !)

一切都是函数

和钩子(Hook)的规则

钩子(Hook)只能从 react 函数调用(不能从普通的 js 函数调用)。即从功能组件中调用它们，或者其他钩子(Hook)

Hook 必须始终以相同的顺序调用，这意味着您不能有条件地调用 Hook (如在 if 内)或循环中)。因此，它们也必须在组件的“顶级”级别中调用(意味着它们不能在组件中定义的函数内调用)

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

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

唯一参数是您所在州的初始值。这个是可选的，如果没有提供默认值，则与提供 undefined相同。 .
可以看到，它返回了一个包含两个元素的数组，我们这里做的是解构；这和做的一样

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

这意味着您可以命名任何您想要的变量。
现在， displayCategory是您的实际状态值。您可以像使用 this.state.displayCategory 一样使用它.和 setDisplayCategory是让您更新状态的功能。
要记住的区别之一是在 Hook 中更新状态的函数。将覆盖整个状态 - 意味着没有像在类里面那样合并状态。这对于对象尤其重要。所以像这样

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 } 复杂状态建模
在钩子(Hook)之前，你只能有一种状态。因此，您想要存储在您的状态中的所有内容都必须属于这个唯一的对象。但是，使用钩子(Hook)，您可以拥有多个状态。例如，按照你的代码，你可以有这样的东西

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

考虑到这一点，以及属性不会自动合并的事实，将更改在一起的状态对象/变量/属性分组在同一个 useState 下很方便。目的。这提供了更大的灵 active ，尤其是在将状态的不同部分传递给不同的子组件时 - 当这些组件的 Prop 不改变时，您可以节省一些重新渲染