Preface: Why do I write this article? When I was learning React hooks, MY understanding of setState was not very advanced. After more than a year of development, I happened to see an organization explaining useState, which changed my understanding of useState. The idea emerged that there was something wrong with what I learned or what others told me, which led to this article

  • Let’s look atreact useStateThe use of the
const [m, setM] = useState(0);

return (
    <div>
        <div>m: {m}</div>
        <button onClick={()= > setM(m+1)}>+1</button>
    </div>
)
Copy the code

Problem: if the setM() method changes m or a new value to replace m when clicking on the onClick event, then implement one yourself to find out

  • Now let’s implement a simple oneuseState
    function App() {
    
        function myUseState(inintValue) {
           let upDateValue = inintValue;
           
           function setValue(newValue) {
               upDateValue = newValue;
           }
        
           return[upDateValue, setValue]; }}Copy the code

The above code has a problem with the default value every time the myUseState method upDateValue is executed, so let’s improve it

    let _state;
    const render = () = > ReactDOM.render(<App />.document.getElementById(('root')))
    function App() {
    
        function myUseState(inintValue) {
           _state = _state === undefined ? inintValue : _state;
           
           function setValue(newValue) {
               _state = newValue;
               render();
           }
        
           return[upDateValue, setValue]; }}Copy the code
  • Here’s an easy oneuseStateSo I’ve implemented it and now let’s see what it looks like

Here’s the initialized value, so let’s go ahead and click on the run

Ps: This writing method for many useState will certainly have asked, in the improvement

    let _state = [];
    let index = 0;
    const render = () = >  ReactDOM.render(<App />.document.getElementById(('root')))
    function App() {
        function myUseSTate(initValue) {
            const currentIndex = index;
            index += 1;
            
            _state[currentIndex] = _state[currentIndex] || initValue;
            
            function setValue(newValue) {
                _state[currentIndex] = newValue;
                render();
            }
            return[_state[currentIndex], setValue]; }}Copy the code

There’s a problem with the code writing here, the setValue of the value has changed, but the page hasn’t been updated, and the real reason is because after the setValue has been set, you need to reset the index, so I’m going to fix that

    let _state = [];
    let index = 0;
    const render = () = >  ReactDOM.render(<App />.document.getElementById(('root')))
    function App() {
        function myUseSTate(initValue) {
            const currentIndex = index;
            index += 1;
            
            _state[currentIndex] = _state[currentIndex] || initValue;
            
            function setValue(newValue) {
                _state[currentIndex] = newValue;
                render();
                index = 0;
            }
            return[_state[currentIndex], setValue]; }}Copy the code

React useState = const [n, setN] = useState(0), not const [n, setN, SetN] = useState(‘n1’, 0), also explains why hooks cannot appear in conditional statements

Last but not least: The actual index inside react is a property on the fiber object. You know what the current useState order is based on this property