1. useState解析

 useState来自react，需要从react中导入，它是一个hook；
✓ 参数：初始化值，如果不设置为undefined；
✓ 返回值：数组，包含两个元素；
➢ 元素一：当前状态的值（第一调用为初始化值）；
➢ 元素二：设置状态值的函数；
 点击button按钮后，会完成两件事情：
✓ 调用setCount，设置一个新的值；
✓ 组件重新渲染，并且根据新的值返回DOM结构；
◼ 相信通过上面的一个简单案例，你已经会喜欢上Hook的使用了。
 Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；
◼ 但是使用它们会有两个额外的规则：
 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。

2.理解

通过第二个返回值修改state，这时候函数就会重新执行，所以里面的return 就会重新渲染。重新执行的时候，useState（0）这个初始化值，只有在组件第一次渲染的时候才有效果，第二次执行函数的时候，就会把新的状态赋值给第一个返回值（会执行useState，但不会初始化值，作用就算把上次保存的状态勾入进来），就算当前的状态值。后面再使用第一个返回值的化，就算新的状态的值了，比如return后面渲染dom的化，里面的count就算新的值。
项目中，我们子组件必须要有一个接受props的初始值，然后保存为自己的state，
但是props第一次传进来的是一个空对象
useState（undefined）的化，还是不行。
所以我们得确保第一次调用子组件函数的时候，props一定有值，所以再父组件中，我们就使用了&&
在有值的情况下再去渲染子组件。

3.hook

1. Hook 就是 JavaScript 函数，这个函数可以帮助你 钩入（hook into） React State以及生命周期等特性；
2. 使用useState这个函数就是把你之前保存的状态勾入到你现在的这个组件里面。因为组件里面自己不能保存自己的状态。比如在函数里面定义let message="hello world"，然后再点击事件里面修改，就算能重新执行函数，下次执行函数还是会被重新执行，没有改变。
   useState（）这个hook就是在另外一个地方给你保存好状态，下次函数再执行的时候，把这个状态勾入进来。

4.总结

useState（）
执行分两步
1.初次执行，初始化state的值，返回第一个是初始化状态，第二个是改变状态的函数
2.第二次执行，将上次的修改后的状态赋值给第一个参数，第二个还是改变状态的函数。
3.第三次同第二次。

 setXxx()2种写法:

 setXxx(newValue): 参数为非函数值, 
直接指定新的状态值, 内部用其覆盖原来的状态值

 setXxx(value => newValue): 参数为函数, 
接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

const [count, setCount] = React.useState(0);
setCount(count + 1)
setCount((count) => count + 1);

5.其他

useState =》勾入状态
useEffect =》 勾入声明周期

6. 注意

1. 只能在函数最外层（顶层）调用 Hook。不要在循环、条件判断或者子函数中调用
   2.不能再类组件使用

比如

import React, { memo, useState } from 'react'

const App = memo(() => {
  const [message, setMessage] = useState("Hello World")
//-->顶层

  if(true){
    const [count, setCount] = useState(100)//不能在循环、条件判断或者子函数中调用。
  }


  function changeMessage() {
    setMessage("你好啊, 李银河!")
  }

  return (
    <div>
      <h2>App: {message}</h2>
      <button onClick={changeMessage}>修改文本</button>
    </div>
  )
})

export default App

import React, { memo, useState } from "react";

const App = memo(() => {
  const [message, setMessage] = useState("Hello World");

  //普通的函数里面不能使用hooks
  function foo() {
    const [count, setCount] = useState(100);
    return count;
  }
  const count = foo();

  function changeMessage() {
    setMessage("你好啊, 李银河!");
  }

  return (
    <div>
      <h2>App: {message}</h2>
      <button onClick={changeMessage}>修改文本</button>
    </div>
  );
});

export default App;

但是在自定义的hooks中可以使用react提供的其他hooks，就算自己定义的函数必须以use开头。
Hook指的类似于useState、
useEffect这样的函数
➢ Hooks是对这类函数的统称；

7. 认识useState

image.png

函数在执行完以后，把return里面的jsx给react返回过去，react拿到这个jsx以后，调用React.createElement,变成React Element，这个会变成虚拟dom，里面定义的changeMessage之类的函数都会消失。但是state里面的状态会被保留下来。
其实const [message, setMessage]=useState("hello world")里面的setMessage这个函数,本质是
react里面保存了setMessage的这个函数，在组件内调用setMessage，实际上调用的是react里面setMessage这个函数，

//react内部
let message = ""
function setMessage(newMessage){
  message = newMessage;
}

一旦setMessage这个方法被调用，函数组件就会重新执行，然后发现这个useState函数，就会把react内部保存的那个message给返回回来。相当于返回的第一次值被重新定义了。