Acabo de aprender a reaccionar y reaccionar de forma nativa durante 3 meses, y estoy muy familiarizado con el componente funcional, de TODO, porque desde el primer paso, ya escribí un "hola mundo" en la función, y hasta ahora, todavía me quedo con la función, porque , leí un blog, y con hooks , las clases de aprendizaje son opcionales, así que decidí centrarme en el componente funcional. Pero cuando empiezo a aprender MobX, me siento un poco confundido y lucho, especialmente con store :
class TodoStore { todos: Todo[] = [] constructor() { makeObservable(this, { todos: observable, unfinishedTodoCount: computed, addTodo: action }) } get unfinishedTodoCount() { return this.todos.filter(todo => !todo.done).length } addTodo(todo: Todo) { this.todos.push(todo) } } Una pregunta tonta, pero ¿cómo se usa el constructor() en el componente funcional? es ese state ? Pero, ¿cómo aplicar con mobX, cómo convertir la clase anterior en función o podemos simplemente usar la función para todo el concepto de mobX?
Por favor ayuda, muchas gracias
La programación funcional sin estado dinámico es solo una gran función que devuelve el mismo valor para los mismos parámetros. En React, tiene un estado que se almacena en la instancia de React, cada vez que usa setState React guarda ese valor para futuros renderizados. está sosteniendo el estado para usted.
En cuanto a MobX, debe crear una instancia de un objeto observable y proporcionar acceso a él a sus componentes, para que puedan cambiarlo/interactuar con él.
La mejor práctica para esto es crear una instancia de objeto a partir de una clase y proporcionar esa instancia a sus componentes a través de la API de contexto. (Lea sobre esto, si no sabe cómo usarlo)
PUEDE crear un objeto JavaScript simple y hacerlo observable usando makeObservable(obj) , pero de nuevo. la mejor práctica es crear una clase y en el constructor llamar a makeObservable(this) .
Aquí hay un ejemplo para una tienda de clase simple:
class AgeStore { @observable age: number = 12; constructor() { makeObservable(this); } @action grow() { this.age++; } }Y así es como inicializaría su aplicación React (debe dividir esto en varios archivos):
const ageStore = new AgeStore(); const AppContext = createContext(null); export function useAgeStore() { return useContext(AppContext); } ReactDOM.render( <AppContext.Provider value={ageStore}> <App />, </AppContext.Provider> document.getElementById('app'), );Y así es como tus componentes funcionales deberían usar la tienda:
export const DemoComp: React.FC = observer(function DemoComp() { const ageStore = useAgeStore(); return <div> <div>The current Age is:{ageStore.age}</div> <button onClick={ageStore.grow()}>Grow</button> </div>; });