美文网首页
React-Hooks之保存状态和生命周期

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

作者: Guow110 | 来源:发表于2021-09-14 10:23 被阅读0次

1.保存状态(useState)


import React, { useState } from 'react';

function Example() {
  // 创建一个保存 count 的 state,并给初始值 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  );
}
  • useState(initialState) 的参数 initialState 是创建 state 的初始值,它可以是任意类型,比如数字、对象、数组等等。
  • useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值,第二个则是用来设置这个 state 的值。在这里要注意的是,state 的变量(例子中的 count)是只读的,所以我们必须通过第二个数组元素 setCount 来设置它的值。
  • 如果要创建多个 state,那么我们就需要多次调用 useState。比如要创建多个 state.

state中永远不要保存可以通过计算得到的值

2.执行副作用(useEffect)


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

function BlogView({ id }) {
  // 设置一个本地 state 用于保存 blog 内容
  const [blogContent, setBlogContent] = useState(null);

  useEffect(() => {
    // useEffect 的 callback 要避免直接的 async 函数,需要封装一下
    const doAsync = async () => {
      // 当 id 发生变化时,将当前内容清楚以保持一致性
      setBlogContent(null);
      // 发起请求获取数据
      const res = await fetch(`/blog-content/${id}`);
      // 将获取的数据放入 state
      setBlogContent(await res.text());
    };
    doAsync();
  }, [id]); // 使用 id 作为依赖项,变化时则执行副作用

  // 如果没有 blogContent 则认为是在 loading 状态
  const isLoading = !blogContent;
  return <div>{isLoading ? "Loading..." : blogContent}</div>;
}
  • 每次 render 后执行:不提供第二个依赖项参数。比如useEffect(() => {})。
  • 仅第一次 render 后执行:提供一个空数组作为依赖项。比如useEffect(() => {}, [])
  • 第一次以及依赖项发生变化后执行:提供依赖项数组。比如useEffect(() => {}, [deps])
  • 组件 unmount 后执行:返回一个回调函数。比如useEffect() => { return () => {} }, [])

3.注意事项

  • Hooks 只能在函数组件的顶级作用域使用,所谓顶层作用域,就是 Hooks 不能在循环、条件判断或者嵌套函数内执行,而必须是在顶层。
  • Hooks 只能在函数组件或者其它 Hooks 中使用

个人学习记录,侵权可删

相关文章

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

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

  • useState

    react-hooks 如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook...

  • react 整体疑问

    组件该如何拆分react 相关 什么时候选择react-hooks react生命周期 哪些will被替换 g...

  • Android基础(2)Fragment详解

    (1)fragment各种情况下的生命周期(2)Fragment状态保存 startActivityForResu...

  • 线程的生命周期状态

    java中线程的生命周期分为6种状态。Thread 类有一个实例属性和一个实例方法专门用于保存和获取线程的状态。其...

  • Android基础 - Activity

    目录 生命周期 Activity保存当前状态 Activity之间的跳转 Activity 参数 回传 启动模式 ...

  • 三之番外.问题详解

    对一些资源以及状态的操作保存,最好是保存在生命周期的哪个函数中进行( )A onPause()B onCre...

  • Android简单的面试题

    选择题 1.activity对一些资源以及状态的操作保存,最好是保存在生命周期的哪个函数中进行( a ) a.o...

  • Android 入门学习指南

    思维导图 基础知识 四大组件 Activity掌握生命周期、IntentFilter、启动模式、页面状态保存与恢复...

  • react-hooks

    react-hooks react-hooks 是react16.8以后,react新增的钩子API,目的是增加代...

网友评论

      本文标题:React-Hooks之保存状态和生命周期

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