useState是React Hook中声明变量的方法，useState提供了一个获取方法、一个设置方法



import React from 'react'; // useState是React的方法使用useState方法时要提前引入React依赖包

const [state, setState] = React.useState(initalState);


参数

  2. state -> 获取方法，返回的状态 (state
    ) 与默认值 (initalState
    ) 全等
  3. setState -> 设置方法，setState
     函数用于更新 state。它接收一个新的 state
     值并将组件的一次重新渲染加入队列。setState
     是一个函数（setState
    ()），函数中可以传入具体的值，也可以添加一个回调
  • setState(newState);

    setState(() => { return newState; });　

　　3. initalState -> 默认值

　　注意

　　　　React 会确保 ​​setState​​ 函数的标识是稳定的，并且不会在组件重新渲染时发生变化。这就是为什么可以安全地从 ​​useEffect​​ 或 ​​useCallback​​ 的依赖列表中省略 ​​setState​​。

  • import React from "react";const App = () => { const [state, setState] = React.useState("hello world"); console.log(state); // hello world React.useEffect(() => { setState("hello hook"); }, []); console.log(state); // hello hook return <div></div>; };
    useEffect 和 useCallback 都可以接收两个参数，分别是方法回调和依赖项数组，依赖项的作用是当发生改变时，方法的回调会执行，所以因为 setState 的函数表示稳定不会发生变化，所以值不会发生变化，依赖没有意义
    在 CodeSendBox 上尝试

 惰性初始 state

　　 initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

  • import React from "react";const App = () => { const [state] = React.useState(() => { const num = 1 + 1; return num; }); console.log(state); // 2 return <div></div>; };

　　 　　　 此时useState中的回调函数使用来为state设置默认值，所以一定要用return语句将结果返回出去，否则state值仍为undefined，回调函数无意义

 　　　　    ​​在 CodeSendBox 上尝试​​