如何更新函数 React 返回的值（useState 实现）

Question

假设我有这样一个东西，函数返回值和setter函数，我如何正确实现setter函数来更新返回值，每次调用它？ （比如 useState 的返回值和 updater 函数）

 const myFunction = (initialValue) => {
     let value = initialValue;
     const setterFunction = (newValue) =>{
         value= newValue;
     }
      forceRerender() //function that forces re-renders 
     return [value,setterFunction];
 }
 const [myValue,updaterFunc] = myFunction('someValue');
 updaterFunc('newValue'); // myValue's new Value should be 'newValue'

Answer 1

如果你想重新实现 React 是如何实现的，你将不得不让 setter 函数导致整个块再次运行 - 类似于以下内容：

 const state = []; const App = () => { let stateIndex = 0; // This variable keeps track of the sequential calls to `myFunction` // (Needed if myFunction gets called multiple times) const myFunction = (initialValue) => { // Assign initial value if it doesn't exist yet if (!state.hasOwnProperty(stateIndex)) state[stateIndex] = initialValue; const value = state[stateIndex]; // Need to create a closure over the current state index... const closureStateIndex = stateIndex; const setterFunction = (newValue) => { state[closureStateIndex] = newValue; // Re-run the entire function asynchronously: setTimeout(App); }; // Increment state index to allow for additional calls to myFunction stateIndex++; return [value, setterFunction]; } const [myValue, updaterFunc] = myFunction('initialValue'); // Call updater only on initial render: if (myValue === 'initialValue') { updaterFunc('newValue'); // myValue's new Value should be 'newValue' } console.log('Rendering. Current value is:', myValue); }; App();

这有点类似于 React 的做法。

对于具有多个状态变量并将myFunction重命名为useState ：

 const state = []; const App = () => { let stateIndex = 0; const useState = (initialValue) => { if (!state.hasOwnProperty(stateIndex)) state[stateIndex] = initialValue; const value = state[stateIndex]; const closureStateIndex = stateIndex; const setterFunction = (newValue) => { state[closureStateIndex] = newValue; setTimeout(App); }; stateIndex++; return [value, setterFunction]; } const [name, setName] = useState('bob'); const [age, setAge] = useState(5); if (age === 5) { setAge(10); } console.log('Rendering. Current name and age is:', name, age); }; App();