React 对比class与Effect Hook优化响应式数据更新监听，感受useEffect真正的强大

news2024/11/15 12:25:11

还是之前写过的一个组件

import React from "react"

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

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

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

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

我们通过 componentDidMount 在页面加载完毕时将state中的name属性写入到页面title标签中
在这里插入图片描述
显然运行时已经没有问题
然后我们通过给更改title 这个按钮添加点击事件然后更改state下的name的值因为我们直接这样改 title他是无法触发数据相应去给他改的所以我们要通过componentDidUpdate 生命周期去监听如果响应式数据更改了再将他写入title
但是显然这样万一我们改的是其他数据那么他依旧会执行这个将name写入title的逻辑非常不友好

我们可以更改组件代码如下

import React from "react"

export default class index extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: "小猫猫",
      cont: 1
    }
  }

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

  componentDidUpdate(props,state) {
    if(state.name !== this.state.name){
      document.title = this.state.name;
      console.log("state.name",state.name);
      console.log("this.state.name",this.state.name);
      console.log("触发");
    }
  }

  render(){
      return (
          <div>
              Hello World
              <button onClick= { ()=>{ this.setState({ name: "大猫猫" }) } }>更改title</button>
              <button onClick= { ()=>{ this.setState({ cont: 2 }) } }>更改cont</button>
          </div>
      )
  }
}

简单说我们利用了 componentDidUpdate 的参数它可以拿到两个参数分别是 props父组件传过来的值还有 state组件的 state
注意你用 this.state 拿到的是更改后的值但这个参数接到的 state 是本次修改前的内容

所以只需要判断 this.state 和函数参数的 state 中的name是不是完全一样就能判断到这次修改有没有改到name
为了让大家看到清楚我特意加了个 cont
方便大家看

那么我们运行项目不管点击多少次更改cont 都不胡触发到if(state.name !== this.state.name){中的逻辑
在这里插入图片描述
然后我们点击更改title
第一次逻辑就会顺利触发可以看到 state.name 拿到的是我们更改之前的值小猫猫 this.state.name 拿到的是我们更改之后的值大猫猫

但是你点击过一次之后肯定是无法再触发了因为之后他们就都等于大猫猫了自然是判断不到他们不同了

这是我们之前用类实现的形式
那么后面我们就来看看 Effect Hook 的写法

我们编写代码如下

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

const MyComponent = () => {
  const [name,setName] = useState("小猫猫");
  const [cont,setCont] = useState(1);
  
  useEffect(() => {
    document.title = name;
    console.log("name值被更改了");
  },[name])

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

export default MyComponent;

大家可能看着有点懵其实利用的就是useEffect第二个参数是个数组我们这里单放一个name 意思就是 useEffect 之间听name更改

当然我们之前说过 useEffect 也带有 componentDidMount 的特性所以一进来会先触发一次然后 name第一次改变所以一进来它一共改变了两次
在这里插入图片描述
然后我们点击更改cont

可以看到不管怎么点都不会触发了
然后我们点击更改title
可以看到这样就触发了

当然 useEffect 可以写多个
也可以拿来当监听器用这个其实还是非常好用的
如下图两个都是可以起到自己的作用的
在这里插入图片描述