React Hooks（useState、useEffect）

一、react hooks（useState）

使用hooks理由：
1、高阶组件为了复用，导致代码层级复杂
2、生命周期的复杂
3、写成functional组件，无状态组件，因为需要状态，又改成了class，成本高

1.1 useState使用

新建functionState.js函数组件，写入：

import React, { useState } from 'react'

export default function FunctionState() {
  
  const [name, setName] = useState('function hooks')   
  const [age, setAge] = useState('88')

  return (
    <div>
        <button onClick={() => {
            setName('React function hooks')
            setAge('100')
        }}>click</button>
        {name} - {age}
    </div>
  )
}

效果：

1.2 hooks案例（useState）

使用hooks做一个todolist：
新建HooksTodolist.js函数组件，写入代码：

import React, { useState } from 'react'

export default function HooksTodolist() {

    let [name, setName] = useState('')
    let [list, setList] = useState(['000', '111', '222'])

    let inputChangeHandle = (event) => {
        setName(event.target.value)
    }

    let btnHandle = () => {
        let newList = [...list]
        setList([...newList, name])
        setName('')
    }

    let delHandle = (key) => {
        let temList = [...list]
        temList.splice(key, 1)
        setList(temList)
    }

    return (
        <div>
            <input value={name} onChange={inputChangeHandle}></input>
            <button onClick={btnHandle}>click</button>
            <ul>
                {list.map((value, key) => {
                    return <li key={key}>{value} <button onClick={(key) => delHandle(key)}>删除</button></li>
                })}
            </ul>
        </div>
    )
}

效果：

---

二、react hooks（useEffect）

useEffect可以支持写注册多个。

2.1 useEffect使用

Effect Hook 可以让你在函数组件中执行副作用操作

新建组件functionUseEffect.js，写入代码：

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

export default function FunctionUseEffect() {

  const [list, setList] = useState([])

  useEffect(() => {
    axios.get('/data.json').then(res => {
        console.log(res.data.data.films)
        setList(res.data.data.films)
    }, err => {
        console.log(err)
    }) 
  }, ['list']) // 传入依赖项

  return (
    <div>
        <ul>
            {list.map((item) => {
                return <li key={item.filmId}>{item.name}</li>
            })}
        </ul>
    </div>
  )
}

可以看到我们在使用useEffect时，第二个参数传入了依赖项，这将有助于函数式组件，实时监听这个值是否改变，如果改变了将会重新触发请求。如果不变的话，将不会去请求。

---

2.2 useEffect模拟销毁

因为我们知道在react中，函数式组件是没有像类组件那样的生命周期，那么在函数式组件中将如何销毁呢。
创建useEffectDestroy.js写入代码：

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

export default class UseEffectDestroy extends Component {
  
    state = {
        flag: true
    }
  
    render() {
      return (
        <div>
            <button onClick={() => {
                this.setState({
                    flag: !this.state.flag
                })
            }}>click</button>
            {this.state.flag && <Child></Child>}
        </div>
      )
    }
  }

function Child() {
    useEffect(() => {
        window.onresize = () => {
            console.log('resize')
        }
        var timer = setInterval(() => {
            console.log(222)
        },1000)


        return () => {
            console.log('组件销毁')
            window.onresize = null;
            clearInterval(timer)
        }
    }, []) // 不传依赖项等于只销毁一次，传入依赖项每次依赖项改变，并且组件销毁都会执行

    return (
        <div>Child</div>
    )
}

效果：


组件销毁后将原先绑定的事件都清除了。

---

2.3 useEffect和useLayoutEffect区别

简单来说就是调用时机不同，useLayoutEffect和原来的componentDidMount & componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染，而useEffect是会在整个页面渲染完才会调用的代码。 官方建议先使用useEffect

在实际使用时如果想避免页面抖动，可以把Dom操作的代码放到useLayoutEffect中。这里的修改会一次性渲染，避免重绘代价。

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。