zoukankan      html  css  js  c++  java
  • React函数组件模拟生命周期(useEffect)

    React Hooks提供React.useEffect来解决函数组件没有生命周期的问题

    React.useEffect(fn,?)第一个参数是特定实时机执行的回调函数,第二个参数是指依赖项

      1.模拟componentDidMount第一次渲染

    useEffect(() => {
        console.log('');
    }, []) // 第二个参数为空时只会在第一次渲染时执行
    

      2. 模拟componentDidUpdate

    useEffect(() => {
        console.log('n变化了');
    }, [n]) // 第二个参数为要监听的数据

    不传第二个参数,则会在 state 的任意一个属性改变时,组件每渲染一次,都会触发该函数回调
    useEffect(() => { console.log('任意属性变化'); })

      3,模拟componentWillUnmount

    通过函数里返回函数的方式

    useEffect(() => {
        console.log('任意属性变了');
        return () => {
            console.log('该组件要销毁了');
        }
    })
    

      useEffect返回值是一个函数,在组件卸载前执行,或每次副效应函数重新执行之前执行

    注意:多个副效应

  • 相关阅读:
    java基础(4)--javadoc文档与命令
    java基础(3)--pulic class与class的区别
    java基础(2)--main方法讲解
    java基础(1)--注释
    shell 测试文件状态运算符
    shell 算术运算符
    linux free命令详解
    shell 基本语法
    linux vim编辑器优化
    linux shell介绍
  • 原文地址:https://www.cnblogs.com/caimengting/p/15277168.html
Copyright © 2011-2022 走看看