useState

作者: 未路过 | 来源:发表于2022-11-01 10:06 被阅读0次

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给返回回来。相当于返回的第一次值被重新定义了。

相关文章

  • React Hooks——useState的源码流程

    React Hooks——useState 源码版本 16.8 useState 流程示意图 从useState源...

  • React Hooks

    一.useState 提示: useState 最好是在最顶层调用, 组件每次渲染的 useState 数量必须...

  • React Hooks

    一.useState hooks就是在函数组件中使用state通过useState实现的。 useState传入一...

  • 01-React-hooks-useState基本使用

    React-hooks-useState useState的基本用法 格式: 初始状态 useState的第一个参...

  • React-Hooks之保存状态和生命周期

    1.保存状态(useState) useState(initialState) 的参数 initialState ...

  • useState 实现原理

    useState 熟悉hooks的都知道,最常用的useState 大概用法 简单的实现一个useState 先模...

  • hook useEffect

    useState 最简单的 useState 用法是这样的:function Counter() { var [...

  • 常用React Hooks 方法

    useState 使用状态 const [n, setN] = React.useState(0)const [u...

  • reactHooks的使用

    useState的使用 在reactHooks中useState代替了原本的state,const [age,se...

  • Hooks

    useState 说明: 通过useState来定义数据,以及修改方式(即:set方式) 如上:loading即为...

网友评论

      本文标题:useState

      本文链接:https://www.haomeiwen.com/subject/sjfjtdtx.html