React Hook入门系列（2）-- useEffect

72 阅读 0 评论 48 点赞

我是靠谱客的博主成就舞蹈，最近开发中收集的这篇文章主要介绍React Hook入门系列（2）-- useEffect，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

优势

简化组件逻辑
复用状态逻辑
无需使用类组件编写

so，我们来学习第二个“Hook” - useEffect

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

语法

useEffect(() => {
    // ...
})

示例

import React, { useEffect } from 'react'

function Effect() {
    useEffect(() => {    // 这里包括类组件中的componentDidMount和componentDidUpdate
        console.log('组件状态有变化了')    
    })
    return 'Effect'
}

这里我们对比一下类组件和函数组件

先来看类组件：

import React, { Component } from 'react'

class Effect extend Component {
    state = {
        name: '乌鸦',
        edit: false
    }
    
    setEditState = (edit) => {
        this.setState({
            edit
        })
    }

    componentDidMount() {
        console.log('组件挂载完毕')
    }

    componentDidUpdate() {
        console.log('组件更新完毕')
    }

    render() {
        let { name, edit } = this.state
        renter (
            <div>
                {edit
                    ?
                    <input 
                        type="text"
                        value={ name }
                        onChange={(e) => {    // 受控组件
                            this.setState({
                                name: e.target.value
                            })
                        }}
                        onBlur={() => {    // 失去焦点  隐藏输入框
                            this.setEditState(false)
                        }}
                    />
                    :
                    <Txt name={ name } setEdit={ this.setEditState } />
                }
            </div>
        )
    }
}

class Txt extends Component {
    componentWillUnmount() {
        console.log('组件卸载完成')
    }

    render() {
        let { name, setEdit } = this.props
        return (<div>
            name：{ name }
            <a onClick={() => {
                setEdit(true)
            }}>编辑</a>
        </div>)
    }
}

函数组件：

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

function Effect() {
    const [ name, setName ] = useState('乌鸦')
    const [ edit, setEdit ] = useState(false)
    // name 初始化 和 更新
    useEffect(() => {
        console.log('name有改变')
    }, [name])
    return (<div>
        {edit
            ?
            <input 
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value)
                }}
                onBlur={() => {
                    setEdit(false)
                }}
            />
            :
            <Txt name={name} setEdit={setEdit} />
        }
    </div>)
}

function Txt(props) {
    let { name, setEdit } = props
    useEffect(() => {
        console.log('Txt组件挂载完成')
        return () => {
            console.log('Txt组件卸载完成')
        }
    }, [])
    return (<div>
        name：{ name }
        <a onClick={() => {
            setEdit(true)
        }}>编辑</a>
    </div>)
}

总结

如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。如果你传入了一个空数组（[]），effect 内部的 props 和 state 就会一直拥有其初始值。尽管传入 [] 作为第二个参数更接近大家更熟悉的 componentDidMount 和 componentWillUnmount 思维模式，但我们有更好的方式来避免过于频繁的重复调用 effect。除此之外，请记得 React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得额外操作很方便。