React-useState

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

useState(initialState)

useState(initialState)返回一个数组, 其中第一项是状态值, 第二项是一个更新状态的函数.

返回的第一项和第二项的关系就相当于是state和setState

const [state, setState] = useState(initialState

后续要是需要更新组件的状态, 就用setState(newState)

下面以计数器为例子 count, setCount

<div id="test"></div>
<script type="text/babel">
    function Counter() {
        const [count, setCount] = React.useState(0);
        return (
            <button onClick={()=>setCount(count + 1)}>{count}</button>
        );
    }
    ReactDOM.render(<Counter/>,document.getElementById('test'))
</script>

this.setState做的是合并状态后返回一个新状态，而useState是直接替换老状态后返回新状态。

useState是可以多次调用的::useState无论调用多少次，相互之间是独立的。::

原因是react是根据useState出现的顺序来定的。

//第一次渲染
  useState(42);  //将age初始化为42
  useState('banana');  //将fruit初始化为banana
  useState([{ text: 'Learn Hooks' }]); //...

  //第二次渲染
  useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
  useState('banana');  //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
  useState([{ text: 'Learn Hooks' }]); //...

但是如果掺杂了if或者for语句就有可能导致hooks顺序不一致

::鉴于此，react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。::