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只会在每次组件渲染时的时候,执行一次。

  

  

猜你喜欢

转载自www.cnblogs.com/minorf/p/12912220.html