Estoy tratando de entender cómo implementar el gancho useState usando Javascript puro. y pegué en la parte donde se usa el cierre.
aquí está el código.
const React = (function () { let hooks = []; let idx = 0; function useState(initVal) { const _idx = idx; console.log(_idx) // 0, 1 const state = hooks[idx] || initVal; const setState = newVal => { hooks[_idx] = newVal; }; idx++; return [state, setState]; } function render(Component) { idx = 0; const C = Component(); C.render(); return C; } return { useState, render }; })(); function Component() { const [count, setCount] = React.useState(1); const [text, setText] = React.useState('apple'); return { render: () => console.log({ count, text }), click: () => setCount(count + 1), type: (word) => setText(word), } } var App = React.render(Component); // {count: 1, text: "apple"} App.click(); var App = React.render(Component); // {count: 2, text: "apple"} App.type('pear'); var App = React.render(Component); // {count: 2, text: "pear"}Cuando se llama a la función setState (hacer clic o escribir), actualiza el valor de la matriz de ganchos de acuerdo con su índice, que es 0 para contar y 1 para texto.
¿Qué significa que la función setState dentro de useState recuerda el valor de _idx de cada estado (recuento y texto) mediante el cierre de javascript?
¿Qué significa que la función setState dentro de useState recuerda el valor de _idx de cada estado (recuento y texto) mediante el cierre de javascript?
Sí. Cuando se llama a useState , obtiene el siguiente índice disponible usando idx y lo almacena en la constante _idx . La función setState devuelta forma un cierre por lo que recuerda el _idx correspondiente a su estado aunque useState haya terminado de ejecutarse.
Me pegué en la parte donde se usa el cierre.
Otros lugares donde se usa el cierre:
useState y render dentro del módulo React forman un cierre sobre hooks e idx . Por lo tanto, las funciones pueden leer/escribir en estas variables incluso después de que React (una vida) haya terminado de ejecutarse.render , hacer click y type funciones forman un cierre. El método render se cierra sobre Component . Por lo tanto, puede acceder al count y al text incluso después de que la función Component haya terminado de ejecutarse. De manera similar, click y type desde un cierre y, por lo tanto, puede invocar las funciones setCount y setText que se definieron dentro del alcance Component .