Question

在React中，我们可以将组件编写为纯函数。但是，问题在于，由于缺少生命周期挂钩和状态，因此无法将其用作有状态组件。所以，我想知道是否有任何方法可以在不使用类的情况下创建有状态组件。

我找到的是createClass助手。但是，React已将此助手移至版本15.5.0，link中的自己的包中。此外，他们建议您将它们迁移到JavaScript类，因为类现在是在React中创建组件的首选方法。因此，我认为使用这个助手不是一个好主意。

另一方面，Facebook建议使用高阶组件（HOC），这是React中用于重用组件逻辑的高级技术。 HOC本身不是React API的一部分。它们是React组成性质的一种模式。但是，我找不到一种方法来创建没有类的公共有状态组件。

有没有人经历过这个？有没有办法将React用作一些纯功能解决方案？

Answer 1

一项新功能支持此功能，称为React挂钩。来自documentation：

挂钩是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。

一个简单的例子：

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

有关如何使用生命周期的示例，请查看useEffect

Answer 2

在不使用类的情况下编写有状态组件绝对是几个开发人员的选择。我建议使用'recompose'，它具有很好的简单实现，可以在没有类的情况下编写有状态的组件，但是应用本地和本地的状态。这是一个例子：

import compose from 'recompose/compose'
import withState from 'recompose/withState'
import withProps from 'recompose/withProps'

Pure.js

function MyComponent(props) ({

  local: { prop1, prop2 },
  setProp1 
})

  return <div>{prop1}</div>
}

const defaultState = {
  prop1: false,
  prop2: false
}

const enhance = compose(
  withState('local', 'updateLocal', defaultState),
  withProps(({ local: { prop1, prop2 }, updateLocal }) => ({
    setProp1: (newValue) => updateLocal(state => ({...state, prop1: newValue }))
  })))

export default enhance(MyComponent)

Answer 3

也许react-instance可以变得方便。看看下面的例子。

在本地变量中保存状态：

import React from "react"
import instance from "react-instance"

const App = instance(({ forceUpdate }) => {
  let time = 0

  const timer = setInterval(() => {
    time++
    forceUpdate()
  }, 100)

  return {
    render() {
      return time
    },
    unmount() {
      clearInterval(timer)
    },
  }
})

在组件状态中保存状态：

import React from "react"
import instance from "react-instance"

const App = instance(instance => {
  instance.state = { time: 0 }

  const timer = setInterval(() => {
    instance.setState({ time: instance.state.time + 1 })
  }, 100)

  return {
    render() {
      return instance.state.time
    },
    unmount() {
      clearInterval(timer)
    },
  }
})

Answer 4

我尝试创建一个简单的有状态组件Comp，而不使用es6类。

Here is the code

基本上，我将Comp函数的原型（我们的有状态组件）链接到React.Component的原型对象，然后向下传递给Comp的props以正确初始化它。之后，您可以在Comp.prototype上使用React.Component对象的每个函数。我仅举了一个例子。我不知道这是否是使用“最javascript”反应的最佳方法

没有类

4 个答案: