React 应用 Effect Hook 函数式中操作生命周期-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 应用 Effect Hook 函数式中操作生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React Hook入门小案例在函数式组件中使用state响应式数据给大家演示了最简单的 Hook操作那么我们继续
首先 Hook官方介绍他没有破坏性是完全可选的百分比兼容也就说我们一起的类 class的方式也完全可以用
只要 react 16,8以上就可以使用
Hook本身不会影响你的react的理解恰恰相反官方认为他会让react理解更加容易
至于 Hook的修改动机在于他认为当组件很多时类的方式很不易理解
而且这是一种剪辑式的修改方式比如你的老项目你之前的还是可以继续用class 新的用Hook管理函数式他们之间不会发生冲突
‘
然后我们来说第二个 Effect Hook
’
好那我们来开启代码编写代码如下

import React from "react";
export default class AppRouter extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        name: "小猫猫"
      }
    }

    componentDidMount = ()=>{
      document.title = this.state.name;
    }

    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}

我们在界面写了很普通的案例 Hello World
然后在componentDidMount 页面挂载完毕的生命周期中执行了将页面title内容改为this.state.name的指令
然后运行结果如下
React 应用 Effect Hook 函数式中操作生命周期
没有什么问题

我们可以在页面内容中加这样一个按钮

<button onClick= { ()=>{ this.setState({ name: "大猫猫" }) } }>更改title</button>

React 应用 Effect Hook 函数式中操作生命周期
点击后改变name的值
我们运行代码会发现点击之后 title的值并不会随着点击而变化

但是其实我们心里清楚这肯定是变化了的

那么我们就可以去写

componentDidUpdate() {
    document.title = this.state.name;
}

React 应用 Effect Hook 函数式中操作生命周期

利用 componentDidUpdate 监听数据变化当响应式数据变化重新渲染一次title的内容
React 应用 Effect Hook 函数式中操作生命周期
这次点击后 title的内容也就变化了

其实这样写多少还是有点捞的我们可以用新特性去实现
我们将代码改成这样

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

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");

  /*
    useEffect相当于三个生命周期函数
    分别是
        componentDidMount //元素挂载完成
        componentDidUpdate //响应式数据更改
        componentWillUnmount  //组件销毁前
  */
  useEffect(() => {
    document.title = name;
  })

  return (
    <div>
      Hello World
      <button onClick={ ()=> { setName("大猫猫")} }>更改title</button>
    </div>
  );
};

export default MyComponent;

运行项目
React 应用 Effect Hook 函数式中操作生命周期
显然开始渲染的没有什么问题

然后我们点击按钮
React 应用 Effect Hook 函数式中操作生命周期
内容也是改变成功

这里正如我们注释写的那样 useEffect相当于三个生命之前函数
componentDidMount //元素挂载完成
componentDidUpdate //响应式数据更改
componentWillUnmount //组件销毁前

官方不会去动你的蛋糕
它也可以单独去相当于某一个生命周期函数

我们将 useEffect 上面的代码改成

useEffect(() => {
  document.title = name;
  // eslint-disable-next-line react-hooks/exhaustive-deps
},[]);

后面加个空数组
这样他就只相当于 componentDidMount
运行项目
React 应用 Effect Hook 函数式中操作生命周期
第一次渲染上去了
然后我们点击按钮

就不会变化了因为他目前只有componentDidMount的作用

如果你在最后面加个 return
React 应用 Effect Hook 函数式中操作生命周期
那么这个 return中的内容就是组件销毁后会执行的componentWillUnmount逻辑函数文章来源地址https://www.toymoban.com/news/detail-489241.html