React useState和useEffect

使用 useState()

1. useState 接收一个参数来作为它的state，也可以没有state。
2. useState返回一个数组，其中包含当前state和更新state的函数，我们可以使用数组解构语法来命名useState的返回值。

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

---

使用 useEffect()

官网参考 https://zh-hans.reactjs.org/docs/hooks-effect.html
**什么是副作用？**数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。

**useEffect有什么作用？**useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

**每次渲染useEffect会执行吗？**是的，默认情况下它会在组件每次更新渲染的时候都会执行，包括组件第一次创建的时候。

import React, { useState } from 'react';

function Example() {
    const [num,setNum] = useState(0);

    useEffect(() => {
        //每次num+1的时候，effect都会执行
        document.title = num
    })
    return (
        <div>
            <div>{num}</div>
            <button onClick={()=>setNum(num+1)}>加一</button>
        </div>
    );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

我们还可以在effect中return一个函数用作清除副作用，其相当于class组件中的componentWillUnmount，执行于组件卸载之前。

下面是一个小例子来展示它的作用。

//parent.js
import React,{useState} from 'react'

import Child from './Child'
export default function (){
    const [show,setShow] = useState(true)

    return (
        <div>
            {show?<Child />:null}
            <button onClick={()=>setShow(!show)}>display it</button>
        </div>
    );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

//child.js
import React,{useEffect,useState} from 'react'

export default function (){
    const [num,setNum] = useState(0);

    useEffect(() => {
        document.title = num
        //组件卸载时会执行
        return ()=> document.title = "卸载了"
    })
    
    return (
        <div>
            <div>{num}</div>
            <button onClick={()=>setNum(num+1)}>加一</button>
        </div>
    );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

useEffect还接收一个数组用于判断是否跳过执行。
这是一个简单的例子，我们在数组中放入了一个参数来加以控制只有在show改变的时候才会执行effect。

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

export default function (){
    const [show,setShow] = useState(true)
    const [num,setNum] = useState(0)
    
    useEffect(()=>{
        console.log(num)
    },[show])
    return (
        <div>
            <button onClick={()=>setShow(!show)}>展示一次num</button>
            <button onClick={()=>setNum(num+1)}>num+1</button>
        </div>
    );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

我们还可以放入多个参数，当其中一个改变时，也会执行effect。

useEffect(()=>{
    console.log(num)
},[show,num])
1
2
3

也可以只放一个空数组，effect只会在组件第一次渲染后执行一次。

useEffect(()=>{
    console.log(num)
},[])
1
2
3

原文

https://www.yehger.com/article/58.html