沒有類的React狀態組件

Question

在React中，我們可以將組件編寫為純函數。 但是，問題在於，由於缺少生命周期掛鈎和狀態，因此無法將其用作有狀態組件。 所以，我想知道是否有任何方法可以在不使用類的情況下創建有狀態組件。

我發現的東西是createClass幫助器。 但是，React已經在15.5.0 鏈接中將這個幫助器移動到他們自己的包中。 此外，他們建議您將它們遷移到JavaScript類，因為類現在是在React中創建組件的首選方法。 因此，我不認為使用這個助手可能是一個好主意。

另一方面，Facebook建議使用高階組件（HOC），這是React中用於重用組件邏輯的高級技術。 HOC本身不是React API的一部分。 它們是React組成性質的一種模式。 但是，我找不到一種方法來創建沒有類的公共有狀態組件。

有沒有人經歷過這個？ 有沒有辦法將React用作一些純功能解決方案？

Answer 1

一個新功能支持這個，稱為React鈎子。 從文檔 ：

Hook是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類。

這是代碼

基本上我將Comp函數的原型（我們的有狀態組件）鏈接到React.Component的原型對象，然后我傳遞給它的Comp的props來正確初始化它。 之后，您可以使用Comp.prototype上的React.Component對象的每個函數。 我用了一些例子。 我不知道這是否是“大多數javascript”使用反應方式的最佳方式