Repository navigation
Feature: class-based Component API #85
Description
Activity
Now it seems that we can support it without any internal modification!
Maybe we can publish a
@fre/componentpackage?or
fre/compoentlikepreact/hooks?Now it seems that we can support it without any internal modification!
Well, almost - not quite.
You do have to replace your class-definitions before using them:
class Button extends Component { // ... } Button = useComponent(Button) // <-- ✨ replace class with function!
So at the moment this only works for individual components.
If you were to import an existing component that uses other components, that's not going to work, because the JSX references classes... unless we create an extended version of
hwith the class-check and call touseComponentbuilt-in as explained above. Which is totally doable btw. 😁or
fre/compoentlikepreact/hooks?That's what I was thinking. 🙂
Well, quite a few details left to figure out first, but we'll see.
Do I need to give you the repo permission?
Not now - this is just a prototype, let's wait until we have a finished implementation and tests.
Reacted by 伊撒尔, Jin Yao and tangoboy
Should we add support for the class-based
ComponentAPI?This could also be implemented as a separate package - and, interestingly, would work with React/Preact as well, enabling them to use hooks in render-methods too.
Here's a working prototype:
https://codesandbox.io/s/fre-component-i6sbs
For now, the prototype requires manually calling a
useComponentfunction to wrap a Component subclass to a function using only hooks. (We might consider integrating this in thehfunction, where you could check if e.g.type.prototype.renderis present, which it is on Component subclasses, but isn't on functional components.)Features supported so far:
constructor(props)componentDidMount()componentWillUnmount()propsstaterender()forceUpdate()static defaultPropsstatic displayNamesetState(state, callback)setState(function, callback)shouldComponentUpdate(nextProps, nextState)componentDidUpdate(prevProps, prevState, snapshot)static getDerivedStateFromProps(props, state)static getDerivedStateFromError(error)componentDidCatch(error, info)getSnapshotBeforeUpdate(prevProps, prevState)