zoukankan      html  css  js  c++  java
  • React Hooks的useState和useEffect

    一、useState

      在React组件类中,声明变量的方法是在constructor中this.state={ 变量名:值 },比如什么一个count变量,this.state={ count:0 },修改count的方法是this.setState({count:1})

      在Hooks中,声明一个变量的方法是:

      const  [  state,  setState  ]  =  useState( initialState )

      state:你要声明的变量

      setState:修改state值的方法

      initialState:传入唯一的参数,可以是数字,字符串等,也可以是对象或者数组。

      想要更改变量的值,直接setState(value)就可以实现。例如:setState(1),此时count的值为1。

      想要展示count,不需要{this.state.count},直接{count}即可展示

      完整的useState栗子如下:

      

      两种改变方式都可以,一般采用第二种简便方式。

       点击前count的值为0:

      点击后count的值为1:

     二、useEffect

      之前很多具有副作用的操作,例如网络请求,修改 UI 等,一般都是在 class 组件的 componentDidMount 或者 componentDidUpdate 等生命周期中进行操作。而在函数组件中因为没有这些生命周期的概念,所以使用useEffect来执行副作用的操作。

      useEffect的语法为:

      useEffect(() => {
          doSomething
        }, [input])

       useEffect有两个参数,第一个参数是一个函数,是在第一次渲染以及之后更新渲染之后会进行的副作用。第二个参数是可选参数,是一个数组,数组中存放的是第一个函数中使用的某些副作用属性。用来优化 useEffect。

      简单的栗子如下:

      

       当我们每次点击按钮的时候,useEffect都会输出一次count

      

      如果我们只想让count在每次组件渲染时的时候,输出一次,这时候就要用到useEffect的第二个参数,将第二个参数设置为一个空数组[ ]。 这告诉React你的 useEffect 不依赖于来自 props 或 state 的任何值,所以它永远不需要重新运行。此时只会输出一次count,并不会因为点击按钮而一直输出。

      

       如果我们想在点击按钮的时候,也输出count,这个时候就需要在第二个参数中加上count。这样就可以一直输出count

      

       总的来说,根据不同的需求,设置useEffect的第二个参数。只想执行一次时,设置为空数组[]。需要根据某个变量改变时,就将该变量增加到数组中。当然,useEffect也可以写多个,根据不同的情况分别管理你所写的函数。举个栗子:

      

       如上图,第一个useEffect会在每次组件渲染时执行,并且count和test改变的时候,再次执行。第二个useEffect只会在每次组件渲染时的时候,执行一次。

      

      

  • 相关阅读:
    洛谷P3620 [APIO/CTSC 2007] 数据备份
    洛谷P2744 量取牛奶
    洛谷P1560 蜗牛的旅行
    luogu P1776 宝物筛选_NOI导刊2010提高(02)
    luogu P1020 导弹拦截
    luogu P2015 二叉苹果树
    luogu P1137 旅行计划
    树形dp瞎讲+树形dp基础题题解
    luogu P1252 马拉松接力赛 P1803 凌乱的yyy / 线段覆盖
    luogu P1196 [NOI2002]银河英雄传说
  • 原文地址:https://www.cnblogs.com/minorf/p/12912220.html
Copyright © 2011-2022 走看看