React HookAPI useState()

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

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

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

参数

1. state -> 获取方法，返回的状态 (state) 与默认值 (initalState) 全等
2. 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 上尝试

原文：https://www.cnblogs.com/Function-cnblogs/p/15056531.html