En este ejemplo, tengo esta clase de reacción:
class MyDiv extends React.component constructor(){ this.state={sampleState:'hello world'} } render(){ return <div>{this.state.sampleState} } }La pregunta es si puedo agregar ganchos React a esto. Entiendo que React-Hooks es una alternativa al estilo React Class. Pero si deseo migrar lentamente a los ganchos de React, ¿puedo agregar ganchos útiles a las Clases?
Los componentes de alto nivel son la forma en que hemos estado haciendo este tipo de cosas hasta que aparecieron los ganchos. Puede escribir un envoltorio de componente de alto orden simple para su gancho.
function withMyHook(Component) { return function WrappedComponent(props) { const myHookValue = useMyHook(); return <Component {...props} myHookValue={myHookValue} />; } }Si bien esto no es realmente usar un enlace directamente desde un componente de clase, al menos le permitirá usar la lógica de su enlace desde un componente de clase, sin refactorizar.
class MyComponent extends React.Component { render(){ const myHookValue = this.props.myHookValue; return <div>{myHookValue}</div>; } } export default withMyHook(MyComponent);Los componentes de clase no admiten ganchos -
De acuerdo con Hooks-FAQ :
No puede usar Hooks dentro de un componente de clase, pero definitivamente puede mezclar clases y componentes de funciones con Hooks en un solo árbol. Si un componente es una clase o una función que usa Hooks es un detalle de implementación de ese componente. A más largo plazo, esperamos que los Hooks sean la forma principal en que las personas escriben los componentes de React.
Como ya explican otras respuestas, la API de ganchos se diseñó para proporcionar componentes de función con una funcionalidad que actualmente solo está disponible en componentes de clase. Se supone que los ganchos no deben usarse en componentes de clase.
Los componentes de clase se pueden escribir para facilitar la migración a componentes de función.
Con un solo estado:
class MyDiv extends Component { state = {sampleState: 'hello world'}; render(){ const { state } = this; const setState = state => this.setState(state); return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>; } }se convierte en
const MyDiv = () => { const [state, setState] = useState({sampleState: 'hello world'}); return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>; } Tenga en cuenta que useState state setter no fusiona las propiedades de estado automáticamente, esto debe cubrirse con setState(prevState => ({ ...prevState, foo: 1 })) ;
Con varios estados:
class MyDiv extends Component { state = {sampleState: 'hello world'}; render(){ const { sampleState } = this.state; const setSampleState = sampleState => this.setState({ sampleState }); return <div onClick={() => setSampleState(1)}>{sampleState}</div>; } }se convierte en
const MyDiv = () => { const [sampleState, setSampleState] = useState('hello world'); return <div onClick={() => setSampleState(1)}>{sampleState}</div>; }