在 React 中，我们可以将组件编写为纯函数。然而，这样做的问题是你不能将它用作有状态组件，因为它缺少生命周期钩子和状态。所以，我想知道是否有任何方法可以在不使用类的情况下创建有状态的组件。
我发现的东西是createClass助手。但是，React 已经将这个帮助器移到他们自己的发布包中15.5.0，链接。此外，他们建议您将它们迁移到 JavaScript 类，因为类现在是在 React 中创建组件的首选方式。因此，我认为使用这个助手不是一个好主意。
另一方面，Facebook 推荐使用高阶组件 (HOC)，这是 React 中用于重用组件逻辑的高级技术。HOC 本身不是 React API 的一部分。它们是从 React 的组合性质中出现的一种模式。但是，我找不到一种方法来创建没有类的通用有状态组件。
有没有人经历过这个？有没有办法将 React 用作一些纯函数式解决方案？
一个新功能支持这一点，称为 React 钩子。从文档：
Hooks 是 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
在不使用类的情况下编写有状态的组件绝对是几个开发人员的选择。我建议使用'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)
也许react实例可以变得方便。看看下面的例子。
在局部变量中保存状态：
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)
},
}
})
我尝试创建一个名为 Comp 的简单有状态组件，而不使用 es6 类。
基本上，我将 Comp 函数的原型（我们的有状态组件）链接到 React.Component 的原型对象，并将 Comp 的 props 传递给它以正确初始化它。之后，您可以在 Comp.prototype 上使用 React.Component 对象的每个函数。我用了一些只是一个例子。我不知道这是否是使用 react 的“最 javascript”方式中的最佳方式